jquery的主要功能是什么

本篇內(nèi)容主要講解“jquery的主要功能是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“jquery的主要功能是什么”吧!

創(chuàng)新互聯(lián)公司主營宜都網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),宜都h5微信小程序開發(fā)搭建,宜都網(wǎng)站營銷推廣歡迎宜都等地區(qū)企業(yè)咨詢

jquery的主要功能有：1、訪問頁面框架的局部；2、修改頁面的表現(xiàn)；3、更改頁面內(nèi)容；4、響應(yīng)事件；5、為頁面添加動畫；6、與服務(wù)器異步交互；7、簡化常用的JavaScript操作。

jQuery的主要功能

1：訪問頁面框架的局部

jQuery大大簡化了DOM獲取頁面某個節(jié)點或者某一類節(jié)點的固定方法；

2：修改頁面的表現(xiàn)

由于各個瀏覽器對CSS3標(biāo)準(zhǔn)的支持不同，是的很多CSS3的樣式風(fēng)格沒能很好的體現(xiàn)。jQuery的出現(xiàn)很好的解決了這個問題。它通過封裝好的JavaScript代碼，是的各種瀏覽器能很好的使用CSS3標(biāo)準(zhǔn)。

3：更改頁面內(nèi)容

通過強大而方面的API，jQuery可以很方便的修改頁面的內(nèi)容，甚至整個頁面的框架；

4：響應(yīng)事件

不需要在考慮瀏覽器的兼容性問題，可以更加輕松的處理事件；

5：為頁面添加動畫

jQuery的庫提供了大量可自定義參數(shù)的動畫效果，

6：與服務(wù)器異步交互

jQuery提供了一整套Ajax相關(guān)的操作，大大方便了異步交互的開發(fā)和使用；

7：簡化常用的JavaScript操作

jQuery提供了很多附加的功能來簡化常用的JavaScript操作，例如數(shù)組的操作，迭代運算等；

jQuery 的基本功能

jQuery 封裝了 DOM 功能，讓 DOM 函數(shù)的使用變得十分簡潔方便。無論是對網(wǎng)頁元素的獲取還是“增刪改查”都進行了更加人性化的封裝。下面讓我們簡單了解一下 jQuery 的基本功能以及 jQuery 設(shè)計的優(yōu)秀之處。

一、獲取網(wǎng)頁元素

jQuery 獲取的結(jié)果是一個對象

• 一些基本方法

$(document); // 選擇整個文檔對象
$("#myId"); // 選擇id = 'myId' 的元素
$(".myClass"); // 選擇class = 'myClass' 的元素
$("div.myClass"); // 選擇class = 'myClass' 的div元素
$("input[name=first]"); // 選擇name = 'first' 的 input 元素

• jQuery 特有的表達式

$("a:first"); // 選擇網(wǎng)頁中第一個a元素
$("tr:odd"); // 選擇表格中的奇數(shù)行
$("#myFrom:input"); // 選擇表單中的id='myFrom'的input元素
$("div:visible"); // 選擇可見的div元素
$("div:gt(2)"); // 選擇所有的div元素，除了前3個
$("div:animated"); // 選擇當(dāng)前處于動畫狀態(tài)的div元素

• 進一步過濾對 div 的選擇結(jié)果對象

$("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同級的其他兄弟元素（不包括自己）

二、鏈?zhǔn)讲僮?/strong>

jQuery 最令人稱道的部分

jQuery 可以對同一對象進行連續(xù)函數(shù)操作

舉例：

$("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

鏈?zhǔn)讲僮魇?jQuery 最方便的特點，因為 jQuery 每次執(zhí)行一個函數(shù)操作的返回值還是原來操作的 jQuery 對象，所以可以直接在后面繼續(xù)操作。

.end() 方法

.end() 方法，使返回值結(jié)果退到上一個 jQuery 對象

舉例：

$("div") // 找到div元素
 .find("p") // 選擇其中的p元素
 .addClass("first")
 .removeClass("second")
 .text("third")
 .end() // 將jQuery對象從p退回到div
 .addClass("myDiv"); // 給div添加一個class = 'myDiv'

三、增刪改查

1. 增

創(chuàng)建新元素：直接在 jQuery 直接傳入符合 html 格式的字符串

let $myDiv = $("<div class='myDiv'><p>Derek</p></div>"); // 創(chuàng)建新的元素，用變量$myDiv儲存
$("body").append($myDiv); // 把$myDiv儲存的新元素插入到body中
$("ul").append("<li>list</li>"); // 把新創(chuàng)建的li插入到ul中

復(fù)制元素

.clone()

返回當(dāng)前 jQuery 對象的一個克隆副本

包括所有匹配元素、匹配元素的下級元素、文字節(jié)點

2 個參數(shù)：

withDataAndEvents 是否同時復(fù)制元素的數(shù)據(jù)和綁定事件，默認(rèn) false

deepWithDataAndEvents 是否同時復(fù)制元素所有子元素的數(shù)據(jù)和綁定事件，默認(rèn)值為第 1 個參數(shù)(withDataAndEvents)的值

2. 刪

刪除元素

.remove() 不保留被刪元素的事件
.detach() 保留被刪元素的事件，便于在重新插入文檔時使用
.empty() 清空元素內(nèi)容，但不刪除該元素（即刪除元素里面的所有節(jié)點）

3. 改

插入/移動元素

$("div").insertAfter($("p")); // 把div元素移動到p元素的后面
$("p").after($("div")); // 把p元素移動到div元素的前面

上述兩種方法的效果是一樣的

但是它們的返回值是不同的，分別是$('div')和$('p')，所以需要根據(jù)后續(xù)的操作來進行選擇

另外兩種插入/移動元素的方法

// 在div內(nèi)部的 末端 插入內(nèi)容
$("div").append("插入的部分");
$("插入的部分").appendTo("div");
// 在div內(nèi)部的 頂端 插入內(nèi)容
$("div").prepend("插入的部分");
$("插入的部分").prependTo("div");

4. 改查合一 getter/setter

同一函數(shù)，通過傳參的不同來實現(xiàn)改/查功能

$("h2").html(); // html沒有傳參，實現(xiàn)取出h2的值
$("h2").html("Hello"); // html傳參'Hello'，實現(xiàn)對h2進行賦值

jQuery 常見取值/賦值函數(shù)

.html() 查/改 html 內(nèi)容

.text() 查/改 text 內(nèi)容

.attr() 查/改 某個屬性的值

.width() 查/改 某個元素寬度

.heigth() 查/改 某個元素高度

.val() 查/改 某個表單元素的值

注意：

如果結(jié)果對象包含多個元素，那么賦值時，將對其中所有的元素賦值

取值時，則是只取出第一個元素的值

.text()例外，它取出所有元素的 text 內(nèi)容

到此，相信大家對“jquery的主要功能是什么”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！