jQuery中的一些基本操作總結

前言：

jQuery，顧名思義，也就是 JavaScript 和查詢(Query)，它就是輔助 JavaScript 開發的 js 類庫。

$ 是jQuery的核心函數，能完成jQuery的很多功能。$()就是調用$這個函數

jQuery 對象是 dom 對象的數組 + jQuery 提供的一系列功能函數。

jQuery 對象不能使用 DOM 對象的屬性和方法，DOM 對象也不能使用 jQuery 對象的屬性和方法。

dom 對象轉化為 jQuery 對象：

$( DOM 對象 ) 就可以轉換成為 jQuery 對象

jQuery 對象轉為 dom 對象

jQuery 對象[下標]取出相應的 DOM 對象

文章目錄

一.DOM操作

1.DOM屬性操作

2. attr()與prop()的區別：

3.DOM 的增刪改

二.CSS 樣式操作

三.jQuery 效果

1.基本效果

2.滑動效果

3.淡入淡出效果

4.上述三組方法的共同點

四.`$( function(){} )`和`window.onload = function(){}`的區別

1.他們分別是在什么時候觸發?

2.他們觸發的順序?

3.他們執行的次數?

4.代碼演示：

五.jQuery 事件操作

六.事件冒泡與javaScript 事件對象

1.事件的冒泡

2.javaScript 事件對象

2.1原生javascript獲取事件對象

2.2jQuery 代碼獲取事件對象

2.3事件對象event舉例

一.DOM操作

1.DOM屬性操作

html() 它可以設置和獲取起始標簽和結束標簽中的內容。 跟 DOM 屬性 innerHTML 一樣。

text() 它可以設置和獲取起始標簽和結束標簽中的文本。 跟 DOM 屬性 innerText 一樣。

val() 它可以設置和獲取表單項的 value 屬性值。 跟 DOM 屬性 value 一樣。

示例：

a.html() //取出a的html值 a.html(val) //讓a的html值變為val a.text() //取出a的text值 a.text(val) //讓a的文本值變為val a.val() //取出a的val值（input） a.val(v) //設置a的value值為v //val實戰舉例： // 操作單選 $(":radio").val(["radio2"]); // 批量操作多選框的選中狀態 $(":checkbox").val(["checkbox3","checkbox2"]); // 操作單選的下拉框選中狀態 $("#single").val(["sin2"]); // 批量操作多選的下拉框選中狀態 $("#multiple").val(["mul2","mul3","mul4"]);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

attr() 可以設置和獲取屬性的值，不推薦操作 checked、readOnly、selected、disabled 等等 ；

attr 方法還可以操作非標準的屬性。比如自定義屬性:abc，edf。

removeAttr('xxx') 移除xxx屬性值。

prop() 可以設置和獲取屬性的值,只推薦操作 checked、readOnly、selected、disabled 等等。

removeProp('xxx') 移除xxx屬性值。

示例：

a.attr('name') //取出a的name值 a.attr("name","username") //把a的name值設置為username a.attr("yushiwen","123") //把a的自定義屬性yushiwen的值設置為123 a.removeAttr('class') //移除a的class屬性 a.prop('id') //取出a的id值 a.prop('id',"wh") //設置a的id值為wh a.removeProp('class') //移除a的class屬性

1

2

3

4

5

6

7

2. attr()與prop()的區別：

當取得checked屬性的值時，如果checked屬性設置了，如下：

attr()會返回checked，prop()會返回true，如下：

當取得checked屬性的值時，如果checked屬性沒有設置，如下：

attr()會返回undefined，prop()會返回false，如下：

undefined到底是什么呢，官方覺得返回undefined是一個錯誤，

所以我們在操作checked屬性時，應該使用prop()方法。

同理readOnly、selected、disabled 等等屬性與checked是一樣的，對它們進行操作時應該使用prop()方法。

3.DOM 的增刪改

內部插入：

appendTo() ，如a.appendTo(b) 把 a 插入到 b 子元素末尾，成為最后一個子元素

