[JS] 제이쿼리 선택자에 변수 넣기

일반적으로 제이쿼리에서 선택자에 변수 넣는 방법은

document.getElementsByClassName('odumak');
document.querySelectorAll('.odumak')
$(".odumak") ==> class 선택자

document.getElementById('odumak');
$("#odumak") ==> id 선택자

$("input[name='id']") ==> input 타입 name 선택자

document.getElementsByTagName('div');
$("div") ==> 태그선택자

document.querySelectorAll('[value]')
document.querySelectorAll('[value="odumak"]')
$('[value]'); // value라는 속성을 가진 태그
$('[value="odumak"]');	// value라는 속성 값이 odumak
$("div[title]") ==> div 중에 title 속성이 있는 태그만 가져옴.  ==> 속성 선택자


Array.prototype.filter.call(document.getElementById('odumak').children, function(item) {
  return item.tagName === 'li';
});
$("#odumak > li) ==> odumak라는 아이디를 가진 태그 안에 바로 있는 자식들 중 li 태그만 선택(1 depth)
==> 자식 선택자


document.getElementById('odumak').getElementsByTagName('li');
document.querySelectorAll('#odumak li');
$("#odumak li) ==> odumak라는 아이디를 가진 태그안에 있는 li태그들 모두 선택 > 바로 아래 자식태그만 선택하는 것이 아닌 id의 모든 자식 태그 선택함
==> 후손 선택자

document.querySelectorAll('#zero + div');
document.querySelectorAll('#zero ~ p');
$('#zero + div'); // #zero 바로 다음 div를 선택합니다.
$('#zero ~ p'); // #zero의 형제자매 p를 모두 선택합니다.
==> 형제자매 선택자

$(':input'), $(':button'), $(':image'), $(':checkbox'), $(':radio'), $(':text'); // 각각 모든 인풋, 버튼, 이미지, 체크박스, 라디오, 텍스트인풋 태그를 선택합니다.
$(':odd'), $(':even'), $(':gt(순서)'), $(':lt(순서)'), $(':last') // 각각 홀수 번째, 짝수 번째 태그, 주어진 순서보다 순서가 큰 태그, 순서가 작은 태그, 선택된 것들 중에 마지막 태그를 선택합니다.
$(':focus'), $(':parent'), $(':empty');, $(':disabled'), $(':enabled'), $(':visible'), $(':hidden'); // 각각 현재 포커스된 태그, 자식이 하나라도 있는 태그, 자식이 없는 태그, 비활성화된 태그, 활성화된 태그, 투명이 아닌, 숨겨진 태그를 선택합니다.
$(':visible'), $(':checked'), $(':selected'), $(':only-child');, $(':first-child'), $(':last-child') // 각각 체크된(체크박스), 선택된(select), 부모의 유일한 자식인 태그, 첫 번째 자식인 태그, 마지막 자식인 태그를 선택합니다.
$(':nth-child(순서)'), $(':nth-of-type(순서)'), $(':eq(순서)'); // 각각 순서 번째 자식 태그, 해당 타입 중 순서 번째 자식 태그, 순서 번째 태그를 찾습니다. eq는 0부터 시작하고, nth-child는 1부터 시작합니다.
$(':has(선택자)'), $(':contains(텍스트)'); // 각각 선택자를 자식으로 갖고 있는 태그나 해당 텍스트를 갖고 있는 태그를 선택합니다.
==> 가짜 선택자

반응형

선택자에 변수를 넣는 방법은 어떤 것이 있을까?

var id = 'odumak';

$(.id);         ==> 이런 경우 'odumak'이란 이름을 갖고있는 클래스가 아닌 'id'라는 이름을 갖고있는 클래스를 선택한다.

 

선택자에 변수 넣는법

- 변수가 들어가는 부분을 제외한 부분을 ' '(작은따음표)으로 묶어주면 된다. 

var id = 'odumak';
$('[index=' + id + ']');

var id = 'odumak';
$('#'+id);

var id = 'odumak';
$('.'+id);

 

하지만 이런 방법은 안된다

var id = 'odumak';
$('[index=' + id + '_01]');   ===> X

var id = 'odumak';
$('#' + id + '_01');   ===> X

var id = 'odumak';
$('.' + id + '_01');   ===> X

 

이상입니다.