jQuery
- JavaScript를 쉽고 편리하게 사용할 수 있도록 하는 라이브러리이다.
- 다운로드 : https://jquery.com/
1) compressed production : 압축된 완성품 (실제 프로젝트에 포함할 라이브러리)
2) uncompressed development : 압축 안 된 개발용 - jQuery 사용 방법 (택일)
1) jQuery 라이브러리를 파일로 받아서 - jQuery 라이브러리는 jQuery를 사용하는 각종 기능(예: jQuery UI 등)보다 먼저 포함해야 한다.
</script>
<!-- 다운로드 받은 jQuery 라이브러리 포함하기 -->
<script src="../../assets/js/lib/jquery-3.7.1.min.js"></script>
<!-- CDN을 이용해서 jQuery 라이브러리 포함하기 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>jQuery wrapper
- jQuery가 지원하는 메소드를 사용하기 위해서는 jQuery 객체가 필요하다.
- jQuery 객체를 만들려면 jQuery wrapper로 묶어야 한다.
- JavaScript 객체를 jQuery wrapper로 묶으면 jQuery 객체가 된다.
- jQuery wrapper를 이용한 jQuery 객체 만들기
1) 선택자를 이용한 jQuery 객체
(1) jQuery(선택자)
(2) $(선택자)
2) JavaScript 객체 → jQuery 객체 (별로 안씀)
(1) jQuery(JavaScript 객체)
(2) $(JavaScript 객체)
<body>
<div id="box">Hello world</div>
<script>
// 1. 선택자를 이용한 jQuery 객체 만들기
var box = $('#box');
console.log(box);
// 2. JavaScript 객체를 jQuery 객체로 바꾸기
var box = $(document.getElementById('box'));
console.log(box);
</script> <div id="box" class="wrap"></div>
<script>
// 1. 태그로 인식하면 배열
var div = $('div'); // getElementsByTagName('div')
console.log(div);
// 2. id로 인식하면 객체
var box = $('#box'); // getElementById('box')
console.log(box);
// 3. class로 인식하면 배열
var wrap = $('.wrap'); // getElementsByClassName('wrap')
console.log(wrap);
</script>
<div class="ott_wrap">
<ul class="ott">
<li id="watcher">
<a href="#">왓차</a>
</li>
<li id="coupangplay">
<a href="#">쿠팡플레이</a>
</li>
<li id="netflex">
<a href="#">넷플릭스</a>
</li>
<li id="disneyplus">
<a href="#">디즈니플러스</a>
</li>
<li id="wave">
<a href="#">웨이브</a>
</li>
</ul>
</div>
<script>
// 1. 자식
var ott = $('.ott_wrap > .ott'); // 자식 선택자
console.log(ott);
var ott = $('.ott_wrap').find('.ott'); // find 메소드
console.log(ott);
var ott = $('.ott_wrap').children(); // .ott_wrap의 모든 자식
console.log(ott);
// 2. 후손
var li = $('.ott_wrap li'); // 후손 선택자
console.log(li);
var li = $('.ott_wrap').find('li'); // find 메소드
console.log(li);
var li = $('.ott_wrap').children().children(); // .ott_wrap의 자식의 자식
console.log(li);
// 3. 모든 형제
var sibling = $('#netflex ~ li'); // 모든 형제 선택자 (#nexflex 다음 모든 형제)
console.log(sibling);
var sibling = $('#netflex').nextAll('li'); // nextAll 메소드 (#netflex 다음 모든 형제)
console.log(sibling);
var sibling = $('#netflex').siblings('li'); // siblings 메소드 (#netflex의 모든 형제)
console.log(sibling);
var sibling = $('#netflex').prevAll('li'); // prevAll 메소드 (#netflex 이전 모든 형제)
console.log(sibling);
// 4. 인접 형제
var sibling = $('#netflex + li'); // 인접 형제 선택자 (#netflex의 다음 형제 하나)
console.log(sibling);
var sibling = $('#netflex').next('li'); // next 메소드 (#netflex의 다음 형제 하나)
console.log(sibling);
var sibling = $('#netflex').prev('li'); // prev 메소드 (#netflex의 이전 형제 하나)
console.log(sibling);
// 5. 부모
var parent = $('#netflex').parent(); // 부모
console.log(parent);
var parent = $('#netflex').closest('div'); // 가장 가까운 div 부모
console.log(parent);
var parent = $('#netflex').parents(); // 모든 부모
console.log(parent);
</script> 인접 형제 가져온 결과
선택자로는 위로 조회가 안되기 때문에 이전 형제를 가져올 수 없었지만 제이쿼리에서는 이전 형제도 가져올 수 있다.
마찬가지로 선택자는 위로 조회가 안되서 부모를 가져올 수 없었지만 제이쿼리에서는 가능하다
상태 확인하기
is(':focus') 포커스를 가졌다면 true 반환
is(':checked') 체크되었다면 true 반환
is(':selected') 선택되었다면 true 반환
if($(':radio').is(':checked')){
console.log('radio 체크됨');
} else {
console.log('raio 체크안됨');
}태그 내부 텍스트
<p id="p1">Hello World</p>
<script>
/*
| JavaScript | jQuery
-------------------|-----------------------------|--------------------
내부텍스트가져오기 | 요소.textContent | 요소.text()
내부텍스트설정하기 | 요소.textContent = '텍스트' | 요소.text('텍스트')
*/
var p1 = $('#p1');
console.log(p1.text());
p1.text('안녕하세요. 반갑습니다.');
</script>태그 내부 요소
<p id="p2"><strong>Hello World</strong></p>
<script>
/*
| JavaScript | jQuery
-------------------|----------------------------|--------------------
내부요소가져오기 | 요소.innerHTML | 요소.html()
내부요소설정하기 | 요소.innerHTML = '요소' | 요소.html('요소')
*/
var p2 = $('#p2');
console.log(p2.html());
p2.html('<mark>안녕하세요. 반갑습니다.</mark>');
</script>태그 추가
- 부모.prepend(자식) : 첫번째 자식으로 추가하기
- 부모.append(자식) : 마지막 자식으로 추가하기
- 자식.prependTo(부모) : 첫번째 자식으로 추가하기
- 자식.appendTo(부모) : 마지막 자식으로 추가하기
// 부모 요소 jQuery 객체 생성
var menu = $('#menu');
// 부모 요소에 자식 추가하기
menu.prepend('<li id="kimchi">김치</li>');
menu.prepend($('<li>').attr('id', 'pizza').text('피자'));
menu.append('<li id="donut">도넛</li>');
menu.append($('<li>').attr('id', 'pasta').text('파스타'));
// 자식 요소를 부모에 추가하기
var str = '<li id="coffee">커피</li>';
$(str).prependTo(menu);
var obj = $('<li>').attr('id', 'ramen').text('라면');
obj.appendTo(menu);- 형제.before(형제) : 이전 형제로 추가하기
- 형제.after(형제) : 다음 형제로 추가하기
태그 제거
<div id="box3">
<strong id="s1">Hello World</strong>
<strong id="s2">Nice to meet you</strong>
</div>
<script>
// 특정 요소만 제거하기
$('#s2').remove();
// 하위 요소 제거하기
$('#box3').empty();
</script>객체 속성
| JavaScript | jQuery
--------------------|----------------|--------------------
property 가져오기 | 요소.속성 | 요소.prop('속성')
| 요소['속성'] | 요소.prop('속성')
property 설정하기 | 요소.속성 | 요소.prop('속성', 값)
| 요소.['속성'] | 요소.prop('속성', 값)
property 삭제하기 | 요소.속성 | 요소.removeProp('속성') : built-in property 삭제 금지
| 요소['속성'] | 요소.removeProp('속성') : built-in property 삭제 금지value 속성
| JavaScript | jQuery
-----------------|--------------------|--------------------
value 가져오기 | 요소.value | 요소.val()
value 설정하기 | 요소.value = 값 | 요소.val(값)data 속성
data() 메소드로 설정한 data-속성
| jQuery
---------------------|----------------------------------------------------
data-item 가져오기 | 요소.data('item')
data-item 설정하기 | 요소.data('item', 값)
data-myName 가져오기 | 요소.data('myName') 요소.data('my-name')
data-myName 설정하기 | 요소.data('myName', 값) 요소.data('my-name', 값)
data-my-age 가져오기 | 요소.data('my-age') 요소.data('myAge')
data-my-age 설정하기 | 요소.data('my-age', 값) 요소.data('myAge', 값)CSS 처리
| JavaScript | jQuery
------------------|----------------------------------|--------------------
css속성 가져오기 | 요소.style.fontSize | 요소.css('font-size')
| 요소.style['font-size'] | 요소.css('font-size')
css속성 설정하기 | 요소.style.fontSize = '32px' | 요소.css('font-size', '32px')
| 요소.style['font-size'] = '32px' | 요소.css('font-size', '32px') class 속성
<script>
// class 속성 추가하기
$('#box1').addClass('big').addClass('visible'); // 메소드 체이닝으로 2개의 class 지정하기
$('#box2').addClass('small invisible'); // 공백으로 구분해서 2개의 class 지정하기
// class 속성 제거하기
$('#box1').removeClass('visible');
$('#box2').removeClass('invisible');
// class 속성 확인하기
if($('#box1').hasClass('big')){
$('#box1').removeClass('big');
$('#box1').addClass('small');
}
// class 속성 토글(추가와 제거가 번갈아가면서 적용되는 것)
$('#box1').toggleClass('small'); // <div id="box1" class="small"> → <div id="box1" class="">
$('#box2').toggleClass('small').toggleClass('small'); // <div id="box2" class="small"> → <div id="box2" class=""> → <div id="box2" class="small">
</script>jQuery 이벤트
1. 현재 권장하지 않는 이벤트 메소드
1) bind()
2) live()
3) delegate()
2. 현재 사용하는 이벤트 메소드
1) on()
(1) 표준 이벤트 모델이므로(addEventListener) 하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있다.
(2) 형식
① 일반적인 요소
이벤트대상.on('이벤트타입', 이벤트리스너)
② 이벤트로 생성한 동적 요소
부모요소.on('이벤트타입', 이벤트대상, 이벤트리스너)
2) one()
(1) 한 번만 동작하는 이벤트를 작성할 수 있다.
(2) 형식
이벤트대상.one('이벤트타입', 이벤트리스너)
3) off()
(1) 등록된 이벤트를 제거한다.
(2) 형식
이벤트대상.off('이벤트타입')
4) trigger()
(1) 이벤트를 강제로 발생시킨다.
(2) 형식
이벤트대상.trigger('이벤트타입')
5) 이벤트타입이 곧 이벤트 메소드
(1) 클릭이벤트 : 이벤트대상.click(이벤트리스너)
(2) 변경이벤트 : 이벤트대상.change(이벤트리스너)
(3) 키이벤트 : 이벤트대상.keyup(이벤트리스너) <!-- 이벤트 등록 -->
<button id="btn">버튼</button>
<script>
$('#btn').on('click', function(){
alert(this.textContent + ' 클릭했다.'); // JavaScript : JavaScript 객체 this의 textContent 속성
alert($(this).text() + ' 클릭했다.'); // jQuery : jQuery 객체로 바꾼 this의 text() 메소드
})
</script>
attr(), prop() 쓰임 차이
