[jQuery] Selector 정리 - Attribute 속성 선택자

 

[jQuery] Selector 정리 - Attribute 속성 선택자

[출처] [jQuery] Selector 정리 - Attribute 속성 선택자|작성자 코딩하는CEO

 

출처 : http://b_feather.blog.me/50148872245

 

HTML 태그는 type, id, name과 같은 속성을 지니며, html5 부터는 data- 으로 시작되는 커스텀 속성도 표준의 일환으로 지원을 합니다.

CSS를 이용하여 스타일과 마크업을 분리한다는 개념이 모호했던 시기에는 width이나 height과 같은 속성을 이용하여 태그가 나타내는 요소(Element)의 모양새를 설정하기도 했지만, 지금은 레퍼런스를 찾아보면 이러한 속성들이 마크업 표준으로써 지원되지 않거나 이들을 사용하지 않는 것을 권장한다는 점을 알 수 있습니다.

다음 예시에 나타나 있듯이 html 태그의 속성은 attribute="value"의 형태로 표현되며, xhtml 표준이라 그런지 모르겠지만, 보통 속성의 이름은 모두 소문자로 구성됩니다.

<input type="text" id="txtField" name="txtField" data-user="me" />

CSS와 마찬가지로 jquery 또한 이러한 속성값을 기준으로 요소들을 선택할 수 있습니다. 이러한 속성 선택자는 <input> 요소들 중 type이 "text"인 요소들만 선택한다거나, 라디오버튼들 중 같은 name 속성값을 가진 요소들만 선택을 한다는 식으로 활용할 수 있습니다.

//html

<form id="example" name="example">

<input type="text" id="userName" name="userName" />

<input type="radio" id="radio1" name="chooseOne" value="dog" />

<input type="radio" id="radio2" name="chooseOne" value="cat" />

</form>

//jquery 예제

$('input[type="text"]'); //type 속성이 "text"인 input 엘리먼트 선택

$('input[name="chooseOne"]'); //name 속성이 "chooseOne"인 input 엘리먼트 선택

위 예제를 보면 알 수 있듯이 jquery 속성 선택자는 []안에 속성 이름과 값을 넣는 형식으로 구성됩니다. 아래에 속성 선택자 사용예를 정리해놨으니 참고하시기 바랍니다.

속성값이 선택자값과 일치 [name="value"]

$('span[data-type="title"]');

//data-type 속성을 지니며 그 값이 "title"인 모든 span 엘리먼트 선택

속성값이 선택자값과 불일치 [name!="value"]

$('input[checked!="checked"]');

//checked 속성의 값이 "checked"가 아닌 모든 input 엘리먼트 선택

속성값이 선택자값으로 시작됨 [name^="value"]

$('p[id^="body"]');

//id 속성값이 "body"로 시작되는 모든 p 엘리먼트 선택

//예: id="bodyParagraph", id="bodySection"

속성값이 선택자값으로 끝남 [name$="value"]

$('div[id$="Section"]');

//id 속성값이 "Section"으로 끝나는 모든 div 엘리먼트 선택

//예: id="headerSection", id="bannerSection"

속성값이 선택자값으로 시작되며

뒤에 "-"으로 연결된 값이 따름 [name|="value"]

$('span[name|="tag"]');

//name 속성값이 "tag"와 일치하거나 "tag-"으로 시작되는 모든 span 엘리먼트 선택

//예: name="tag", name="tag-pets", name="tag-fashion"

속성값이 선택자값을 포함하고 있음 [name*="value"]

$('a[href*="article"]');

//href 속성값에 "article"이 포함된 모든 a 엘리먼트 선택

//예: href="/articles/september", href="/entries/article"

속성값 중에 선택자값과 일치하는 단어가 있음 [name~="value"]

$('div[class~="buttonStyle"]');

//class 속성값에 "buttonStyle"이 단어로 들어간 모든 div 엘리먼트 선택

//예: class="skinColor buttonStyle topDiv"

속성중에 선택자와 이름이 같은 것이 있음 [name]

$('div[data-pane]');

//data-pane이라는 속성을 지닌 모든 div 엘리먼트 선택

복수의 속성으로 선택 [name1="value"][name2="value"]

$('input[type="hidden"][data-value="userValue"]');

//type 속성값이 "hidden"이고,

//data-value 속성값이 "userValue"인 모든 input 엘리먼트 선택

[출처] [jQuery] Selector 정리 - Attribute 속성 선택자|작성자 코딩하는CEO

예제 : )

$('#reward_bt[p]').live('click',function(){
   //서버 선택 value 체크
   no =$(this).attr("p");  }

 <img src="/img/news/<?php echo $btImg?>" width="107" height="56" alt="보상받기" id="reward_bt" style="cursor:hand;cursor:pointer;" p="<?php echo $level[$i]?>" />

이런식으로 배열돌려서 처리하는 방법으로 응용할 수 있다