제이쿼리 선택자

제이쿼리를 선택하는 큰 이유가 제이쿼리 선택자 입니다.

 

css 선택자를 그대로 사용할 수 있어서 코드 선택이 매우 간단하다.

아래 두개의 코드가 나와서 가치가 좀 떨어졌지만 구형 브라우저에서는 탁월한 선택이다.

document.querySelector
document.querySelectorAll

 

제이쿼리 선택자는 $() 모양인데 $라는 변수(함수) 의 괄호 안에 인자를 제공하는 것이다.

이 함수가 실행된 후에 내부적인 과정을 거쳐 결과를 반환한다.

---

아이디 (#)

기존

document.getElementById('zero');

 

제이쿼리

$('#zero');

 

ES5의 대안

document.querySelector('#zero')

 

---

클래스(.)

기존

document.getElementsByClassName('zero');

 

제이쿼리

$('.zero');

 

 

ES5의 대안

document.querySelectorAll('.zero')

---

태그

기존

document.getElementsByTagName('p');

 

제이쿼리

$('p');

 

 

---

속성([])

기존에는 존재하지 않았다.

 

제이쿼리

// 1 
$('[value]');   // value라는 속성을 가진 태그

// 2
$('[value="zero"]');

1. [] 사이에 속성 이름을 넣어주면 된다. 

2. 속성 값까지 선택하고 싶다면 [ 속성명 = 속성 값 ] 이라고 쓰면 된다.

 

 

ES5 의 대안

document.querySelectorAll('[value]')
document.querySelectorAll('[value="zero"]')

---

자식 선택자

기존

Array.prototype.filter.call(document.getElementById('zero').children, function(item) {
  return item.tagName === 'P';
});

 

제이쿼리

$('#zero > p');

기존의 코드를 제이쿼리로 간단하게 구현할 수 있다.

 

ES5

document.querySelectorAll('#zero > p');

---

후손 선택자

기존

document.getElementById('zero').getElementsByTagName('div');

 

제이쿼리

$('#zero div')
document.querySelectorAll('#zero div');

제이쿼리로는 한 칸을 띄어쓰기 함으로써 후손임을 알 수 있다.

 

---

형제 자매 선택자

기존

// #zero 바로 다음 div를 선택합니다.
$('#zero + div');

// #zero의 형제자매 p를 모두 선택합니다.
$('#zero ~ p'); 

형제 자매 태그를 선택하는데 '+' 는 다음 하나만 선택하고, ~는 형제 자매 중 일치하는 것을 모두 선택합니다.

 

ES5 의 대안

document.querySelectorAll('#zero + div');
document.querySelectorAll('#zero ~ p');

 

---

가짜 선택자

주로 가짜 선택자는 구문으로 앞에 : 를 붙힌다.

앞에 다른 선택자를 붙혀서 조합할 수 있다.

예를 들면 #zero:parent 처럼

// 각각 모든 인풋, 버튼, 이미지, 체크박스, 라디오, 텍스트인풋 태그를 선택합니다.
$(':input')
$(':button')
$(':image')
$(':checkbox')
$(':radio')
$(':text');


 // 각각 홀수 번째, 짝수 번째 태그, 주어진 순서보다 순서가 큰 태그, 순서가 작은 태그, 선택된 것들 중에 마지막 태그를 선택합니다.
$(':odd')
$(':even')
$(':gt(순서)')
$(':lt(순서)')
$(':last')


// 각각 현재 포커스된 태그, 자식이 하나라도 있는 태그, 자식이 없는 태그, 비활성화된 태그, 활성화된 태그, 투명이 아닌, 숨겨진 태그를 선택합니다.
$(':focus')
$(':parent')
$(':empty')
$(':disabled')
$(':enabled')
$(':visible')
$(':hidden')


// 각각 체크된(체크박스), 선택된(select), 부모의 유일한 자식인 태그, 첫 번째 자식인 태그, 마지막 자식인 태그를 선택합니다.
$(':visible')
$(':checked')
$(':selected')
$(':only-child')
$(':first-child')
$(':last-child') 


// 각각 순서 번째 자식 태그, 해당 타입 중 순서 번째 자식 태그, 순서 번째 태그를 찾습니다. eq는 0부터 시작하고, nth-child는 1부터 시작합니다.
$(':nth-child(순서)')
$(':nth-of-type(순서)')
$(':eq(순서)')



// 각각 선택자를 자식으로 갖고 있는 태그나 해당 텍스트를 갖고 있는 태그를 선택합니다.
$(':has(선택자)')
$(':contains(텍스트)')

 

 

조합

좋은 점은 위의 선택자들을 조합할 수 있습니다.

만약 태그 이름이 p면서 id는 zero고 checkbox인 태그를 선택하고 싶다하면 $('p#zero:checkbox'); 하면 됩니다.

또한 쉼표를 사용해서 여러 개의 선택자를 동시에 선택할 수 있습니다.

$('#zero, .nero, p') 하면 #zero와 .nero 그리고 p 태그를 모두 선택합니다.

 

 

 

 

---

 

참고 : https://www.zerocho.com/category/jQuery/post/57a9a371e4bc011500624ba3