jQuery的屬性操作模塊總共有4個部分，本篇說一下第2個部分:DOM屬性部分，用于修改DOM元素的屬性的(屬性和特性是不一樣的，一般將property翻譯為屬性，attribute翻譯為特性)
DOM屬性的靜態方法介面如下:
- prop(elem, name, value) ;設定或讀取DOM屬性，有兩種用法，如下
·$.prop(elem,name,value) ;傳入第三個引數表示設定elem元素的name屬性值為value
·$.prop(elem,name,) ;第三個引數為傳入或者設定為undefined則表示獲取elem的name屬性
jQuery/$ 實體方法(可以通過jQuery實體呼叫的):
writer by:大沙漠 QQ:22969969
- prop(name, value) ;設定或讀取DOM屬性，有以下用法
.prop(obj) ;引數1是物件時
.prop(name) ;引數1是字串時，引數2未指定或者設定為undefined時,表示獲取第一個匹配元素屬性為name的值
.prop(name,value) ;為每個匹配元素的誰能夠設定一個值
- removeProp(name) 從每個匹配元素上移除一個name屬性,name可以是一個或多個dom屬性名(用空格分開)
舉個栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> </head> <body> <input type="text"> <button id="b1">設定值</button> <button id="b2">獲取值</button> <script> let input = document.getElementsByTagName('input')[0], b1 = document.getElementsByTagName('button')[0], b2 = document.getElementsByTagName('button')[1]; b1.onclick = ()=>{ $('input').prop('value',555) //設定輸入框的值為555 等于$.prop(input,'value',555) } b2.onclick = ()=>{ let result = $('input').prop('value'); //獲取輸入框的值 等于:let result = $.prop(input,'value'); console.log(result); } </script> </body> </html>
渲染如下:
我們點擊設定值按鈕值就會變為555了:
然后點擊獲取值，就會獲輸入框這個DOM物件的value值:
原始碼分析
$.prop實作如下:
jQuery.extend({ prop: function( elem, name, value ) { //設定或讀取DOm屬性，elem是要讀取、設定的DOM元素，name是要操作的DOM屬性名、value是要操作的DOM屬性值 var ret, hooks, notxml, nType = elem.nodeType; if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { //如果elem為空 或者是文本、注釋、屬性節點 return; //直接回傳，不接著處理 } notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); //是否為xml檔案元素 if ( notxml ) { //如果不是xml檔案元素 name = jQuery.propFix[ name ] || name; //修正DOM屬性名 hooks = jQuery.propHooks[ name ]; //修正擴展DOM屬性修正物件 } if ( value !== undefined ) { //如果value不為空，則設定值 if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { //優先呼叫修正方法set() return ret; } else { return ( elem[ name ] = value ); //設定值，并將值回傳 } } else { //如果value為空則讀取name的值 if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { //優先呼叫修正方法get() return ret; } else { return elem[ name ]; //獲取對應的值 } } }, /**/ })
挺簡單的吧，對于jQuery實體來說，它和HTMl特性部分一樣，如下:
jQuery.fn.extend({ prop: function( name, value ) { //設定或讀取DOM屬性 return jQuery.access( this, name, value, true, jQuery.prop ); //也是借用了$.access工具方法 }, removeProp: function( name ) { //從每個匹配元素上移除一個DOM屬性 name = jQuery.propFix[ name ] || name; //如果屬性名name需要修正，則修正屬性 return this.each(function() { // try/catch handles cases where IE balks (such as removing a property on window) try { this[ name ] = undefined; //先設定為undefined delete this[ name ]; //再洗掉屬性 } catch( e ) {} }); }, /*略*/ })
我們可以看到,jQuery實體的prop方法也是借用了$.access工具方法，$.access在HTML特性部分已經講過了，這里不說了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34123.html
標籤：jQuery