[jQuery] 고급 속성(Attribute) 선택자

// 속성(Attribute) 선택자
$("a[id]")                           // a요소중 id속성을 가지고 있는 요소 선택 (Has Selector)  
$('div[id="test1"]');              // id
$("div[id$='foo']")                // div 요소중 id가 'foo' 문자열로 끝나는 요소 
// $("[id$='foo']")
$('div[class="test2"]');         // class       
$('.test[data-foo="test3"]');   // data 
$('input[name="test4"]');       // name
$("select > option[value='test5']");          // value 값으로 select option 선택
$("select > option:contains('테스트5')");   // 텍스트 값으로 select option 선택
$('img[src^="hi"]');            // img요소중 src속성이 hi(문자)로 시작하는 요소 선택
$('a[href$=".jpg"]');           // a 요소중 href 속성이 '.jpg'(문자)로 끝나는 요소 선택
$('div[class*="good"]');     // div 요소중 class이름이 good(문자)을 띄워쓰기 구분없이 포함하는 요소 선택 (아래 예제참고)
$("a[class!='word']") ;       // a 요소중 class가 'word'가 아닌 요소 선택
$( "input[id='test'][name$='man']" );  // input요소중 id가 test이고 name이 man인 요소선택 (멀티속성선택)

[name|=”value”] 

<a href="#" class="test">link01</a>
<a href="#" class="test-01">link02</a>
<a href="#" class="tester">link03</a>

$("a[class|='test']").css( "color", "red" ); 
// (태그의 속성 값에 하이픈(-)이 포함되어 있는 요소만 적용된다.) : a요소중 class가 'test' 또는  (-)하이픈을 기준으로 앞에 값이 'test'인 요소선택 

link01
link02
link03

[name~=”value”]

<a href="#" data-word="spacing word">link01</a>
<a href="#" data-word="word spacing">link02</a>
<a href="#" data-word="spacingword">link03</a>

$("a[data-word~='word']").css( "color", "red" );  //a요소중 data-word 속성 값이 "word" 단어를 정확히(띄워쓰기(독립적))으로 포함하고 있는 요소

// $('div[class*="good"]')는 " "사이에 good라는 단어만 포함하고 있으면 선택된다.   ex) <div class="aagoodff"></div>

link01
link02
link03