이전 글/JQuery
3. jQuery 선택자 - * / #/ . / [] / element
usnooy_
2018. 1. 23. 22:22
기존에 사용하였던 자바스크립트에서는
getElementsByTagName
getElementsByClassName
getElementById 등...
우리가 선언한 요소들을 가져오기에는 너무나도 번거로웠다.
jQuery가 사랑받는 이유는, 번잡한 자바스크립트 소스를
절반 이상 줄일 수 있기 때문이다.
1. *
다른 언어에서도 *은 대부분 전체,모두를 뜻한다.
대표적으로는 DBMS 언어들이 그렇다.
역시 동일하다
1 | $("*").css("border","solid 1px red"); | cs |
document의 모든 요소를 선택자로 사용한다.
모든 요소에 border:solid 1px red; 을 선언하는 것과 같다.
2. #(아이디)
자바스크립트에서의 getElementById와 동일하다.
1 | $("#jquery").css("background","red"); | cs |
id가 jquery인 요소를 찾아와 css 속성중 background 속성을 red색으로 지정하는 것이다.
3. . (클래스)
자바스크립트에서의 getElementsByClassName과 동일하다.
1 | $(".tou"); | cs |
클래스명이 tou인 요소를 찾아오는 것을 뜻한다.
4. [] (속성)
자바스크립트에서의 document.querySelectorAll와 동일하다.
1 2 | $('[value]'); // value라는 속성을 가진 태그 $('[value="tou"]'); | cs |
태그의 속성이 value = 'tou'인 것을 가져온다.
5. element(요소)
1 | $("button").click(); |
요소가 button인 것을 가져온다.