๐ŸŽณjQuery

jQuery Selector ์ •๊ทœ์‹

harry.93 2021. 2. 6. 15:47
๋ฐ˜์‘ํ˜•

1. Attribute Contains Prefix Selector [name|="value"]

value ๋ฌธ์ž์™€ ์ผ์น˜ํ•˜๋˜ ์—ฐ์†๋œ ๊ธ€๋กœ ์—ฐ๊ฒฐ๋˜์ง€ ์•Š์€ ๋ฌธ์ž๋ฅผ ์ฐพ์„ ๋•Œ
$("input[name|="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // OK
<input type="text" name="chiptune-test" value="" /> // OK
<input type="text" name="chiptuneTest" value="" /> // NOT OK

 

2. Attribute Contains Selector [name*="value"]

value์— ํ•ด๋‹นํ•˜๋Š” ๋ฌธ์ž๊ฐ€ ์•ž,๋’ค,์ค‘๊ฐ„ ์ค‘ ์–ด๋””์— ์žˆ์–ด๋„ ์ƒ๊ด€์—†์ด ์ฐพ์„ ๋•Œ
$("input[name*="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // OK
<input type="text" name="chiptune-test" value="" /> // OK
<input type="text" name="chiptuneTest" value="" /> // OK
<input type="text" name="TestchiptuneTest" value="" /> // OK

 

3. Attribute Contains Word Selector [name~="value"]

value์— ํ•ด๋‹นํ•˜๋Š” ๋ฌธ์ž๊ฐ€ ๋’ค(๋)์— ์กด์žฌํ•˜๋Š” ๊ฒƒ์„ ์ฐพ์„ ๋•Œ (๊ณต๋ฐฑ ๋’ค์—)
$("input[name~="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // NOT OK
<input type="text" name="chiptune-test" value="" /> // NOT OK
<input type="text" name="Testchiptune" value="" /> // NOT OK
<input type="text" name="Test chiptune" value="" /> // OK

4. Attribute Ends With Selector [name$="value"]

value์— ํ•ด๋‹นํ•˜๋Š” ๋ฌธ์ž๊ฐ€ ๋’ค(๋)์— ์กด์žฌํ•˜๋Š” ๊ฒƒ์„ ์ฐพ์„ ๋•Œ
$("input[name$="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // NOT OK
<input type="text" name="chiptune-test" value="" /> // NOT OK
<input type="text" name="Test2chiptune" value="" /> // OK
<input type="text" name="Testchiptune" value="" /> // OK

5. Attribute Equals Selector [name="value"]

value์— ํ•ด๋‹นํ•˜๋Š” ๋ฌธ์ž ์ผ์น˜ํ•˜๋Š” ๊ฒƒ์„ ์ฐพ์„ ๋•Œ
$("input[name="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // OK
<input type="text" name="chiptune-test" value="" /> // NOT OK
<input type="text" name="Test2chiptune" value="" /> // NOT OK
<input type="text" name="Testchiptune" value="" /> // NOT OK

6. Attribute Not Equal Selector [name!="value"]

value์— ํ•ด๋‹นํ•˜๋Š” ๋ฌธ์ž ์ผ์น˜ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ์ฐพ์„ ๋•Œ
$("input[name!="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // NOT OK
<input type="text" name="chiptune-test" value="" /> // OK
<input type="text" name="Test2chiptune" value="" /> // OK
<input type="text" name="Testchiptune" value="" /> // OK

7. Attribute Starts With Selector [name^="value"]

value๋กœ ์‹œ์ž‘ํ•˜๋Š” ๋ฌธ์ž๋ฅผ ์ฐพ์„ ๋•Œ
$("input[name^="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // OK
<input type="text" name="chiptune-test" value="" /> // OK
<input type="text" name="Test2chiptune" value="" /> // NOT OK
<input type="text" name="Testchiptune" value="" /> // NOT OK

8. Multiple Attribute Selector [name="value"][name2="value2"]

์—ฌ๋Ÿฌ๊ฐœ๋ฅผ ๋™์‹œ์— ๊ฒ€์ƒ‰ํ• ๋•Œ
$("input[name="chiptune"][name="chiptune-test"]").val("123");

<input type="text" name="chiptune" value="" /> // OK
<input type="text" name="chiptune-test" value="" /> // OK
<input type="text" name="Test2chiptune" value="" /> // NOT OK
<input type="text" name="Testchiptune" value="" /> // NOT OK

 

728x90
๋ฐ˜์‘ํ˜•