jQuery 基础

104 阅读 0 评论 69 点赞

我是靠谱客的博主幸福航空，这篇文章主要介绍jQuery 基础，现在分享给大家，希望可以做个参考。

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

实例

复制代码$("button").click(function(){ alert($("#w3s").attr("href")); });
1
$("button").click(function(){ alert($("#w3s").attr("href")); });

jQuery 选择器

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中：

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

复制代码$("p").css("background-color","red");
1
$("p").css("background-color","red");

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

基本过滤器
:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 从 0 开始计数，匹配所有索引值为偶数的元素
:odd 从 0 开始计数匹配所有索引值为奇数的元素
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素
案例

复制代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        table {
            border: 1px solid red;
            border-collapse: collapse;
        }
        
        th,
        tr,
        td {
            border: 1px solid red;
            width: 100px;
            height: 30px;
            text-align: center;
        }
        
        .hover {
            background-color: rgba(255, 0, 0, 0.534);
        }
    </style>
</head>
 
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="all"></th>
                <th>名称</th>
                <th>课程</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>jquery</td>
                <td>Html</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>jquery</td>
                <td>Html</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>jquery</td>
                <td>Html</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>jquery</td>
                <td>Html</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>jquery</td>
                <td>Html</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="隔行变色" id="btn1">
    <input type="button" value="改变eq" id="btn2">
    <input type="button" value="改变第一行" id="btn3">
    <input type="button" value="改变最后一行" id="btn4">
    <input type="button" value="大于" id="btn6">
    <input type="button" value="小于" id="btn7">
    <input type="button" value="除了" id="btn8">
    <input type="button" value="改变范围" id="btn5">
</body>
<script>
    $(function() {
            //全选
            $("#all").click(function() {
                //获取全选的状态
                var isChecked = $("#all").prop("checked")
                    // console.log(isChecked)
                    //获取下面的checked
                $("tbody input[type='checkbox']").prop("checked", isChecked)
            })
        })
        // 选下面的全选选中
    $("tbody input[type='checkbox']").click(function() {
            //获取总个数
            var zong = $("tbody input[type='checkbox']").length
                // console.log(zong)
                //获取被选中的个数
            var con = $("tbody input[type='checkbox']:checked").length
                // console.log(con)
                //判断
            if (zong == con) {
                $("#all").prop("checked", true)
            } else {
                $("#all").prop("checked", false)
            }
        })
        //实现hover效果
    $("tbody tr").mouseover(function() {
        $(this).attr("class", "hover")
    })
    $("tbody tr").mouseout(function() {
            $(this).removeAttr("class", "hover")
        })
        //实现隔行变色
    $("#btn1").click(function() {
            $("tbody tr:odd").css("background-color", "green")
        })
        //eq()：索引选中
    $("#btn2").click(function() {
            $("tbody tr:eq(2)").css("background-color", "red")
        })
        // first：第一个
    $("#btn3").click(function() {
            $("tbody tr:first").css("background-color", "orange")
        })
        // last：最后一个
    $("#btn4").click(function() {
            $("tbody tr:last").css("background-color", "blue")
        })
        // 一个范围，大于一除去最后一个
    $("#btn5").click(function() {
            $("tbody tr:gt(1):not(:last)").css("background-color", "blue")
        })
        // 大于一个值
    $("#btn6").click(function() {
            $("tbody tr:gt(1)").css("background-color", "blue")
        })
        // 小于一个值
    $("#btn7").click(function() {
            $("tbody tr:lt(1)").css("background-color", "blue")
        })
        // not：除了....
    $("#btn8").click(function() {
        $("tbody tr:not(:eq(2))").css("background-color", "blue")
    })
</script>
 
</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        table {
            border: 1px solid red;
            border-collapse: collapse;
        }
        
        th,
        tr,
        td {
            border: 1px solid red;
            width: 100px;
            height: 30px;
            text-align: center;
        }
        
        .hover {
            background-color: rgba(255, 0, 0, 0.534);
        }
    </style>
</head>
 
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="all"></th>
                <th>名称</th>
                <th>课程</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>jquery</td>
                <td>Html</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>jquery</td>
                <td>Html</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>jquery</td>
                <td>Html</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>jquery</td>
                <td>Html</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>jquery</td>
                <td>Html</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="隔行变色" id="btn1">
    <input type="button" value="改变eq" id="btn2">
    <input type="button" value="改变第一行" id="btn3">
    <input type="button" value="改变最后一行" id="btn4">
    <input type="button" value="大于" id="btn6">
    <input type="button" value="小于" id="btn7">
    <input type="button" value="除了" id="btn8">
    <input type="button" value="改变范围" id="btn5">
</body>
<script>
    $(function() {
            //全选
            $("#all").click(function() {
                //获取全选的状态
                var isChecked = $("#all").prop("checked")
                    // console.log(isChecked)
                    //获取下面的checked
                $("tbody input[type='checkbox']").prop("checked", isChecked)
            })
        })
        // 选下面的全选选中
    $("tbody input[type='checkbox']").click(function() {
            //获取总个数
            var zong = $("tbody input[type='checkbox']").length
                // console.log(zong)
                //获取被选中的个数
            var con = $("tbody input[type='checkbox']:checked").length
                // console.log(con)
                //判断
            if (zong == con) {
                $("#all").prop("checked", true)
            } else {
                $("#all").prop("checked", false)
            }
        })
        //实现hover效果
    $("tbody tr").mouseover(function() {
        $(this).attr("class", "hover")
    })
    $("tbody tr").mouseout(function() {
            $(this).removeAttr("class", "hover")
        })
        //实现隔行变色
    $("#btn1").click(function() {
            $("tbody tr:odd").css("background-color", "green")
        })
        //eq()：索引选中
    $("#btn2").click(function() {
            $("tbody tr:eq(2)").css("background-color", "red")
        })
        // first：第一个
    $("#btn3").click(function() {
            $("tbody tr:first").css("background-color", "orange")
        })
        // last：最后一个
    $("#btn4").click(function() {
            $("tbody tr:last").css("background-color", "blue")
        })
        // 一个范围，大于一除去最后一个
    $("#btn5").click(function() {
            $("tbody tr:gt(1):not(:last)").css("background-color", "blue")
        })
        // 大于一个值
    $("#btn6").click(function() {
            $("tbody tr:gt(1)").css("background-color", "blue")
        })
        // 小于一个值
    $("#btn7").click(function() {
            $("tbody tr:lt(1)").css("background-color", "blue")
        })
        // not：除了....
    $("#btn8").click(function() {
        $("tbody tr:not(:eq(2))").css("background-color", "blue")
    })
</script>
 
</html>