0
值接受函数的形势
$dnf.prop("checked",function(){
return true;
});
不传值则意味着取值
$dnf.prop("checked");
在Jquery中几乎是通用的
1
jQuery.fn.extend
对Jq封装的DOM元素可使用方法、属性的扩展
jQuery.extend
可以直接使用$调用
可以在源码中所搜这两个关键字，你会看到很多熟悉的名字，而每一个jQuery.fn.extend几乎都对应着一个jQuery.extend，这属于封装的层层抽调。
比如 $.prop( elem, name, value)
2
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="test.js"></script>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="checkbox" id="dnf">
</body>
</html>
test.js
window.onload = function(){
var $dnf = $("#dnf");
debugger
$dnf.prop("checked",true);
}
prop的取值类似于$dnf[0]['checked']
赋值类似于$dnf[0]['checked'] = true
让我们看看源码
function( elem, name, value ) {
var ret, hooks,
nType = elem.nodeType;
//nType 存储节点类型 不处理文本、注释、和属性节点，在我看来这个判断有些多余，如果它发出警告似乎更有意义
if ( nType === 3 || nType === 8 || nType === 2 ) {
return;
}
//当不是元素节点或者不是xml文档时
if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
//propFix和prop在同一扩展里 用于映射些特殊的属性名
name = jQuery.propFix[ name ] || name;
//propHooks和prop在同一扩展里 用于获取和设置特殊的属性值
hooks = jQuery.propHooks[ name ];
}
if ( value !== undefined ) {
//赋值
if ( hooks && "set" in hooks &&
( ret = hooks.set( elem, value, name ) ) !== undefined ) {
//特殊属性赋值
return ret;
}
/*简单属性赋值 已下为一种简写方式 相当于
elem[ name ] = value；
return elem[ name ]；注意这里和返回value是有区别的
*/
return ( elem[ name ] = value );
}
if ( hooks && "get" in hooks && ( ret = hooks.get( elem, name ) ) !== null ) {
//特殊取值
return ret;
}
//普通取值
return elem[ name ];
},
上述的编码逻辑我有些看法，取值赋值、特殊取值和非特殊取值是互斥关系的，因该用if else这种方式区分开。
显然，jquery采用了复杂=>简易的方式，符合逻辑就中断后续的处理，在我看来，这样并不友好，倒是可以尝试！
propFix
初始化后propFix有两种类型的映射
"for": "htmlFor",
"class": "className"
cellpadding:"cellPadding"
Jq还挺贴心的
propHooks
只对tabindex值的获取做了特殊处理。
这里要称赞Jq的封装艺术了，可以从prop源码中看到，作者并没有因为上述原因就忽略该有的流程。
propHooks: {
tabIndex: {
get: function( elem ) {
// Support: IE <=9 - 11 only
// elem.tabIndex doesn't always return the
// correct value when it hasn't been explicitly set
// https://web.archive.org/web/20141116233347/http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
// Use proper attribute retrieval(#12072)
//当没有设置值时，tabindex并不能返回正确的值
//通过getAttribute查找
var tabindex = jQuery.find.attr( elem, "tabindex" );
if ( tabindex ) {
//将tabindex转换为10进制数
return parseInt( tabindex, 10 );
}
if (
//rfocusable 是一个用于检测是否是能获得焦点元素的正则表达式 rclickable是一个检测是否是能点击元素的正则表达式
rfocusable.test( elem.nodeName ) ||
rclickable.test( elem.nodeName ) &&
elem.href
) {
return 0;
}
return -1;
}
}
}
网友评论