prependTo()，如a.prependTo(b) 把 a 插到 b 所有子元素前面，成為第一個子元素

外部插入:

insertAfter() ，如a.insertAfter(b) 得到 ba

insertBefore()，如a.insertBefore(b) 得到 ab

替換:

replaceWith()， 如a.replaceWith(b)

用 b 替換掉 a，注意這里是用 b 替換掉 a

replaceAll()，如a.replaceAll(b) 用 a 替換掉所有 b

刪除:

remove() ，如a.remove(); 刪除 a 標簽

empty() ，如 a.empty();清空 a 標簽里的內容

二.CSS 樣式操作

css() 讀取或寫入匹配元素的樣式屬性

addClass() 為元素添加一個或多個class值

removeClass() 刪除樣式，刪除元素的class值；傳遞一個或多個具體的class值，就會刪除具體的某個或多個class；不傳值就是移除所有的class值。

toggleClass() 對被選元素進行添加/刪除類的切換操作， 切換就是如果具有該類那么刪除，如果沒有那么添加上

offset() 獲取和設置元素的坐標。

示例：

a.css('color') //取出a元素的color a.css('color',"red") //設置a元素的color為red //實戰演示 //addClass() - 向被選元素添加一個或多個類，下述示例添加多個 $('div:first').addClass("redDiv blackDiv"); //removeClass() - 從被選元素刪除一個或多個類 ，下述示例刪除多個，也就是所有class $('div:first').removeClass(); //toggleClass() - 對被選元素進行添加/刪除類的切換操作 ,切換就是如果具有該類那么刪除，如果沒有那么添加上 $('div:first').toggleClass("redDiv"); //offset() - 返回第一個匹配元素相對于文檔的位置。 var os = $('div:first').offset(); //注意通過offset獲取到的是一個對象，這個對象有兩個屬性top表示頂邊距，left表示左邊距 alert("頂邊距："+os.top+" 左邊距："+os.left); //調用offset設置元素位置時，也需要傳遞一個js對象，對象有兩個屬性top和left //offset({ top: 10, left: 30 }); $('div:first').offset({ top:50, left:60 });

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

三.jQuery 效果

1.基本效果

show() 將隱藏的元素顯示

hide() 將可見的元素隱藏。

toggle() 可見就隱藏，不可見就顯示。

2.滑動效果

slideDown() 方法用于向下滑動元素。

slideUp() 方法用于向上滑動元素。

slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。如果元素向下滑動，則 slideToggle() 可向上滑動它們。如果元素向上滑動，則 slideToggle() 可向下滑動它們。

3.淡入淡出效果

fadeIn() 淡入(慢慢可見)

fadeOut() 淡出(慢慢消失)

fadeTo() 在指定時長內慢慢的將透明度修改到指定的值。0 透明，1 完成可見，0.5 半透明

fadeToggle() 淡入/淡出 切換

4.上述三組方法的共同點

以上方法都可以添加參數。

第一個參數是動畫 執行的時長，以毫秒為單位

