柚子快報(bào)邀請(qǐng)碼778899分享：前端基礎(chǔ)之jQuery

http://yzkb.51969.com/

?1?jQuery主架

????????

????????jQuery是一個(gè)封裝JS的框架。

????????使用jQuery可以更方便的編寫JS腳本實(shí)現(xiàn)的功能。

2?jQuery框架

????????jQuery 是一個(gè)?JavaScript 庫。

????????jQuery 極大地簡(jiǎn)化了?JavaScript 編程。

? ? ?

3 jQuery可以做什么？

????????HTML 元素選取?

????????HTML 元素操作?

????????CSS 操作?

????????HTML 事件函數(shù)?

????????JavaScript 特效和動(dòng)畫?

????????HTML DOM 遍歷和修改?

????????AJAX（重要）

4?如何在HTML頁面中使用jQuery框架

????????jQuery是一個(gè)封裝了JS腳本的框架。

????????也就是說是已經(jīng)寫好的JS代碼。

? ? ? ??

????????.js就是JavaScript的外部腳本文件。

????????.min.js 這是壓縮的版本。

????????需要在HTML頁面中導(dǎo)入相應(yīng)的js文件。

????????

5?jQuery的核心方法

????????在jQuery中封裝了一系列的方法。

????????核心方法： jquery();

????????簡(jiǎn)化格式： $(); 合作$代替jQuery這個(gè)方法名。

????????$(參數(shù))：參數(shù)可以是選擇器，還可以直接就是一個(gè)函數(shù)。

6?jQuery中事件方法

????????在jQuery中將HTML中事件都封裝成了一系統(tǒng)的事件方法。

? ? ? ? 例：表示頁面輸載入事件：ready(函數(shù))

//簡(jiǎn)化版

7?jQuery的選擇器

????????選擇器的作用是用來在HTML頁面上查找元素。

????????jQuery的選擇器與CSS內(nèi)嵌樣式選擇器是一樣的。

????????

????????jQuery 選擇器允許您對(duì) HTML 元素組或單個(gè)元素進(jìn)行操作。

????????jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它

基于已經(jīng)存在的CSS選擇器，除此之外，它還有一些自定義的選擇器。

????????jQuery 中所有選擇器都以美元符號(hào)開頭：$()。

????????

8?jQuery的方法

8.1 值的方法

????????HTML代碼/文本/值

html()====>innerHTML

text()====>innerText

val()====>value

這是SPAN標(biāo)簽

8.2 CSS樣式的方法

????????使用css()的方法可以設(shè)置和獲取對(duì)象的樣式。

????????css() 方法設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性。

返回CSS 屬性

如需返回指定的 CSS 屬性的值，請(qǐng)使用如下語法：

css("propertyname");

例子：將返回首個(gè)匹配元素的 background-color 值：

$("p").css("background-color");

設(shè)置單個(gè)CSS屬性

如需設(shè)置指定的 CSS 屬性，請(qǐng)使用如下語法：

css("propertyname","value");

下面的例子將為所有匹配元素設(shè)置 background-color 值：

$("p").css("background-color","yellow");

設(shè)置多個(gè) CSS 屬性

如需設(shè)置多個(gè) CSS 屬性，請(qǐng)使用如下語法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子將為所有匹配元素設(shè)置 background-color 和 font-size：

$("p").css({"background-color":"yellow","font-size":"200%"});

8.3 屬性

????????attr方法可以獲取屬性的值，也可以設(shè)置屬性的值，也可以獲取一個(gè)我們自己新定義的屬性

的值。

獲取xo標(biāo)簽attribute屬性的值：xo可以是ID可以是類。如下： $(xo).attr(attribute) 設(shè)置attribute屬性的值為value $(xo).attr(attribute, value) 設(shè)置多個(gè)attribute屬性的值value們 $(xo).attr({attribute1: value1, attribute2: value2})

8.4 類樣式的使用

jQuery 操作 CSS

jQuery 擁有若干進(jìn)行 CSS 操作的方法。

addClass() - 向被選元素添加一個(gè)或多個(gè)類

removeClass() - 從被選元素刪除一個(gè)或多個(gè)類

toggleClass() - 對(duì)被選元素進(jìn)行添加/刪除類的切換操作

jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 屬性。在添加類時(shí)，您也可以選取多個(gè)元素：

$("button").click(function(){ ????????$("h1,h2,p").addClass("blue");$("div").addClass("important");

});

也可以在 addClass() 方法中規(guī)定多個(gè)類：

$("button").click(function(){

????????$("body div:first").addClass("important blue");

});

jQuery -?添加元素

通過 jQuery，可以很容易地添加新元素/內(nèi)容。

添加新的 HTML 內(nèi)容時(shí)學(xué)習(xí)用于添加新內(nèi)容的四個(gè) jQuery 方法：

append() - 在被選元素的結(jié)尾插入內(nèi)容

prepend() - 在被選元素的開頭插入內(nèi)容

after() - 在被選元素之后插入內(nèi)容

before() - 在被選元素之前插入內(nèi)容

jQuery removeClass() 方法

下面的例子演示如何在不同的元素中刪除指定的 class 屬性：

$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });

jQuery toggleClass() 方法

下面的例子將展示如何使用 jQuery toggleClass() 方法。該方法對(duì)被選元素進(jìn)行添加/刪除類的切換操作：

$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });

jQuery -?刪除元素

通過 jQuery，可以很容易地刪除已有的 HTML 元素。

如需刪除元素和內(nèi)容，一般可使用以下兩個(gè) jQuery 方法：

remove() - 刪除被選元素（及其子元素）

empty() - 從被選元素中刪除子元素

9?實(shí)現(xiàn)動(dòng)態(tài)表格

步驟：①創(chuàng)建一個(gè)表格

? ? ? ? ? ?②編寫數(shù)據(jù)

? ? ? ? ? ?③在頁面加載完成之后初始化表格

? ? ? ? ? ?④將表單中的數(shù)據(jù)加到表格

? ? ? ? ? ?⑤為每一行增加一個(gè)刪除按鈕

柚子快報(bào)邀請(qǐng)碼778899分享：前端基礎(chǔ)之jQuery

http://yzkb.51969.com/

精彩鏈接