---

jQuery

jQuery() === $()

---

• JavaScript를 쉽고 편리하게 사용할 수 있도록 하는 라이브러리이다.
• 다운로드 : https://jquery.com/
  • compressed production : 압축된 완성품 (실제 프로젝트에 포함할 라이브러리)
  • uncompressed development : 압축 안 된 개발용
• jQuery 사용 방법 (택일)
  • jQuery 라이브러리를 파일로 받아서 <script> 태그로 포함하기
  • CDN을 이용해서 jQuery 라이브러리를 포함하기
    (CDN, Content Delivery Network)
• jQuery 라이브러리는 jQuery를 사용하는 각종 기능(예: jQuery UI 등)보다 먼저 포함해야 한다.

---

jQuery wrapper

• jQuery가 지원하는 메소드를 사용하기 위해서는 jQuery 객체가 필요하다.
• jQuery 객체를 만들려면 jQuery wrapper로 묶어야 한다.
• JavaScript 객체를 jQuery wrapper로 묶으면 jQuery 객체가 된다.

jQuery wrapper를 이용한 jQuery 객체 만들기

• 선택자를 이용한 jQuery 객체
  • jQuery(선택자)
  • $(선택자)
• JavaScript 객체 → jQuery 객체
  • jQuery(JavaScript객체)
  • $(JavaScript객체)

활용 예제

  <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');

---

DOM

---

dom 알아내기

---

‣ Tag / id / Class

• 태그로 인식
  • 태그로 인식하면 배열

    var div = $('div');     // getElementsByTagName('div')

• id로 인식
  • id로 인식하면 객체

    var box = $('#box');    // getElementById('box')

• class로 인식
  • class로 인식하면 배열

    var wrap = $('.wrap');  // getElementsByClassName('wrap')

---

‣ 자식

• 자식 선택자
  • $('부모 > 자식');
• find 메소드
  • $('부모').find('자식');
• children() 모든 자식
  • $('부모').children();

‣ 후손

• 후손 선택자
  • $('부모 자식'); ⇒후손은 공백으로 구분
• find 메소드
  • $('부모').find('후손');
• children().children() 자식의 자식
  • $('부모').children().children();

‣ 모든 형제

