jQuery traversal - filtering

Range of search elements

The three most basic filtering methods are: first(), last() and eq(), which allow you to select a specific element based on its position within a set of elements. Elements.

Other filtering methods, such as filter() and not() allow you to select elements that match or do not match a specified criterion.

first() method

first() method returns the first element of the selected element.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div p").first().css("background-color","blue");
});
</script>
</head>
<body>
    <div>
        <p>段落1</p>
    </div>
    <div>
        <p>段落2</p>
    </div>
    <p>段落3</p>
</body>
</html>

Select the first <p> element inside the first <div> element.

last() method

last() method returns the last element of the selected elements.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").last().css("background-color","red");
});
</script>
</head>
<body>
    <div>
        <p>段落1</p>
    </div>
    <div>
        <p>段落2</p>
    </div>
    <p>段落3</p>
</body>
</html>

Selects the last <p> element within the last <div> element.

eq() method

eq() method returns the element with the specified index number among the selected elements.

The index number starts from 0, so the index number of the first element is 0 instead of 1.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").eq(1).css("background-color","green");
});
</script>
</head>
<body>
    <p>php中文网 (index 0).</p>
    <p>http://www.php.cn (index 1)。</p>
    <p>google (index 2).</p>
    <p>http://www.google.com (index 3)。</p>
</body>
</html>

Selects the second <p> element (index 1).

filter() method

The filter() method allows you to specify a criterion. Elements that do not match this criterion are removed from the collection, and matching elements are returned.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("p").filter(".url").css("background-color","yellow");
});
</script>
</head>
<body>
    <p>php中文网 (index 0).</p>
    <p class="url">http://www.php.cn (index 1)。</p>
    <p>google (index 2).</p>
    <p class="url">http://www.google.com (index 3)。</p>
</body>
</html>

Returns all <p> elements with class name "url".

not() method

not() method returns all elements that do not match the criteria.

Tip: The not() method is the opposite of filter().

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("p").not(".url").css("background-color","gray");
});
</script>
</head>
<body>
    <p>php中文网 (index 0).</p>
    <p class="url">http://www.php.cn (index 1)。</p>
    <p>google (index 2).</p>
    <p class="url">http://www.google.com (index 3)。</p>
</body>
</html>

Returns all <p> elements without the class name "url".

Continuing Learning

new file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
         $("li").eq(-1).css({"color":"red","border":"2px solid blue"})
        })
    </script>
</head>
<body>
 <div>
     <ul>
        <li>HTML专区</li>
        <li>Javascript专区</li>
        <li>Div+Css专区</li>
        <li>Jquery专区</li>
     </ul>
     <p> eq 是负数的时候，从最后一个元素往回计数。</p>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX