[위치 기반 메서드]
first() : 선택 요소의 첫 번째 요소 찾기
last() : 선택 요소의 마지막 요소 찾기
eq() : 선택 요소의 특정 인덱스 요소 찾기[조건 기반 메서드]
filter() : 조건과 일치하는 요소 찾기
not() : 조건과 일치 않는 요소 찾기
first() : 선택 요소의 첫 번째 요소 찾기
last() : 선택 요소의 마지막 요소 찾기
eq() : 선택 요소의 특정 인덱스 요소 찾기
<style>
div {
color:#f70542;
padding:10px;
margin-bottom:10px;
border: 1px solid #f70542;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").first ().css({"background-color" : "#fff8f8", "border" : "5px solid #f70542"}); // 첫 번째
$("div").last ().css({"background-color" : "#dae3ec", "border" : "5px solid blue"}); // 마지막
$("div").eq (1 ).css({"background-color" : "#dae3ec", "border" : "5px solid green"}); // 두 번째
});
</script>
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
<div>
<p>HTML</p>
<p>홈페이지 기본 골격</p>
</div>
<div>
<p>CSS</p>
<p>홈페이지 골격 보조 및 디자인</p>
</div>
<div>
<p>JS</p>
<p>홈페이지 동적 기능 작동</p>
</div>
<div>
<p>PHP</p>
<p>홈페이지 웹서버측 언어</p>
</div>
결과 보기
filter("검색필터링" ) : 조건과 일치하는 요소 찾기
not("검색필터링" ) : 조건과 일치 않는 요소 찾기
<style>
div {
color:#f70542;
padding:10px;
margin-bottom:10px;
border: 1px solid #f70542;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").filter (".html" ).css({"border" : "5px solid #f70542"}); // 클래스가 html인 div만
$("div").not (".html" ).css({"border" : "5px solid blue"}); // 클래스가 html 아닌 div만
});
</script>
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
<div class="html">
<p>HTML</p>
<p>홈페이지 기본 골격</p>
</div>
<div class="css">
<p>CSS</p>
<p>홈페이지 골격 보조 및 디자인</p>
</div>
<div class="js">
<p>JS</p>
<p>홈페이지 동적 기능 작동</p>
</div>
<div class="php">
<p>PHP</p>
<p>홈페이지 웹서버측 언어</p>
</div>
결과 보기
