投稿
  1. 簡單一點首頁
  2. 投稿

jquery寫ajax請求的五個步驟「jquery基礎教程」

投稿專員 • • 投稿

本篇文章成哥繼續帶大家來學習前端教程之jQuery，它將DOM的操作進行了封裝，可以大大降低我們前端開發時操作DOM的複雜度。下面我們就一起來學習內容吧！

01 jQuery簡介

jQuery 是開源軟件，使用 MIT 許可證授權。jQuery 的語法設計使得許多操作變得容易，如操作文檔對象（document）、選擇文檔對象模型（DOM）元素、創建動畫效果、處理事件、以及開發 Ajax 程序。jQuery核心理念是write less,do more（寫得更少,做得更多），他內部幫我們把幾乎所有功能都做了封裝。

02 jQuery使用

在使用jQuery時，需要提前下載並應用jQuery之後，才能在代碼中使用，也可以通過CDN引用來使用。下面我們到jQuery官方網站下載jQuery文件，然後在HTML頁面應用具體如下

程序員都必掌握的前端教程之jQuery基礎教程（上）
1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   
9.   <!-- 通過使用jquery文件來使用jquery -->  
10.   <script src="jQuery/jquery-3.5.1.js"></script>  
11.   
12.   <!-- 通過微軟cdn來使用jquery -->  
13.   <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>  
14. </body>  
15. </html>  

03 jQuery選擇器

我們先創建一個HTML頁面，然後在其內引用jquery，通過該HTML我們來演示各種jquery選擇器查詢的內容，其HTML頁面內容如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標籤</p>  
10.   <p><span>內嵌span的p標籤</span></p>  
11.   <p id="bar">帶id的p標籤 <span class="foo">內嵌class的span標籤</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標籤</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標籤在內嵌span標籤</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20. </body>  
21. </html>  

（1）HTML elements選擇器

HTML elements選擇器可以將HTML頁面的div、p、span、table等標籤通過在其上加引號進行篩選，具體如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標籤</p>  
10.   <p><span>內嵌span的p標籤</span></p>  
11.   <p id="bar">帶id的p標籤 <span class="foo">內嵌class的span標籤</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標籤</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標籤在內嵌span標籤</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // 元素選擇器，查詢html頁面中所有p標籤  
25.         var a = $("p");  
26.         // 我們將查詢到的內容打印出來  
27.         console.log(a)  
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  
程序員都必掌握的前端教程之jQuery基礎教程（上）

（2）class選擇器

class選擇器就是通過class名稱找到對應的標籤對象，具體示例如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標籤</p>  
10.   <p><span>內嵌span的p標籤</span></p>  
11.   <p id="bar">帶id的p標籤 <span class="foo">內嵌class的span標籤</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標籤</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標籤在內嵌span標籤</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // class選擇器語法格式是'.+class名稱'如下所示  
25.         var a = $(".foo");  
26.         // 我們將查詢class名稱為foo的所有標籤對象  
27.         console.log(a)  
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  
程序員都必掌握的前端教程之jQuery基礎教程（上）

（3）id選擇器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標籤</p>  
10.   <p><span>內嵌span的p標籤</span></p>  
11.   <p id="bar">帶id的p標籤 <span class="foo">內嵌class的span標籤</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標籤</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標籤在內嵌span標籤</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // id選擇器語法格式是'#+class名稱'如下所示  
25.         var bar = $("#bar");  
26.         // 將查詢到id名稱為bar的所有標籤進行打印  
27.         console.log(bar)  
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  
程序員都必掌握的前端教程之jQuery基礎教程（上）

（4）組合選擇器

jquery允許在指定選擇標籤元素同時，指定其class名稱或者id來進行篩選，這種篩選方式稱其為組合選擇器，具體示例如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標籤</p>  
10.   <p><span id="boo">內嵌span的p標籤</span></p>  
11.   <p id="bar">帶id的p標籤 <span class="foo">內嵌class的span標籤</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標籤</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標籤在內嵌span標籤</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // 組合選擇器語法格式"元素標籤+class名稱/id名稱"  
25.         var span_class = $("span.foo");  
26.         var span_id = $("span#boo")  
27.         // 將查詢的標籤對象打印出來  
28.         console.log(span_class)  
29.         console.log(span_id)  
30.      })  
31.   </script>  
32.   
33. </body>  
34. </html>  
程序員都必掌握的前端教程之jQuery基礎教程（上）

（5）多選擇器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標籤</p>  
10.   <p><span id="boo">內嵌span的p標籤</span></p>  
11.   <p id="bar">帶id的p標籤 <span class="foo">內嵌class的span標籤</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標籤</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標籤在內嵌span標籤</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // 多選擇器,可以將多種選擇器進行組合，之間用逗號隔開  
25.         var a = $("p#bar, .foo");  
26.         console.log(a);  
27.   
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  
程序員都必掌握的前端教程之jQuery基礎教程（上）

（6）層級選擇器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標籤</p>  
10.   <p><span id="boo">內嵌span的p標籤</span></p>  
11.   <p id="bar">帶id的p標籤 <span class="foo">內嵌class的span標籤</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標籤</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標籤在內嵌span標籤</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // 層級選擇器,選擇p標籤中含有span標籤的對象元素  
25.         var a = $("p span");  
26.         console.log(a);  
27.   
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  
程序員都必掌握的前端教程之jQuery基礎教程（上）

（7）屬性選擇器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基礎教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery選擇器</p>  
9.   <p class="foo">帶class樣式的p標籤</p>  
10.   <p><span id="boo">內嵌span的p標籤</span></p>  
11.   <p id="bar">帶id的p標籤 <span class="foo">內嵌class的span標籤</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div內部帶id的p標籤</p>  
14.     <p my-id="my_para2"><span>在div內部帶id的p標籤在內嵌span標籤</span></p>  
15.   </div>  
16.   
17.   <!-- 通過使用jquery文件來使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()該語法標識在html加載完成再執行function()匿名函數中的內容  
22.      $(function () {  
23.   
24.         // 屬性選擇器,語法格式"標籤元素[屬性名稱=屬性值]",查詢含有my-id屬性值為my_para的p標籤  
25.         var a = $("p[my-id=my_para]");  
26.         console.log(a);  
27.   
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  
程序員都必掌握的前端教程之jQuery基礎教程（上）

04 總結

至此我們《jQuery基礎教程上篇》就講完了，下篇內容主要講解jQuery的過濾器及常用操作方法等相關知識，敬請期待。最後如果喜歡本篇文章不要忘了點贊、關注與轉發哦！

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/210909.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
0 0
上一篇 2024-12-08 16:25
下一篇 2024-12-08 16:25

相關推薦

發表回復

登錄後才能評論