jQuery元素操作1

2022-03-03 15:49:46 字數 2309 閱讀 4501

1

元素操作

21.2.1 高度和寬度

3$(「div」).height(); // 高度

4$(「div」).width(); // 寬度

5.height()方法和.css(「height」)的區別:

61. 返回值不同,.height()方法返回的是 數字型別(20),.css(「height」)返回的是字串型別(20px),因此.height()方法常用在參與數學計算的時候

72. window、document的高度可以通過.height()方法獲取到,而.css(「height」)獲取不到(會直接報錯!)

81.2.2 座標值

9$(「div」).offset(); // 獲取或設定座標值

10$(「div」).position(); // 獲取座標值

111.2.3 滾動條(滾動事件)

12$(「div」).scrolltop(); // 相對於滾動條頂部的偏移

13$(「div」).scrolllleft(); // 相對於滾動條左部的偏移

14案例:兩次跟隨的廣告

1516

171.3 資料快取

18$(「div」).data(「index」); // 獲取資料index的值

19<

div

data-index

=」1」

>

div>

201.3.1 .data()跟.attr() 方法的區別:

211.獲取資料的時候,attr方法需要傳入引數,data方法可以不傳入引數,這時候獲取到的是乙個js物件,即使沒有任何data屬性。

222. 獲取到的資料型別不同,attr方法獲取到的資料型別是字串(string),data方法獲取到的是相應的型別。

233. data方法獲取到資料之後,我們使用乙個物件來接收它,那麼就可以直接操作(設定值或獲取值)這個物件,而attr方法不可以。

24並且通過這種方式,要比.data(key,value)的方式更高效!

254. data-attribute屬性會在頁面初始化的時候放到jquery物件,被快取起來,而attr方法不會。

261.4 jquery外掛程式機制

27jquery官網插接教程:

2829

兩種方式:

30$.extend( });

31$.fn.extend( });

32自定義選擇器:

33jquery.extend(jquery.expr[':'],

37});

38$(":class-itcast").css("background","pink");

3940

1.4.1 常用外掛程式介紹

41jquery.lazyload.js

42jquery.validate.js

431.4.2 外掛程式使用:

44檢視api文件,了解外掛程式的功能,提供的方法和引數。

4546

1. 引用jquery

472. 引用外掛程式

483. 使用外掛程式

491.4.3 怎麼寫外掛程式

50演示jquery.lxcfbg.js (自己的外掛程式)

511.5 jqueryui

521.5.1 使用

531.6 jquery事件

541.6.1 繫結

55click/mouseenter/blur/keyup

56bind:$node.bind(「click」,function(){});

57one : $node.one(「click」,function(){});

58delegate : $node.delegate(「p」,」click」,function(){});

59on: $node.on(「click」,」p」,function(){});

601.6.2 解綁

61unbind、undelegate

62off

631.6.3 觸發

64click : $(「div」).click();

65trigger:觸發事件,並且觸發瀏覽器預設行為

66triggerhandler:不觸發瀏覽器預設行為

6768

1.7 多庫共存

69同乙個頁面,引入多個js庫,保證它們不發生命名衝突。

70 noconflict()

jQuery元素操作1

1 元素操作 21.2.1 高度和寬度 3 div height 高度 4 div width 寬度 5.height 方法和.css height 的區別 61.返回值不同,height 方法返回的是 數字型別 20 css height 返回的是字串型別 20px 因此.height 方法常用在...

jQuery操作元素

對於元素屬性的操作 attr 屬性名 獲得屬性 如 a attr href 獲得鏈結的內容 removeattr 屬性名 刪除此屬性 如 a removeattr href 移除href屬性 2.對於元素內容的操作 dd html 獲得元素的html內容 dd html 哈哈哈 設定元素的html內...

jQuery操作元素

獲取內容 test text test html test val 獲取屬性 test attr href 設定或者修改屬性 attr disabled disabled removeattr checked input select在value值變化時可以呼叫不同的函式 change functi...