jQuery隨手筆記之常用的jQuery操作DOM事件
Dom是Document Object Model的縮寫,意思是文檔對象模型。DOM是一種與瀏覽器、平臺、語言無關(guān)的接口,使用該接口可以輕松訪問頁面中所有的標(biāo)準(zhǔn)組件。
DOM操作可以分為三個方面即DOM Core(核心)、HTM-DOM和CSS-DOM。
jQuery DOM 元素方法
| 函數(shù) | 描述 |
|---|---|
| .get() | 獲得由選擇器指定的 DOM 元素。 |
| .index() | 返回指定元素相對于其他指定元素的 index 位置。 |
| .size() | 返回被 jQuery 選擇器匹配的元素的數(shù)量。 |
| .toArray() | 以數(shù)組的形式返回 jQuery 選擇器匹配的元素。 |
1.attr() .removeAttr()
.attr() 方法可以傳入一個名值對的參數(shù),也可以傳入一個包含2個以上名值對的對象參數(shù),例如:
.attr('src','images/a.jpg');
.attr({
rel:'www',
id:'zz',
title:'some',
some:'111'
});
當(dāng)然,也可以移除一個或者一個以上屬性.removeAttr('id rel');
2.prop()
該方法可以取得屬性值
傳入想要取得的值的屬性名(字符串),例如.prop('id');
設(shè)置id的值(修改DOM本身存在的屬性比如a標(biāo)簽的href,id)
.prop('id','otherid');
3.val()
這個方法經(jīng)常用于取得表單控件的值
4.insertBefore() .insertAfter() .prependTo() .appendTo()
.insertBefore()在現(xiàn)有元素外部、之前添加內(nèi)容;(反向操作 .before())
.insertAfter()在現(xiàn)有元素外部、之后添加內(nèi)容;(反向操作 .after())
.prependTo()在現(xiàn)有元素內(nèi)部、之前添加內(nèi)容;(反向操作 .prepend())
.appendTo()在現(xiàn)有元素內(nèi)部、之后添加內(nèi)容;(反向操作 .append())
5.clone()
該方法可以復(fù)制拷貝元素,如果需要復(fù)制出來的元素繼承其他事件,需要傳入一個布爾值作為參數(shù),.clone(true)
6.wrap() .wrapAll() .wrapInner()
.wrap()和.wrapInner()可以理解成相對的,.wrap()是包在元素外面一層,而.wrapWith()是包在元素里面一層,
而.wrapAll()是在所有匹配到的元素外圍包裹
7.html() .text() .replaceWith() .replaceAll()
.html()可以傳入文本或者DOM節(jié)點(diǎn);
.text()只能讀取或者替換文本;
.replaceWith() 把。。。替換“成”。。。;
.replaceAll() 把。。。替換“給”。。。
8.empty()
移除元素
9.detach() .remove()
這2個方法有點(diǎn)相似,都不會把匹配的元素從jQuery對象中刪除,但是還是有所區(qū)別:
.detach() 所有綁定的事件、附加的數(shù)據(jù)等都會保留下來
.remove() 除了這個元素本身得以保留之外,其他的比如
綁定的事件,附加的數(shù)據(jù)等都會被移除。
- jquery快捷動態(tài)綁定鍵盤事件的操作函數(shù)代碼
- jQuery 選擇器、DOM操作、事件、動畫
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 下拉框應(yīng)用
- jquery中dom操作和事件的實(shí)例學(xué)習(xí)-表單驗(yàn)證
- jQuery 相關(guān)控件的事件操作分解
- jQuery動態(tài)生成的元素綁定事件操作實(shí)例分析
- jQuery級聯(lián)操作綁定事件實(shí)例
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- Jquery基礎(chǔ)之事件操作詳解
- 淺談事件冒泡、事件委托、jQuery元素節(jié)點(diǎn)操作、滾輪事件與函數(shù)節(jié)流
- 詳解Jquery的事件操作和文檔操作
- jQuery操作事件完整實(shí)例分析
相關(guān)文章
jquery.post用法關(guān)于type設(shè)置問題補(bǔ)充
當(dāng)使用ajax獲取data數(shù)據(jù)的時候,直接data.foo就可以得到。而較低版本的jquery就不行比如1.4之前,下面為大家介紹下jquery.post用法關(guān)于type設(shè)置問題2014-01-01
jQuery 圖片查看器插件 Viewer.js用法簡單示例
這篇文章主要介紹了jQuery 圖片查看器插件 Viewer.js用法,結(jié)合簡單示例形式分析了jQuery 圖片查看器插件 Viewer.js的基本功能、調(diào)用方法及后臺數(shù)據(jù)調(diào)用處理技巧,需要的朋友可以參考下2020-04-04
JQuery獲取當(dāng)前屏幕的高度寬度的實(shí)現(xiàn)代碼
JQuery獲取瀏覽器窗口寬高,文檔寬高的代碼,使用jquery的朋友可以參考下。2011-07-07
jQuery實(shí)現(xiàn)form表單元素序列化為json對象的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)form表單元素序列化為json對象的方法,涉及jQuery基于serializeArray方法實(shí)現(xiàn)表單序列化的相關(guān)技巧,需要的朋友可以參考下2015-12-12
jQuery設(shè)置單選按鈕radio選中/不可用的實(shí)例代碼
這篇文章主要介紹了jQuery設(shè)置單選按鈕radio選中/不可用的實(shí)例代碼的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06
jQuery實(shí)現(xiàn)點(diǎn)擊標(biāo)題輸入詳細(xì)信息
點(diǎn)擊標(biāo)題,輸入詳細(xì)信息,點(diǎn)擊確定按鈕,完成,把不必要的選項(xiàng)隱藏,當(dāng)用戶真正有需要的時候,在顯示出來2013-04-04

