728x90
반응형
일반적으로 제이쿼리에서 선택자에 변수 넣는 방법은
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
이상입니다.
728x90
반응형
'IT > WEB' 카테고리의 다른 글
[Java] static 변수와 static 메소드 대강 정리 (0) | 2021.10.24 |
---|---|
[JAVA] 엑셀 파일 유효성 검사(Excel Validation) (0) | 2021.10.20 |
[JAVA] 스케줄러(Quartz) 실행하는 법 (0) | 2021.10.13 |
[JAVA] Properties 클래스 (0) | 2021.04.19 |
[JAVA] 파일 복호화(aes256)_참고용 (0) | 2021.04.16 |