jQuery属性操作(二)
挂载到$上的几个属性操作方法分析,发现属性操作用到了sizzle封装的方法
attr: function( elem, name, value ) {
var hooks, ret,
nType = elem.nodeType;
// 如果elem不存在,或者是文本节点、注释或者是属性节点,直接返回。
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
return;
}
// 当不支持getAtrribute方法时(估计是处理浏览器兼容问题)
if ( typeof elem.getAttribute === core_strundefined ) {
// 交给prop处理
return jQuery.prop( elem, name, value );
}
// All attributes are lowercase
// Grab necessary hook if one is defined
// 当elem类型不是元素时或者elem不是XML文档时
if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
// 将属性名转换成小写字母
name = name.toLowerCase();
// 根据属性名得到对应的hooks,竟然依赖Sizzle,汗。。。
hooks = jQuery.attrHooks[ name ] ||
( jQuery.expr.match.bool.test( name ) ? boolHook : nodeHook );
}
// 如果有第三个参数(value)
if ( value !== undefined ) {
// 如果第三个参数是null
if ( value === null ) {
// 清空elem上属性为name的属性
jQuery.removeAttr( elem, name );
// 如果hooks存在,并且hooks存在set方法,执行hooks的set方法将结果赋值给ret,如果ret不是undefined,返回ret
} else if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
return ret;
// 如果是支持setAttribute的浏览器,直接调用setAttribute方法,并将value转换成字符串
} else {
elem.setAttribute( name, value + "" );
return value;
}
// 如果没有value,并且hooks存在,并且hooks有get方法,调用get方法获取到元素上的name属性并返回属性值
} else if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
return ret;
// 此处处理没有value,但不需要hooks处理的情况。
} else {
// jQuery.find == Sizzle。调用sizzle封装的方法获取元素属性值
ret = jQuery.find.attr( elem, name );
// 返回ret
return ret == null ?
undefined :
ret;
}
},
// 删除属性
removeAttr: function( elem, value ) {
var name, propName,
i = 0,
// value可以是一个空格间隔的字符串,通过正则处理,将value按空格分隔形成数组,赋值给attrNames。
attrNames = value && value.match( core_rnotwhite );
// 如果attrNames数组不为空,并且elem属于元素节点
if ( attrNames && elem.nodeType === 1 ) {
// 遍历attrNames数组
while ( (name = attrNames[i++]) ) {
// 如果该属性存在于propFix对象中,则将对象中对应的值赋值给propName,否则直接将name赋值给propName(propFix中做了一些替换)
propName = jQuery.propFix[ name ] || name;
// 如果是布尔属性(猜测可能是处理例如checked这样的属性的)
if ( jQuery.expr.match.bool.test( name ) ) {
// 将其值设置为false
elem[ propName ] = false;
}
// 调用elem的removeAttribute方法,删除那么属性
elem.removeAttribute( name );
}
}
},
jQuery属性操作(二)的更多相关文章
- jquery——属性操作、特殊效果
1. attr().prop() 取出或者设置某个属性的值 <!DOCTYPE html> <html lang="en"> <head> &l ...
- Jquery属性操作(入门二)
********JQuery属性相关的操作******** 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个 ...
- jQuery源代码学习之八——jQuery属性操作模块
一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...
- python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax
一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...
- web前端----jQuery属性操作
知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...
- 前端之JQuery:JQuery属性操作
Jquery2--属性相关的操作 知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性 ...
- jQuery属性操作
jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...
- jQuery 属性操作和CSS 操作
如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...
- jQuery属性操作(四)
通过阅读jQuery为属性操作封装的基本方法和为处理兼容性问题提供的hooks,发现jQuery在属性操作方面并没有做过多的设计,只是处理一下兼容性问题,然后调用基础的DOM操作方法.以下是对JQue ...
随机推荐
- Lemon OA第3篇:核心功能
对Lemon OA系统的核心功能进行梳理,分别介绍说明如下文. Portal页面 还是从用户主页开始说起: OA核心的功能就是流程,启动流程,办理流程,查看历史,3个常用功能都罗列在用户主页上,方便用 ...
- Linux 限制用户远程SSH登录
通过/etc/hosts.allow和/etc/hosts.deny两个配置文件远程限制某个IP和某段IP地址允许或拒绝访问Linux服务器 SSH.FTP.telnet等服务,其中/etc/host ...
- [原创]RX801SJ 实时时钟RTC调试纪要 : 时钟输出设置
利用USB转I2C/SPI/UART板进行通信测试 1.RX8010SJ的I2C通信地址定义如下: 设备读取地址:0X65 设备写入地址:0X64 2.USB2ish0转接板操作界面如下: 3.参 ...
- CSS3和jQuery实现的自定义美化Checkbox和Radiobox
现在经常可以在网络上看到一些非常奇特的表单元素,例如Checkbox复选框和Radiobox单选框,浏览器默认的样式确实是太丑了,而且更让人蛋疼的是各个浏览器的样式还不统一,考虑到现在越来越多的用户使 ...
- springboot - Constructor、@Autowired、@PostConstruct分析
1.Constructor 构造方法 2.@Autowired 依赖注入 3.@PostConstruct 在依赖注入完成后被自动调用 4. 三者的顺序: 从依赖注入的字面意思就可以知道,要将对象p注 ...
- unity3d Matrix4x4列为主序
unity3d的矩阵一直用,但是之前都是测试着用的,效果虽然正确,但是一直没搞清楚它是行矩阵还是列矩阵 今天测试了下 Matrix4x4 mat4 = Matrix4x4.Perspective(30 ...
- css3实现小箭头,各种图形
转:http://blog.csdn.net/tangtang5963/article/details/51490107 https://segmentfault.com/a/119000000278 ...
- 使用System.Web.Optimization对CSS和JS文件合并压缩
在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.A ...
- mysql中json_replace函数的使用?通过json_replace对json对象的值进行替换
需求描述: 在看mysql中关于json的内容,通过json_replace函数可以实现对json值的替换, 在此记录下. 操作过程: 1.查看带有json数据类型的表 mysql> selec ...
- Android系统自带样式(android:theme)
Theme.Dialog : (图1)Activity显示为对话框模式 Theme.NoTitleBar : (图2)不显示应用程序标题栏 Theme.NoTitleBar.Fullscreen : ...