jQuery使用与语法

jQuery安装

2.CDN在线加载：

statistic CDN：https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js

百度CND：https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

GoogleCND：https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>jQuery安装使用</title>
 8     <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
 9     <script src="jquery-3.6.3.min.js"></script>
10     <script>
11         $(document).ready(function(){
12             $("button").click(function(){
13                 $("p").hide();
14             })
15         })
16     </script>
17 </head>
18 <body>
19     <h1>这是一个标题</h1>
20     <p>这是一个段落</p>
21     <p>这是另一个段落</p>
22     <button>点我</button>
23 </body>
24 </html>

jQuery语法

jQuery语法是通过定位HTML元素，并对其进行操作

基础语法是：

$(selector).action()

美元符定义jQuery；
选择符(selector)查询、查找元素；
jQuery中的action()对元素进行操作；

$(this).hide()隐藏当前元素；

$("p").hide()隐藏所有p元素；

$("p.test").hide()隐藏所有class=test的所有p元素；

$("#test").hide()隐藏id=test的元素；

jQuery选择器

jQuery选择器基于元素的id、类、类型、属性、属性值等HTML元素。基于css选择器。

所有选择器都以$()开头。

元素选择器

$("p")

例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>jQuery安装使用</title>
 8     <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
 9     <script src="jquery-3.6.3.min.js"></script>
10     <script>
11         $(document).ready(function(){
12             $("button").click(function(){
13                 $("p").hide();
14             })
15         })
16     </script>
17 </head>
18 <body>
19     <h1>这是一个标题</h1>
20     <p>这是一个段落</p>
21     <p>这是另一个段落</p>
22     <button>点我</button>
23 </body>
24 </html>

id选择器

jQuery通过#id选择器通过HTML元素id属性来定位。

语法如下：

$("#test")

例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>jQuery id选择器</title>
 8     <script src="jquery-3.6.3.min.js"></script>
 9     <script>
10         $(document).ready(function(){
11             $("button").click(function(){
12                 $("#test").hide()
13             })
14         })
15     </script>
16 </head>
17 <body>
18     <h1>这是一个标题</h1>
19     <p id="test">这是第一个段落，id为test</p>
20     <p>这是另一个段落</p>
21     <button>点我</button>
22 </body>
23 </html>

css选择器

jQuery可以通过特定的css来置顶元素

语法：

$(".test")

更多实例

语法	描述	实例
$("*")	选取所有元素	在线实例
$(this)	选取当前 HTML 元素	在线实例
$("p.intro")	选取 class 为 intro 的 <p> 元素	在线实例
$("p:first")	选取第一个 <p> 元素	在线实例
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素	在线实例
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素	在线实例
$("[href]")	选取带有 href 属性的元素	在线实例
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素	在线实例
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素	在线实例
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素	在线实例
$("tr:even")	选取偶数位置的 <tr> 元素	在线实例
$("tr:odd")	选取奇数位置的 <tr> 元素	在线实例