jQuery 및 (필터링) 선택기

And (필터) 선택기


:first

Usage:$("tr:first");단일 요소 모음

경기 첫 번째로 발견된 요소


:last

찾은 마지막 요소와 일치


:아니요( 선택기)

지정된 선택기와 일치하는 모든 요소를 ​​제거


:even

모든 인덱스 값을 짝수 요소로 일치시킵니다. 0


:odd

0

부터 계산하여 홀수 인덱스 값을 가진 모든 요소와 일치합니다.


:eq(색인)

0

:gt(index)

0

:gt(index)


은 0
부터 계산하여 지정된 인덱스 값 요소보다 큰 모든 요소와 일치합니다.

:lt(index)


은 0


🎜:header🎜부터 계산하여 지정된 인덱스 값보다 작은 모든 요소와 일치합니다. 🎜🎜🎜🎜🎜경기 h1, h2, h3🎜🎜🎜
<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script >
        function f1(){
            //$("li").css('background-color','blue');
            //① :first  找到第一个
            //li元素同时,还需要是第一个
            $("li:first").css('background-color','blue');

            //② :last  找到最后一个
            $("li:last").css('background-color','green');

            //③ :eq(下标)  下标从0计算, equal()
            $("li:eq(4)").css('background-color','pink');

            //④ :gt(索引值)  下标大于条件索引值, great than
            $("li:gt(4)").css('color','red');

            //⑤ :lt(索引值)  下标小于条件索引值, less than
            $("li:lt(3)").css('color','orange');

            //⑥ :even  下标索引值等于偶数的
            $("li:even").css('background-color','gray');
            //⑦ :odd  下标索引值等于奇数的
            $("li:odd").css('color','red');

            //⑧ :not(选择器)  去除与“选择器”匹配的元素
            $("li:not(#zhao,#zhang)").css('color','red');

            //⑨ :header  获得h1/h2/h3...的标题元素
            $(":header").css('color','blue');
        }
        </script>
    </head>
    <body>
        <h1>php.cn</h1>
        <h2>php.cn</h2>
        <h3>php.cn</h3>
        <h4>php.cn</h4>
        <ul>
            <li>北京</li>
            <li id="zhang">上海</li>
            <li>广州</li>
            <li id="zhao">深圳</li>

            <li>杭州</li>
            <li>武汉</li>
            <li>南京</li>
            <li>天津</li>
        </ul>

        <input type="button" value="触发" onclick="f1()" />
    </body>
</html>
와 같은 헤더 요소
지속적인 학습
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script >
function f1(){
//$("li").css('background-color','blue');
//① :first
//li
$("li:first").css('background-color','blue');
//② :last
$("li:last").css('background-color','green');
//③ :eq() 0, equal()
$("li:eq(4)").css('background-color','pink');
//④ :gt() , great than
$("li:gt(4)").css('color','red');
//⑤ :lt() , less than
$("li:lt(3)").css('color','orange');
//⑥ :even
$("li:even").css('background-color','gray');
//⑦ :odd
$("li:odd").css('color','red');
//⑧ :not()
$("li:not(#zhao,#zhang)").css('color','red');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
图片放大关闭