jQuery Selector ์ •๊ทœ์‹

    ๋ฐ˜์‘ํ˜•

    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
    ๋ฐ˜์‘ํ˜•

    '๐ŸŽณjQuery' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

    [jQuery] ์‹ค์‹œ๊ฐ„ ์š”์†Œ ๋ณ€๊ฒฝ ํƒ์ง€ํ•˜๊ธฐ  (0) 2021.05.01

    ๋Œ“๊ธ€