권형&오형의 일상
[권형] 05. 선택자 본문
jQuery의 코드는 선택자와 메서드의 조합으로 구성되는 경우가 많다.
선택자는 HTML의 태그를 쉽게 선택해서 jQuery를 통해 기능을 구현할 수 있도록 만들어준다.
$("선택자")
$("선택자").메서드(매개변수, 함수 등)
1 2 | $("span").hide(); //모든 span태그 선택 후 숨기는 기능을 수행하는 메서드 실행 | cs |
기본 선택자
전통적인 자바스크립트에서 사용되었던 아이디 선택, 이름 선택과 같으나 더 확장된 형태를 지원한다.
| .p1{ color : red; } | $ ( ".p1") .css ('color','red' ); |
CSS | jQuery |
종류 | 형태 |
전체 선택자 | * |
태그 선택자 | 태그 |
아이디 선택자 | #아이디 |
클래스 선택자 | .클래스 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE HTML> <html> <head> <title></title> <meta charset=""> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <h1 class="h1">title</h1> <p id="p1">some...</p> </body> </html> |
1 2 3 | $(function(){ $(*).css('color','red'); }); //전체 선택자 |
1 2 3 | $(function(){ $("p").css('color','#00ff00'); }); // 태그 선택자 |
1 2 3 | $(function(){ $("#p1").css('#p1','rgb(255.255.0)'); }); //아이디 선택자 |
1 2 3 | $(function(){ $(".h1").css('text-decoration','underline'); }); //클래스 선택자 |
'개발 > Jquery' 카테고리의 다른 글
| [권형] 07. 여러 개 선택된 태그 관리 (메서드 활용) (5) | 2017.09.26 |
|---|---|
| [권형] 06. 고급 선택자 (1) | 2017.09.26 |
| [권형] 04. jQuery 키워드 치환 (0) | 2017.09.26 |
| [권형] 03. jQuery 시작 코드 (0) | 2017.09.26 |
| [권형] 02. jQuery의 코드 형태 (0) | 2017.09.26 |
| [권형] 01. jQuery 정의(참고) (0) | 2017.09.26 |
Comments