안녕하세요
이번 시간에는 java script와 비교하여 jquery를 배웠습니다.
jqeury는 자바 스크립트의 라이브러리로,
지금은 아니지만 초반에 매우 인기를 얻었던 라이브러리라고 합니다.
1. jquery의 기본 형태
$('선택자').동작함수()- 선택자: css에서 html의 여러 태그, 클래스명, id명을 선택하는 것처럼 선택하면 됩니다.
- 동작함수: 온점 뒤에 동작할 함수를 써주시면 함수가 동작하게 됩니다.
저는 처음에 보고 js와 크게 다르지 않다고 생각했는데,
뒤로 갈 수록 줄수의 차이가 나더라구요.
그리고 여러개가 있는 선택자를 불렀을 때 querySelectorAll과 같은 역할을 합니다.
한마디로 한개만 불러오지 않고 선택자에 해당하는 모든 요소를 불러들인다는 말입니다.
불러와진 여러개의 요소들은 jquery의 객체로서 저장되고 이 역시 유사배열 형태를 지닙니다.
forEach()함수가 사용 가능하다는 말이겠죠?
2. jquery의 여러가지 함수
- val() => js의 value와 같은 역할
$('input').val('안뇽안뇽!');- css() => js의 style와 같은 역할 (여러 css값 삽입 가능)
$('span').css({
fontSize: '40px', // 모든 span에 대해 폰트 크기 변경
color: 'blue', // 모든 span에 대해 폰트 색상 변경
});- attr() => setArribute와 같은 역할
function changeAttrJquery(){
$('a').attr('href', 'https://www.daum.net');
//a 태그의 하이퍼링크값 변경
}- text() => js의 innerText와 같은 역할
function changeTextJquery() {
$('.p-text').text('jquery로 텍스트 변경!')
}- html() => js의 innerHTML와 같은 역할
function changeHtmlJquery() {
$('.p-html').html('<h3>jquery로 변경</h3>')
}- append() => js append와 같은 역할
function appendJquery() {
$('.colors').append("<li>마지막 자식으로 추가된 jquery</li>");
// js의 경우에는 createElement 후 append 해야했는데, jquery에선
// 한줄에 그냥 태그까지 입력해서 삽입 가능!!
}- prepend() => js의 prepend와 같은 역할
function prependJquery() {
$('.colors').prepend('<li>첫 자식으로 추가된 jquery</li>');
// append와 마찬가지로 태그를 직접 입력하여 삽입 가능!!
}- before() => js의 before와 같은 역할
function beforeJquery() {
$('.green').before('<li>이전 형제 요소 추가</li>');
}- after() => js의 after와 같은 역할
function afterJquery() {
$('.green').after('<li>다음 형제 요소 추가</li>');
}- remove() => js의 remove와 같은 역할
function removeJquery() {
$('#li2').remove();
}- empty() => js에 같은 역할 없음
( js에서는 대신 다른 방법으로 empty역할을 수행합니다.)
function emptyJquery() {
${'ul.nums'}.empty();
}- findParents() => js에 같은 역할 없음
: child2 라는 클래스의 부모를 찾아서 반환해줌
console.log($('.child2').parents());- next() => js의 nextElementSibling와 같은 역할
: child2라는 클래스의 다음 형제 요소를 찾아서 반환해줌
console.log($('.child2').next());- prev() => js의 previousElementsibling와 같은 역할
: child2라는 클래스의 이전 형제 요소를 찾아서 반환해줌
console.log($('.child2').prev());- childred() => js의 children와 같은 역할
: parents라는 클래스의 자식 요소를 찾아서 반환해줌
console.log($('.parents).children());- addClass() => js의 classList.add()와 같은 역할
: id값이 hi인 태그에 'fs-50'이라는 클래스 추가
$('#hi').addClass('fs-50');- hasClass() => js의 classList.contains()와 같은 역할
: : id값이 hi인 태그에 'fs-50'이라는 클래스가 있으면 true반환, 없으면 false반환
$('#hi').hasClass('fs-50');- toggleClass() => js의 classList.toggle()와 같은 역할
: id값이 hi인 태그에 'fs-50'이라는 클래스가 있으면 추가, 없으면 제거
$('#hi').toggleClass('bg-pink');
3. jquery의 이벤트 처리
- 기본 형태 ver 1)
$("선택자").on("동작함수", function() {
// 이벤트 발생 시 실행될 코드
});
// ex)
$('.num').on('click', function(){
$(this).css('color', 'blue');
});- 기본 형태 ver 2)
$("선택자")."동작함수"(function() {
// 이벤트 발생 시 실행될 코드
});
// ex)
$('.num').'click'(function(){
$(this).css('color', 'blue');
});jquery의 이벤트 처리 함수 작성법은 두가지가 있습니다.
두 가지의 방법은 기본적으로 동일한 동작을 수행하나, on메서드를 사용하는 첫번째 버전이 추천되는 바입니다.
이유는 동적으로 이벤트를 헨들러하거나 삭제하는 경우에 편리하고 가독성이 좋기때문이라고 합니다.
+ 실습
- 실습1_ 버튼 누를때마다 과일 사진 변경하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>실습. 이미지 바꾸기</title>
<!-- TODO: jQuery CDN 추가 -->
<script
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"
></script>
</head>
<body>
<h1>이미지 바꾸기</h1>
<img class="fruit" src="./image/q.jpg" alt="" width="300" height="200" />
<br />
<button class="btn apple">사과</button>
<button class="btn bananas">바나나</button>
<button class="btn grapes">포도</button>
<button class="btn peaches">복숭아</button>
<script>
// TODO: 조건을 만족하는 jquery 코드 작성
// console.log($('.btn')); // 유사 배열
// jQuery 는 js와 다르게 배열 형태더라도 그냥 바로 이벤트 적용 가능!!
$('.apple').on('click', function(){
$('.fruit').attr('src', './image/apple.jpg');
});
$('.bananas').on('click', function(){
$('.fruit').attr('src', './image/bananas.jpg');
});
$('.grapes').on('click', function(){
$('.fruit').attr('src', './image/grapes.jpg');
});
$('.peaches').on('click', function(){
$('.fruit').attr('src', './image/peaches.jpg');
});
</script>
</body>
</html>- 실습2_ 클릭 시 div 상자 색깔 변하게 하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>실습19. 클래스 바꾸기</title>
<!-- TODO: jQuery CDN 추가 -->
<script
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"
></script>
<style>
.box {
width: 100px;
height: 100px;
}
.bg-red {
background-color: red;
}
.bg-orange {
background-color: orange;
}
.bg-yellow {
background-color: yellow;
}
</style>
</head>
<body>
<h1>클래스 바꾸기</h1>
<div class="box bg-red"></div>
<script>
function changeColor() {
// TODO: 조건을 만족하는 jquery 코드 작성
// .bg-red 클래스 있다면, .bg-red 제거, .bg-orange 추가
// .bg-orange 클래스 있다면, .bg-orange 제거, .bg-yellow 추가
// .bg-yellow 클래스 있다면, .bg-yellow 제거, .bg-red 추가
if ($('div').hasClass('bg-red') === true){
$('div').removeClass('bg-red');
$('div').addClass('bg-orange');
}
else if ($('div').hasClass('bg-orange') === true){
$('div').removeClass('bg-orange');
$('div').addClass('bg-yellow');
}else if ($('div').hasClass('bg-yellow') === true){
$('div').removeClass('bg-yellow');
$('div').addClass('bg-red');
}
}
$('div').on('click', changeColor);
</script>
</body>
</html>'개발 공부한 것들 > SeSSAC 웹 풀스텍 과정 회고록' 카테고리의 다른 글
| [SeSSAC] 웹 풀스택 영등포 5기 과정_nodejs기초 (0) | 2023.08.09 |
|---|---|
| [SeSSAC] 웹 풀스택 영등포 5기 과정_ Web Resume만들기 (0) | 2023.08.04 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(3)_dom (0) | 2023.07.31 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(2)_map,filter,find메소드 (0) | 2023.07.29 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(1)_변수, 배열 , 반복문 (0) | 2023.07.27 |