이 selector는 찾고자 하는 속성 값의 단어와 비교를 합니다. 여기서 단어는 공백으로 구분 된 문자열로 정의됩니다.
임의의 단어와 정확히 일치하면 되는 것이지요.
우선 예제를 보시죠.
예제)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>attributeContainsWord demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <input name="man-news"> <input name="milk man"> <input name="letterman2"> <input name="newmilk"> <script> $( "input[name~='man']" ).val( "헤이 맨~!" ); </script> </body> </html>
설명)
4개의 input 박스에 각각의 이름이 지정되어 있는데, 2번째 이름이 "milk man"이라고 되어 있습니다. milk와 man사이에 공백이 있지요.
$( "input[name~='man']" )는 input 태그 요소들 중에 name 문자열 안에 공백으로 구분 되었을 때 정확히 일치하는 요소를 찾게 되는 것입니다.
자! 그럼 첫 번째 input 박스의 name을 "man -news"로 바꾸고, 네 번째 input 박스의 name을 "man"으로 바꾸면 어떻게 될까요?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>attributeContainsWord demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <input name="man -news"> <input name="milk man"> <input name="letterman2"> <input name="man"> <script> $( "input[name~='man']" ).val( "mr. man is in it!" ); </script> </body> </html>
실행결과)
"man"과 "-news"사이에 공백이 생겼기에 앞에 "man"이 select 된 것이고
네번째는 순수하게 man이라는 단어를 갖고 있기에 추출이 된 것입니다.
어찌보면 "~="은 문자열을 " " (공백)으로 split()한 후에 나뉘어진 배열들 중에 해당 단어가 존재하는 여부를 체크하는 원리라고 보시면 될 것 같습니다.
이상입니다!
'development > script' 카테고리의 다른 글
| StringUtils.isBlank () 및 String.isEmpty () (0) | 2020.05.24 |
|---|---|
| 파이썬에서 터미널 지우기 (0) | 2020.05.24 |
| jQuery 셀렉터 :animated (0) | 2018.03.09 |
| jQuery 셀렉터 :checkbox (0) | 2018.03.09 |
| jQuery 셀렉터 :button (0) | 2018.03.09 |