jQuery (제이쿼리) - jQuery Selector (제이쿼리 선택자/셀렉터)

개발/jQuery

루 프란체 2018. 5. 27. 18:07

jQuery(이하 제이쿼리) 의 Selector(이하 셀렉터) 는 기본적으로 $ 을 붙여 사용한다.

jQuery Selector : $( )

$ 대신 jQuery 를 붙여 jQuery( ) 의 형태로도 사용이 가능하지만 보통은 $ 를 사용한다.

~~(예전에 있던 프로젝트 부장이 공통모듈 만든다고 $ 를 사용한 소스를 만들었다가 낭패였던 기억이...)~~

위에도 써놨듯 셀렉터는 $( ) 의 기본 형태를 갖는데 의미 없이 이렇게 만들어 진 것이 아니라

이 형태 자체가 하나의 함수라고 볼 수 있으며 자바스크립트와 비교하자면 $ 는 함수명이고

괄호 안에 파라미터를 적어 넘김으로써 하나의 함수가 실행된다고 볼 수 있다.

예를 들어 $('div') 라는 구문을 사용했다면 $ 라는 함수에 div 라는 파라미터를 넘긴 것과 동일한 것이다.

제이쿼리의 셀렉터는 CSS 와 xPath Selector 를 기반으로 만들어졌으므로 CSS 와 xPath 를 사용했었다면 쉽게 접근할 수 있고,

CSS 와 xPath 를 사용해보지 않았다고 하더라도 웹개발을 경험한 사람이라면 봤던거다! 라고 생각 할 수 있을 정도의 구문이므로

누구나 어렵지 않게 접근할 수 있다.

가장 많이 사용하는 대표적인 제이쿼리 셀렉터에는 다음과 같은 것들이 있다.

1. ID 값을 이용한 셀렉터 (#)



var text = document.getElementById("text");

위의 코드는 아래와 같은 코드로 변경이 가능하다.

주의할 점은 실수 혹은 일부러 중복되는 ID 값이 존재하게 코딩했을 경우 첫번째 element 만을 바라보게 된다.



var text = $("#text");

2. Tag Name 값을 이용한 셀렉터




var text = document.getElementsByTagName("input");

위의 코드는 아래와 같은 코드로 변경이 가능하다.




var text = $("input");

3. CLASS 값을 이용한 셀렉터 (.)




var text = document.getElementsByClassName("txt");

위의 코드는 아래와 같은 코드로 변경이 가능하다.




var text = $(".txt");

4. NAME 값을 이용한 셀렉터




var text = document.getElementsByName("text");

위의 코드는 아래와 같은 코드로 변경이 가능하다.

NAME 값을 이용한 셀렉터의 경우 보통 Tag Name 과 같이 사용하는 것이 일반적이다.




var text = $("input[name=text");
var text = $("[name=text");

이 외에도 셀렉터에 사용할 수 있는 굉장히 다양한 구문이 있는데 그것까지 정리하기엔 귀찮으니

이미 친절하게 정리해두신 분의 블로그 링크로 대신한다.

그리고 제타위키에도 아주 상세하게 설명이 되어 있다.