wiki:javascript:jquery:jquery_note:jquery:first_selector
jQuery :first Selector
- description : jQuery :first Selector
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-06-02
The source of this article
Example
첫 번째 <p> 요소를 선택합니다.
<body> <p>This is the first paragraph.</p> <!-- 이 p 요소만 변경됨. --> <p>This is the second paragraph.</p> <p>This is the third paragraph.</p> <script> $(document).ready(function () { $("p:first").css("background-color", "yellow"); }); </script> </body>
Definition and Usage
:first 선택자는 첫 번째 요소를 선택합니다.
Note: 이 선택자는 단일 요소만 선택할 수 있습니다.
:first-child 선택자를 사용하여 둘 이상의 요소를 선택합니다 (각 부모요소에 대해 하나씩).
이것은 주로 다른 선택자와 함께 그룹의 첫 번째 요소를 선택하는 데 사용됩니다 (위의 예제에서와 같이).
Tip: 그룹의 마지막 요소를 선택하려면, :last8 선택자를 사용하십시오.
Syntax
$(":first")
Example
:first와 :first-child의 차이
:first와 :first-child 선택자 사이의 차이점을 보여줍니다.
<body> <button id="btn1">:first</button> <button id="btn2">:first-child</button> <div style="border:1px solid blue"> <p>The first paragraph in div</p> <!-- first & first-child --> <p>The second paragraph in div</p> <p>The last paragraph in div</p> </div><br> <div style="border:1px solid crimson"> <p>The first paragraph in another div</p> <!-- first-child --> <p>The second paragraph in another div</p> <p>The third paragraph in another div</p> <p>The last paragraph in another div</p> </div> <script> $(document).ready(function () { $("#btn1").click(function () { $("p:first").css("background-color", "red"); }); $("#btn2").click(function () { $("p:first-child").css("background-color", "yellow"); }); }); </script> </body>
/volume1/web/dokuwiki/data/pages/wiki/javascript/jquery/jquery_note/jquery/first_selector.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
