반응형
[jQuery] 후손 선택자
① find()를 사용한 경우
descendant_selector-1.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery 선택자</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { // 후손선택자 => find() jQuery("ul").find("li").css("color","#000080"); }); </script> </head> <body> <h1>jQuery 선택자</h1> <hr/> <ul> <h2>웹프로그래밍</h2> <li>Java 과정</li> <ol> <li>기본 문법</li> <li class="important">OOP 개념</li> <li>API 활용</li> </ol> <li class="important">JSP 과정</li> <ol> <li>스크립팅 요소</li> <li>지시어</li> <li class="important">액션태그</li> </ol> </ul> </body> </html> |
| 출력결과 |
② find()를 사용하지 않은 경우
| descendant_selector-2.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery 선택자</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("ul li").css("color","#9400d3"); }); </script> </head> <body> <h1>jQuery 선택자</h1> <hr/> <ul> <h2>웹프로그래밍</h2> <li>Java 과정</li> <ol> <li>기본 문법</li> <li class="important">OOP 개념</li> <li>API 활용</li> </ol> <li class="important">JSP 과정</li> <ol> <li>스크립팅 요소</li> <li>지시어</li> <li class="important">액션태그</li> </ol> </ul> </body> </html> |
| 출력결과 |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] 필터 선택자 (0) | 2015.11.16 |
|---|---|
| [jQuery] 자식 선택자 (0) | 2015.11.16 |
| [jQuery] 기본 선택자 (0) | 2015.11.16 |
| [jQuery] jQuery 사용 (0) | 2015.11.16 |
| [jQuery] .each() loop 에서 빠져 나오기 (0) | 2015.09.18 |
