-
Jquery #2 선택자코드 정리/JQuery 2021. 5. 12. 09:29
:button은 type이 button 인 요소를 선택하는 선택자입니다.
문법
$(':button')예제
$(:button).hide();type이 button인 요소를 모두 숨깁니다.
$('.btn:button').val();type이 button 이면서 class 이름이 btn인 요소의 밸류를 가져옵니다.
:contains()는 특정 문자열을 포함한 요소를 선택합니다.
문법
$(':contains(Hello)')주의!
- 문자열 포함 여부를 따질 때 대소문자를 구분합니다.
예제
$(document).ready(function() { $('.text:contains("hello")').css('color', 'red'); }); <div class="text">Hello</div> <div class="text">hello</div>위 코드를 실행하면 두번째 div의 글자를 빨간색으로 변경합니다.
:empty는 내용이 없는 빈 요소를 선택하는 선택자 입니다.
문법
$('div:empty')내용이 없는 div태그를 선택합니다.
예제
$(document).ready(function() { $( '.area:empty' ).append('text'); });class 이름이 area인 요소중 비어있는 요소를 선택해 "text" 문자열을 추가합니다.
:even은 짝수 인덱스 요소를 선택하는 선택자입니다.
문법
$('div:even')내용이 없는 div태그를 선택합니다.
예제
$(document).ready(function() { $( '.list:even' ).css('color', 'red'); });class 이름이 list인 요소중 짝수인 인덱스의 글자 색을 빨간색으로 변경합니다.
:odd은 홀수 인덱스 요소를 선택하는 선택자입니다.
문법
$('div:odd')내용이 없는 div태그를 선택합니다.
예제
$(document).ready(function() { $( '.list:odd' ).css('color', 'red'); });class 이름이 list인 요소중 홀수인 인덱스의 글자 색을 빨간색으로 변경합니다.
:has()는 특정 요소를 포함하는 요소를 선택합니다.
문법
$('div:has(span)')div 안에 span 요소가 있는 태그를 선택합니다.
예제
$(document).ready(function() { $( '.list:has(span)' ).css('border', '1px solid red'); });span요소를 가진 div의 태두리를 빨간색으로 변경합니다.
:nth-child()는 형제 요소 중 an + b번째 요소들을 선택합니다.
문법
$(':nth-child(an+b)')- a와 b는 상수, n은 변수입니다.
- n에는 음수가 아닌 정수(0, 1, 2, 3 ...)가 차례대로 대입됩니다.
- an + b 대신 even (짝수 선택자), odd (홀수 선택자) 를 사용할 수 있습니다.
예제
$(document).ready(function() { $( 'l li:nth-child(2)').css('color', 'red'); });<body> <ol> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> <li>Ten</li> </ol> </body>ol 의 자식 요소인 li의 형제 요소(똑같은 태그) 중에서 두 번째 요소의 글자 색상을 빨간색으로 변경합니다.
.add()는 어떤 요소를 추가로 선택할 때 사용합니다.
예제
$('#btn_1').add('#btn_2').css('color', 'red');아이디가 btn_1인 요소를 선택하고, 추가로 아이디가 btn_2인 요소를 선택해 글자 색상으 빨간색으로 변경합니다.
반응형'코드 정리 > JQuery' 카테고리의 다른 글
Jquery #1 사용하기 (0) 2021.05.12