[Traversing] JQ - 검색필터링 메서드 - first() , last() , eq() , filter() , not() - 요소찾기 (=요소선택)

[위치 기반 메서드]

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>

결과 보기