jQuery 源码分析(十三) 数据操作模块 DOM属性 详解
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特性部分已经讲过了，这里不说了。
