jquery的属性操作模块总共有4个部分，本篇说一下第2个部分:dom属性部分，用于修改dom元素的属性的(属性和特性是不一样的，一般将property翻译为属性，attribute翻译为特性)
dom属性的静态方法接口如下:
·$.prop(elem,name,value) ;传入第三个参数表示设置elem元素的name属性值为value
·$.prop(elem,name,) ;第三个参数为传入或者设置为undefined则表示获取elem的name属性
jquery/$ 实例方法(可以通过jquery实例调用的):
writer by:大沙漠 qq:22969969
.prop(obj) ;参数1是对象时
.prop(name) ;参数1是字符串时，参数2未指定或者设置为undefined时,表示获取第一个匹配元素属性为name的值
.prop(name,value) ;为每个匹配元素的谁能够设置一个值
举个栗子:
我要评论<!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特性部分已经讲过了，这里不说了。
如对本文有疑问， 点击进行留言回复！！
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法（不用jQuery）
网友评论