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>

渲染如下:

jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

我们点击设置值按钮值就会变为555了:

jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

然后点击获取值,就会获输入框这个DOM对象的value值:

jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

源码分析


$.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特性部分已经讲过了,这里不说了。

上一篇:C++变参数模板和...操作符


下一篇:jquery中的$.ajax()的源码分析