站長資訊網
jquery的主要功能有：1、訪問頁面框架的局部；2、修改頁面的表現；3、更改頁面內容；4、響應事件；5、為頁面添加動畫；6、與服務器異步交互；7、簡化常用的JavaScript操作。
本教程操作環境：Windows10系統、jquery3.2.1、Dell G3電腦。
jquery的主要功能有哪些？
jQuery的主要功能
1：訪問頁面框架的局部
jQuery大大簡化了DOM獲取頁面某個節點或者某一類節點的固定方法；
2：修改頁面的表現
由于各個瀏覽器對CSS3標準的支持不同，是的很多CSS3的樣式風格沒能很好的體現。jQuery的出現很好的解決了這個問題。它通過封裝好的JavaScript代碼，是的各種瀏覽器能很好的使用CSS3標準。
3：更改頁面內容
通過強大而方面的API，jQuery可以很方便的修改頁面的內容，甚至整個頁面的框架；
4：響應事件
不需要在考慮瀏覽器的兼容性問題，可以更加輕松的處理事件；
5：為頁面添加動畫
jQuery的庫提供了大量可自定義參數的動畫效果，
6：與服務器異步交互
jQuery提供了一整套Ajax相關的操作，大大方便了異步交互的開發和使用；
7：簡化常用的JavaScript操作
jQuery提供了很多附加的功能來簡化常用的JavaScript操作，例如數組的操作，迭代運算等；
jQuery 的基本功能
jQuery 封裝了 DOM 功能，讓 DOM 函數的使用變得十分簡潔方便。無論是對網頁元素的獲取還是“增刪改查”都進行了更加人性化的封裝。下面讓我們簡單了解一下 jQuery 的基本功能以及 jQuery 設計的優秀之處。
一、獲取網頁元素
jQuery 獲取的結果是一個對象
-
一些基本方法
$(document); // 選擇整個文檔對象 $("#myId"); // 選擇id = 'myId' 的元素 $(".myClass"); // 選擇class = 'myClass' 的元素 $("div.myClass"); // 選擇class = 'myClass' 的div元素 $("input[name=first]"); // 選擇name = 'first' 的 input 元素
-
jQuery 特有的表達式
$("a:first"); // 選擇網頁中第一個a元素 $("tr:odd"); // 選擇表格中的奇數行 $("#myFrom:input"); // 選擇表單中的id='myFrom'的input元素 $("div:visible"); // 選擇可見的div元素 $("div:gt(2)"); // 選擇所有的div元素，除了前3個 $("div:animated"); // 選擇當前處于動畫狀態的div元素
-
進一步過濾對 div 的選擇結果對象
$("div").has("p"); // 選擇包含p元素的div元素 $("div").not(".myClass"); //選擇class != 'myClass' 的div元素 $("div").filter(".myClass"); // 選擇class = 'myClass' 的div元素 $("div").first(); // 選擇第1個div元素 $("div").eq(5); // 選擇第6個div元素
-
通過 div 選擇其他元素
$("div").next("p"); // 選擇div元素后面的第1個p元素 $("div").parent(); // 選擇div元素的父元素 $("div").closest("from"); // 選擇離div最近的from父元素 $("div").children(); // 選擇div的所有子元素 $("div").siblings(); // 選擇div同級的其他兄弟元素（不包括自己）
二、鏈式操作
jQuery 最令人稱道的部分
jQuery 可以對同一對象進行連續函數操作
舉例：
$("div").find("p").addClass("first").removeClass("second").html("third"); // 分解 $("div") // 找到div元素 .find("p") // 選擇其中的p元素 .addClass("first") // 添加一個class = 'first' .removeClass("second") // 刪除一個class = 'second' .text("third"); // 將文本改為 third
鏈式操作是 jQuery 最方便的特點，因為 jQuery 每次執行一個函數操作的返回值還是原來操作的 jQuery 對象，所以可以直接在后面繼續操作。
.end() 方法
.end() 方法，使返回值結果退到上一個 jQuery 對象
舉例：
$("div") // 找到div元素 .find("p") // 選擇其中的p元素 .addClass("first") .removeClass("second") .text("third") .end() // 將jQuery對象從p退回到div .addClass("myDiv"); // 給div添加一個class = 'myDiv'
三、增刪改查
1. 增
創建新元素：直接在 jQuery 直接傳入符合 html 格式的字符串
let $myDiv = $("<div class='myDiv'><p>Derek</p></div>"); // 創建新的元素，用變量$myDiv儲存 $("body").append($myDiv); // 把$myDiv儲存的新元素插入到body中 $("ul").append("<li>list</li>"); // 把新創建的li插入到ul中
復制元素
.clone()
返回當前 jQuery 對象的一個克隆副本
包括所有匹配元素、匹配元素的下級元素、文字節點
2 個參數：
withDataAndEvents 是否同時復制元素的數據和綁定事件，默認 false
deepWithDataAndEvents 是否同時復制元素所有子元素的數據和綁定事件，默認值為第 1 個參數(withDataAndEvents)的值
2. 刪
刪除元素
.remove() 不保留被刪元素的事件 .detach() 保留被刪元素的事件，便于在重新插入文檔時使用 .empty() 清空元素內容，但不刪除該元素（即刪除元素里面的所有節點）
3. 改
插入/移動元素
$("div").insertAfter($("p")); // 把div元素移動到p元素的后面 $("p").after($("div")); // 把p元素移動到div元素的前面
上述兩種方法的效果是一樣的
但是它們的返回值是不同的，分別是$('div')和$('p')，所以需要根據后續的操作來進行選擇
另外兩種插入/移動元素的方法
// 在div內部的 末端 插入內容 $("div").append("插入的部分"); $("插入的部分").appendTo("div"); // 在div內部的 頂端 插入內容 $("div").prepend("插入的部分"); $("插入的部分").prependTo("div");
4. 改查合一 getter/setter
同一函數，通過傳參的不同來實現改/查功能
$("h1").html(); // html沒有傳參，實現取出h1的值 $("h1").html("Hello"); // html傳參'Hello'，實現對h1進行賦值
jQuery 常見取值/賦值函數
.html() 查/改 html 內容
.text() 查/改 text 內容
.attr() 查/改 某個屬性的值
.width() 查/改 某個元素寬度
.heigth() 查/改 某個元素高度
.val() 查/改 某個表單元素的值
注意：
如果結果對象包含多個元素，那么賦值時，將對其中所有的元素賦值
取值時，則是只取出第一個元素的值
.text()例外，它取出所有元素的 text 內容
推薦學習：《jQuery視頻教程》