第二個參數是動畫的回調函數 (動畫完成后自動調用的函數）

四.$( function(){} )和window.onload = function(){}的區別

1.他們分別是在什么時候觸發?

$( function(){} )是在jQuery 的頁面加載完成之后，也就是瀏覽器的內核解析完頁面的標簽，創建好 DOM 對象之后就會馬上執行。

window.onload = function(){}是在原生 js 的頁面加載完成之后，也就是除了要等瀏覽器內核解析完標簽創建好 DOM 對象，還要等標簽顯示時需要的內容加載完成。（如iframe和img等標簽）

2.他們觸發的順序?

$( function(){} )是在 jQuery 頁面加載完成之后先執行

window.onload = function(){}是在原生 js 的頁面加載完成之后

也就是說$( function(){} )比window.onload = function(){}早執行

3.他們執行的次數?

$( function(){} )是jQuery 的頁面加載完成之后是全部把注冊的 function 函數，依次順序全部執行。

window.onload = function(){}是原生 js 的頁面加載完成之后，只會執行最后一次的賦值函數。

4.代碼演示：

代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

輸出結果：

五.jQuery 事件操作

click() 它可以綁定單擊事件，以及觸發單擊事件。后來添加的元素不會綁定事件

mouseover() 鼠標移入事件。后來添加的元素不會綁定事件

mouseout() 鼠標移出事件。后來添加的元素不會綁定事件

bind() 可以給元素一次性綁定一個或多個事件。后來添加的元素不會綁定事件

one() 使用上跟 bind 一樣。但是 one 方法綁定的事件只會響應一次。

unbind() 跟 bind 方法相反的操作，解除事件的綁定

live() 也是用來綁定事件。它可以用來綁定選擇器匹配的所有元素的事件。哪怕這個元素是后面動態創建出來的也有效

示例：

$("h5").click(function () { // 傳function是綁定事件 alert('h5單擊事件 == click方法綁定') }); $("h5").click(); // 不傳function是觸發事件 //鼠標移入 $("h5").mouseover(function () { console.log("你進來了") }); //鼠標移出 $("h5").mouseout(function () { console.log("你出去了") }); // 給元素綁定事件，綁定事件可以鏈式操作 // jquery對象.事件方法(回調函數(){ 觸發事件執行的代碼 }).事件方法(回調函數(){ 觸發事件執行的代碼 }).事件方法(回調函數(){ 觸發事件執行的代碼 }) $(".head").click(function(){ $(".content").toggle(); }).mouseover(function(){ $(".content").toggle(); }); //jQuery提供的綁定方式：bind(type,[data],fn)函數把元素和事件綁定起來 //type表示要綁定的事件 [data]表示傳入的數據 fn表示事件的處理方法 //bind(事件字符串,回調函數),后來添加的元素不會綁定事件 //使用bind()綁定多個事件 type可以接受多個事件類型，使用空格分割多個事件 $(".head").bind("click mouseover",function(){ $(".content").toggle(); }); //one()只綁定一次,綁定的事件只會發生一次 one(type,[data],fn)函數把元素和事件綁定起來 //type表示要綁定的事件 [data]表示傳入的數據 fn表示事件的處理方法 $(".head").one("click mouseover",function(){ $(".content").toggle(); }); //live方法會為現在及以后添加的元素都綁定上相應的事件 $(".head").live("click",function(){ $(".content").toggle(); }); $("#panel").before("

什么是jQuery?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

六.事件冒泡與javaScript 事件對象

1.事件的冒泡

什么是事件的冒泡?

事件的冒泡是指，父子元素同時監聽同一個事件。當觸發子元素的事件的時候，同一個事件也被傳遞到了父元素的事件里去響應。

那么如何阻止事件冒泡呢?

在子元素事件函數體內，return false; 可以阻止事件的冒泡傳遞。

2.javaScript 事件對象

事件對象，是封裝有觸發的事件信息的一個 javascript 對象。我們重點關心的是怎么拿到這個 javascript 的事件對象。以及使用。

如何獲取呢 javascript 事件對象呢?

在給元素綁定事件的時候，在事件的 function( event ) 參數列表中添加一個參數，這個參數名，我們習慣取名為 event。 這個 event 就是 javascript 傳遞參事件處理函數的事件對象。

//原生javascript獲取 事件對象 window.onload = function () { document.getElementById("areaDiv").onclick = function (event) { console.log(event); } }

1

2

3

4

5

6

輸出結果：

//JQuery代碼獲取事件對象 $(function () { $("#areaDiv").click(function (event) { console.log(event); }); });

1

2

3

4

5

6

可以看到兩者內容是差不多的，只不過jQuery 代碼獲取事件對象把原生javascript獲取事件對象包裝了一下。

使用 bind 同時對多個事件綁定同一個函數。怎么獲取當前操作是什么事件

$("#areaDiv").bind("mouseover mouseout",function (event){ if (event.type == "mouseover") { console.log("鼠標移入"); } else if (event.type == "mouseout") { console.log("鼠標移出"); } });

1

2

3

4

5

6

7

JavaScript jQuery

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。