-
[jQuery] 제이쿼리의 선택자Legacy/Web 2015. 7. 14. 10:35728x90
앞서 자바스크립트의 선택자에서와 같은 주의사항이 있다.
DOM을 선택하려면 body보다 제이쿼리가 나중에 실행되어야 한다는 것이었다.
이렇게 하는데에 jQuery에는 두 가지 방법이 있다.
1. $(document).ready(function(){실행문});
2. $(function(){실행문});
위의 두 방법은 <body> 영역에 모든 문서 객체를 로딩한 후 실행문을 실행한다.
직접 선택자와 인접 관계 선택자
제이쿼리를 이용한 CSS와 속성 변경방법
1. $("#tistoryWrap").css("color", "blue"); => id가 tistoryWrap인 요소를 찾아 css를 적용한다.
2. $("img").attr("width", "300"); => img 태그의 속성(attribute) 을 적용
기본 선택자의 종류
직접 선택자
전체 선택자 - $("*") 모든 요소를 선택한다.
아이디 선택자 - $("#아이디명") id 속성으로 선택
클래스 선택자 - $(".클래스명") class 속성으로 선택
요소명(태그) 선택자 - $("요소명") 요소명으로 선택
그룹 선택자 - $("선택1, 선택2, 선택3, ... 선택n) 지정된 요소들을 한번에 선택
인접 관계 선택자
부모 요소 선택자 - $("요소 선택").parent() 선택한 요소의 부모 요소를 선택한다.
상위 요소 선택자 - $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택한다.
하위 요소 선택자 - $("요소 선택 하위 요소") 선택한 요소에 지정한 하위 요소를 선택한다.
자식 요소 선택자 - $("요소 선택>자식 요소") 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택한다.
자식 요소들 선택자 - $("요소 선택").children() 선택한 요소의 모든 자식 요소를 선택한다.
앞 요소 선택자 - $("요소 선택").prev() 선택한 요소의 앞 요소(형제 요소 중 형)을 선택한다.
앞 요소들 선택자 - $("요소 선택").prevAll() 선택한 요소의 앞 요소 모두를 선택한다.
지정 앞 요소들 선택자 - $("요소 선택").prevUntil 선택한 요소부터 지정한 요소의 앞 요소까지 모두 선택한다.
뒷 요소 선택자 - $("요소 선택").next 또는 $("요소 선택+다음 요소") 선택한 요소의 다음 요소(형제 요소 중 동생)를 선택한다.
뒷 요소들 선택자 - $("요소 선택").nextAll("요소 선택").nextAll() 선택한 요소의 다음 요소를 모두 선택한다.
직접 선택자들은 매우 직관적이므로 설명을 생략하고 인접 관계 선택자들 중 주의해서 봐야할 것이 몇가지 있다.
부모 요소 선택자 - $("요소 선택").parent() 선택한 요소의 부모 요소를 선택한다.
상위 요소 선택자 - $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택한다.
하위 요소 선택자 - $("요소 선택 하위 요소") 선택한 요소에 지정한 하위 요소를 선택한다.
자식 요소와 하위 요소는 서로 다르다. 자식 요소는 바로 아래에 있는 요소를 의미하고 하위 요소는 자식 뿐만 아니라 손자 요소 그 너머까지 포함하는 요소이다.
12345678910111213141516171819202122232425<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"><head><title> new document </title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><script type="text/javascript" src="js/jquery-1.11.3.min.js"></script><script type="text/javascript">//<![CDATA[$(function() {$("#wrap li").css("border", "1px solid red");});//]]></script></head><body><h1>인접 관계 선택자</h1><ul id="wrap"><li>내용1<ul><li>내용2</li></ul></li></ul></body></html>cs 위 예제를 실행시켜보면 wrap 하위에 있는 모든 li 요소에 적용된 것을 확인할 수 있다.
자식 요소 선택자 - $("요소 선택 > 자식 요소") 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택한다.
위의 예제에서 10행에 있는 #wrap li를 #wrap > li로 바꿔보자. 자식 요소와 하위 요소의 차이에 대해 알 수 있을 것이다.
자식 요소들 선택자 - $("요소 선택").children() 선택한 요소의 모든 자식 요소를 선택한다.
앞 요소 선택자 - $("요소 선택").prev() 선택한 요소의 앞 요소(형제 요소 중 형)을 선택한다.
앞 요소들 선택자 - $("요소 선택").prevAll() 선택한 요소의 앞 요소 모두를 선택한다.
지정 앞 요소들 선택자 - $("요소 선택").prevUntil 선택한 요소부터 지정한 요소의 앞 요소까지 모두 선택한다.
뒷 요소 선택자 - $("요소 선택").next 또는 $("요소 선택+다음 요소") 선택한 요소의 다음 요소(형제 요소 중 동생)를 선택한다.
뒷 요소들 선택자 - $("요소 선택").nextAll("요소 선택").nextAll() 선택한 요소의 다음 요소를 모두 선택한다.
'Legacy > Web' 카테고리의 다른 글
a 태그 target (0) 2016.07.16 [Web] 페이지 이동 방법 (0) 2015.11.26 [Web] 웹 서버와 웹 어플리케이션 (0) 2015.08.26 [jQuery] 제이쿼리란 (1) 2015.07.14 [JavaScript] 이벤트 (0) 2015.07.14 [JavaScript] JavaScript Event Handler (0) 2015.07.13 [JavaScript] DOM(Document Object Model) (0) 2015.07.13 [JavaScript] BOM(Browser Object Model) (2) 2015.07.13 [JavaScript] 자바스크립트의 객체 (0) 2015.07.12 [JavaScript] 조건식에 논리형(Boolean)이 아닌 다른 형이 오는 경우 (0) 2015.07.11