走進 jQuery 的世界 · 地表最強JS文檔

[toc] # 官網 > http://www.jquery.com # 理念 > write less, do more (用更少的代碼, 實現更多的功能) # 成就全世界排名前 100 萬的網站, 有 46%再使用 jquery 遠遠超過其他庫微軟把 jquery 當成他們的官方庫 # jquery 的設計思想 ## 選擇網頁元素 css 選擇器 - `$(document) 選擇整個文檔對象` - `$('#myId') 選擇 id 為 myId 的網頁元素` - `$('div.myClass') 選擇 class 為 myClass 的 div 元素` jquery 的特有表達式 - `$('a:first') 選擇網頁中第一個 a 元素` - `$('tr:odd') 選擇表格中的奇數行` - `$('div:visible') 選擇可見的 div 元素` 方法函數化 `window.onload ==> $()` `innerHTML ==> html()` `onclick ==> click()` ```javascript $(function() { $("div").click(function() { alert($(this).html()); }); }); ``` 原生與 jquery ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div class="div0"><p>hello world</p></div> </body> <script> $(function() { $("div").click(function() { alert($(this).html()); }); }); </script> </html> ``` - 原生 js, jquery 可以共存, 但是, 不能混用 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div class="div0"><p>hello world</p></div> </body> <script> $(function() { $("div").click(function() { alert(this.innerHTML); // jquery可以混用js }); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div class="div0"><p>hello world</p></div> </body> <script> $(function() { $("div").click(function() { alert(this.html()); // 這兩種寫法都是錯的 alert($(this).innerHTML); // 這兩種寫法都是錯的 }); }); </script> </html> ``` 空前強大的過濾器 `$('div').has('p') // 包含p元素的div元素` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div class="div0"><p></p></div> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </body> <script> $(function() { $("div") .has("p") .css("border", "1px solid green"); }); </script> </html> ``` `$('div').not('.myClass') // class 不等于 myClass 的 div 元素` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div class="div0"></div> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </body> <script> $(function() { $("div") .not(".div3") .css("border", "1px solid green"); }); </script> </html> ``` `$('div').filter('.myClass') // 選擇 class 等于 myClass 的 div 元素` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div class="div0"></div> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </body> <script> $(function() { $("div") .filter(".div3") .css("border", "1px solid green"); }); </script> </html> ``` 相鄰元素的查找 `$('div').next('p') // 選擇div元素后面的第一個p元素` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> </head> <body> <div> <h3>this is h3_0</h3> <h3>this is h3_1</h3> <h3>this is h3_2</h3> <h3>this is h3_3</h3> <h3>this is h3_4</h3> <h3>this is h3_5</h3> <h3>this is h3_6</h3> </div> <h3>this is h3_7</h3> </body> <script> $(function() { $("div") .next("h3") .css("background", "red"); }); </script> </html> ``` > next()也可以沒有參數 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> </head> <body> <div> <h3>this is h3_0</h3> <h3>this is h3_1</h3> <h3>this is h3_2</h3> <h3>this is h3_3</h3> <h3>this is h3_4</h3> <h3>this is h3_5</h3> <h3>this is h3_6</h3> </div> <h3>this is h3_7</h3> </body> <script> $(function() { $("div") .next() .css("background", "red"); }); </script> </html> ``` `$('div').parent(); // 選擇 div 元素的父元素` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> </head> <body> <div> <h3>this is h3_0</h3> <h3>this is h3_1</h3> <h3>this is h3_2</h3> <h3>this is h3_3</h3> <h3>this is h3_4</h3> <h3>this is h3_5</h3> <h3>this is h3_6</h3> <h3>this is h3_7</h3> </div> </body> <script> $(function() { $("h3") .parent() .css("background", "red"); }); </script> </html> ``` `$('div').children() // 選擇 div 的所有子元素` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> </head> <body> <div> <h3>this is h3_0</h3> <h3>this is h3_1</h3> <h3>this is h3_2</h3> <h3>this is h3_3</h3> <h3>this is h3_4</h3> <h3>this is h3_5</h3> <h3>this is h3_6</h3> <h3>this is h3_7</h3> </div> </body> <script> $(function() { $("div") .children() .css("background", "red"); }); </script> </html> ``` ## 鏈式操作 `$('div').find('h3').eq(2).html('hello')` 相當于... 1. 找到 div 2. 選擇其中的 h3 元素 3. 選擇第三個 h3 4. 把內容改成 hello ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> </head> <body> <div> <h3>this is h3_0</h3> <h3>this is h3_1</h3> <h3>this is h3_2</h3> <h3>this is h3_3</h3> <h3>this is h3_4</h3> <h3>this is h3_5</h3> <h3>this is h3_6</h3> <h3>this is h3_7</h3> </div> </body> <script> $(function() { $("div") .find("h3") // 找到h3 .eq(2) // 相當于下標2 .css("background", "red"); // 設置紅色背景 }); </script> </html> ``` jquery 提供了 end()方法, 使得結果集可以后退一步 ## 一次 div, 往上跳一級 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> </head> <body> <div> <h3>this is h3_0</h3> <h3>this is h3_1</h3> <h3>this is h3_2</h3> <h3>this is h3_3</h3> <h3>this is h3_4</h3> <h3>this is h3_5</h3> <h3>this is h3_6</h3> <h3>this is h3_7</h3> </div> </body> <script> $(function() { $("div") .find("h3") .eq(2) .css("background", "red") .end() .eq(1) .css("background", "yellow"); // 兩行都會變色 }); </script> </html> ``` ## 可以兩次 end() ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jquery.js"></script> </head> <body> <div> <h3>this is h3_0</h3> <h3>this is h3_1</h3> <h3>this is h3_2</h3> <h3>this is h3_3</h3> <h3>this is h3_4</h3> <h3>this is h3_5</h3> <h3>this is h3_6</h3> <h3>this is h3_7</h3> </div> </body> <script> $(function() { $("div") .find("h3") .eq(2) .css("background", "red") .end() .eq(1) .css("background", "yellow") .end() .end() .css("border", "1px red solid"); }); </script> </html> ```