人妻精品在线观看一区二区三区,蜜臀av精品一区二区三区网站,中文一区二区三区亚洲欧美,熟女人妇精品一区二区,人妻av在线观看视频,欧美日韩国产三级精品网站,黄色免费网站直接进入,超碰公开福利正在播放,国产毛片乡下农村妇女毛片

jquery的主要功能有哪些

來源:php中文網(wǎng) | 2023-03-25 11:47:08 |

本教程操作環(huán)境:Windows10系統(tǒng)、jquery3.2.1、Dell G3電腦。

jquery的主要功能有哪些?


(資料圖片僅供參考)

jQuery的主要功能

1:訪問頁面框架的局部

jQuery大大簡(jiǎn)化了DOM獲取頁面某個(gè)節(jié)點(diǎn)或者某一類節(jié)點(diǎn)的固定方法;

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

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

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

通過強(qiáng)大而方面的API,jQuery可以很方便的修改頁面的內(nèi)容,甚至整個(gè)頁面的框架;

4:響應(yīng)事件

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

5:為頁面添加動(dòng)畫

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

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

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

7:簡(jiǎn)化常用的JavaScript操作

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

jQuery 的基本功能

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

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

jQuery 獲取的結(jié)果是一個(gè)對(duì)象

一些基本方法

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

jQuery 特有的表達(dá)式

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

進(jìn)一步過濾對(duì) div 的選擇結(jié)果對(duì)象

$("div").has("p"); // 選擇包含p元素的div元素$("div").not(".myClass"); //選擇class != "myClass" 的div元素$("div").filter(".myClass"); // 選擇class = "myClass" 的div元素$("div").first(); // 選擇第1個(gè)div元素$("div").eq(5); // 選擇第6個(gè)div元素

通過 div 選擇其他元素

$("div").next("p"); // 選擇div元素后面的第1個(gè)p元素$("div").parent(); // 選擇div元素的父元素$("div").closest("from"); // 選擇離div最近的from父元素$("div").children(); // 選擇div的所有子元素$("div").siblings(); // 選擇div同級(jí)的其他兄弟元素(不包括自己)

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

jQuery 最令人稱道的部分

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

舉例:

$("div").find("p").addClass("first").removeClass("second").html("third");// 分解$("div") // 找到div元素  .find("p") // 選擇其中的p元素  .addClass("first") // 添加一個(gè)class = "first"  .removeClass("second") // 刪除一個(gè)class = "second"  .text("third"); // 將文本改為 third

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

.end() 方法

.end() 方法,使返回值結(jié)果退到上一個(gè) jQuery 對(duì)象

舉例:

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

三、增刪改查

1. 增

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

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

復(fù)制元素

.clone()

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

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

2 個(gè)參數(shù):

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

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

2. 刪

刪除元素

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

3. 改

插入/移動(dòng)元素

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

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

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

另外兩種插入/移動(dòng)元素的方法

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

4. 改查合一 getter/setter

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

$("h1").html(); // html沒有傳參,實(shí)現(xiàn)取出h1的值$("h1").html("Hello"); // html傳參"Hello",實(shí)現(xiàn)對(duì)h1進(jìn)行賦值

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

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

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

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

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

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

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

注意:

如果結(jié)果對(duì)象包含多個(gè)元素,那么賦值時(shí),將對(duì)其中所有的元素賦值

取值時(shí),則是只取出第一個(gè)元素的值

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

推薦學(xué)習(xí):《jQuery視頻教程》

以上就是jquery的主要功能有哪些的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!

關(guān)鍵詞: