1 ) 탐색 선택자
1)위치 탐색 선택자
(1) first / last 선택자
<script>
$(function() {$("#index li:first").css("color","red").css("border","1px solid #0000ff")});
$(function() {$("#index li:last").css("color","yellow").css("border","1px solid #0000ff")});
</script>
(2) even /odd 선택자
<script>
$(function() {$("#index li:even").css("color","red").css("border","1px solid #0000ff")});
$(function() {$("#index li:odd").css("color","yellow").css("border","1px solid #0000ff")});
</script>
<script>
$(function() {$("#index li").eq(2).css("color","red").css("border","1px solid #0000ff")});
$(function() {$("#index li:lt(2)").css("color","yellow").css("border","1px solid #0000ff")});
$(function() {$("#index li:gt(2)").css("color","blue").css("border","1px solid #0000ff")});
</script>
(3) eq(index) /it(index)/gt(index) 탐색 선택자
(4) first-of-type / last-of-type 선택자
<script>
$(function() {$("li:first-of-type").css("color","red").css("border","1px solid #0000ff")});
$(function() {$("li:last-of-type").css("color","yellow").css("border","1px solid #0000ff")});
</script>
<body>
<h3 id="title">JQuery의 이해</h3>
<ol id="index">
<li id="title1">선택자1</li>
<li id="title2">선택자2</li>
<li id="title3">전체선택자</li>
<li id="title4">아이디 선택자</li>
<li class="title5">클래스 선택자</li>
</ol>
<ul id="index">
<li id="title1">선택자1</li>
<li id="title2">선택자2</li>
<li id="title3">전체선택자</li>
<li id="title4">아이디 선택자</li>
<li class="title5">클래스 선택자</li>
</ul>
</body>
(5) nth-child(n)/nth-last-type(n) 선택자
(6) only-child/slice(index) 선택자
<script>
$(function() {$("#index li").slice(1,4).css("color","red").css("border","1px solid #0000ff")});
$(function() {$("li:only-child").css("color","yellow").css("border","1px solid #0000ff")});
</script>
<body>
<h3 id="title">JQuery의 이해</h3>
<ol id="index">
<li id="title1">선택자1</li>
<li id="title2">선택자2</li>
<li id="title3">전체선택자</li>
<li id="title4">아이디 선택자</li>
<li class="title5">클래스 선택자</li>
</ol>
<ul id="index1">
<li id="title6">선택자1</li>
</ul>
</body>
'Coding > JQuery' 카테고리의 다른 글
| [bootstrap] table 효과 적용해보기 (0) | 2022.06.17 |
|---|---|
| 탐색 선택자2 (0) | 2022.06.10 |
