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> 元素	在线实例