• 모든 형제 선택자 (#id 다음 모든 형제)
  • $('#id ~ 형제');
• nextAll 메소드 (#id 다음 모든 형제)
  • $('#id').nextAll('형제');
• siblings 메소드 (#id의 모든 형제)
  • $('#id').siblings('형제');
• prevAll 메소드 (#id 이전 모든 형제)
  • $('#id').prevAll('형제');

‣ 인접 형제

• 인접 형제 선택자 (#id의 다음 형제 하나)
  • $('#id + 형제');
• next 메소드 (#id의 다음 형제 하나)
  • $('#id').next('형제');
• prev 메소드 (#id의 이전 형제 하나)
  • $('#id').prev('형제');

‣ 부모

• parent() 부모
  • $('#자식').parent();
• closest() 가장 가까운 div 부모
  • $('#자식').closest('div');
• parents() 모든 부모
  • $('#자식').parents();

---

‣ type 속성으로 알아내기

• []
• :

• 예제

    var text = $('input[type=text]');
    console.log(text);

    var text = $(':text');
    console.log(text);

    var password = $(':password');
    console.log(password);

    var radio = $(':radio');
    console.log(radio);

    var checkbox = $(':checkbox');
    console.log(checkbox);  

---

‣ 상태 지정하기

• 예제

    var text = $(':focus');  // 포커스를 가진 요소
    console.log(text);

    var radioChecked = $(':radio:checked');  // 체크된 radio
    console.log(radioChecked);

    var checkboxChecked = $(':checkbox:checked')  // 체크된 checkbox
    console.log(checkboxChecked);

    var selected = $(':selected');  // 선택된 요소(<select> 태그)
    console.log(selected);  

---

‣ 상태 확인하기

• is(':focus') : 포커스를 가졌다면 true 반환
• is(':checked') : 체크되었다면 true 반환
• is(':selected') : 선택되었다면 true 반환

---

👉jQuery DOM 알아내기 활용예제 깃허브(클릭)

---

dom 변경

---

‣ 태그 내부 텍스트

	JavaScript	jQuery
내부텍스트가져오기	요소.textContent	요소.text()
내부텍스트설정하기	요소.textContent = '텍스트'	요소.text('텍스트')

---

‣ 태그 내부 요소

	JavaScript	jQuery
내부요소가져오기	요소.innerHTML	요소.html()
내부요소설정하기	요소.innerHTML = '요소'	요소.html('요소')

---

‣ 태그 추가 (부모-자식 관계)

• 부모.prepend(자식요소) : 첫번째 자식으로 추가하기
• 부모.append(자식요소) : 마지막 자식으로 추가하기
• 자식.prependTo(부모요소) : 첫번째 자식으로 추가하기
• 자식.appendTo(부모요소) : 마지막 자식으로 추가하기

---

‣ 태그 추가 (형제 관계)

• 형제.before(형제요소) : 이전 형제로 추가하기
• 형제.after(형제요소) : 다음 형제로 추가하기

---

‣ 태그 제거

• remove() : 특정 요소만 제거하기
• empty() : 하위 요소 제거하기 (수정할 때 주로 사용)

---

👉jQuery DOM 변경 활용예제 깃허브(클릭)

---

dom 속성

---

‣ 태그 속성

	JavaScript	jQuery
attribute 가져오기	요소.getAttribute('속성')	요소.attr('속성')
attribute 설정하기	요소.setAttribute('속성', 값)	요소.attr('속성', 값)
attribute 삭제하기	요소.removeAttribute('속성')	요소.removeAttr('속성')

---

‣ 객체 속성

	JavaScript	jQuery
property 가져오기	요소.속성	요소.prop('속성')
요소['속성']	요소.prop('속성')
property 설정하기	요소.속성	요소.prop('속성', 값)
요소.['속성']	요소.prop('속성', 값)
property 삭제하기	요소.속성	요소.removeProp('속성') : built-in property 삭제 금지
요소['속성']	요소.removeProp('속성') : built-in property 삭제 금지

• class 속성을 다루는 메소드는 별도로 존재함
  • addClass(), removeClass(), toggleClass()

---

‣ value 속성

	JavaScript	jQuery
value 가져오기	요소.value	요소.val()
value 설정하기	요소.value = 값	요소.val('요소')

• value를 조작해서 원하는 value를 선택할 수 있다.
• textarea는 조금 다른 특성을 가짐
  • 입력된 값이 text로 들어가기 때문에 .text()로도 활용 가능

---

‣ data- 속성

data() 메소드로 설정한 data-속성

	jQuery
data-item 가져오기	요소.data('item')
data-item 설정하기	요소.data('item', 값)
data-myName 가져오기	요소.data('myName') 요소.data('my-name')	camelCase <-> 하이픈(-) 상호변환(혼용) 가능
data-myName 설정하기	요소.data('myName', 값) 요소.data('my-name', 값)
data-my-age 가져오기	요소.data('my-age') 요소.data('myAge')	하이픈(-) <-> camelCase 상호변환(혼용) 가능
data-my-age 설정하기	요소.data('my-age', 값) 요소.data('myAge', 값)

attribute로 명시한 data-속성

	JavaScript	jQuery
data-item 가져오기	요소.dataset.item	요소.data('item')
data-item 설정하기	요소.dataset.item = 값	요소.data('item', 값)
data-myName 가져오기	요소.dataset.myname	요소.data('myname') (호출시 대문자를 소문자로 바꿔야한다.)
data-myName 설정하기	요소.dataset.myname = 값	요소.data('myname', 값)
data-my-age 가져오기	요소.dataset.myAge	요소.data('my-age') 요소.data('myAge')
data-my-age 설정하기	요소.dataset.myAge = 값	요소.data('my-age', 값) 요소.data('myAge', 값)

• attribute로 작성한 data-속성에서는 camel case를 사용하지 말자.

---

👉jQuery DOM속성 활용예제 깃허브(클릭)

---

dom CSS

---

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')

---

👉jQuery DOM CSS처리하기 활용예제 깃허브(클릭)

---

(attribute를 dom객체로 저장하게 되면 property가 된다.)

---

자는 시간도 부족하게 공부만 하는 나날

---