jQuery 特性操作详解及实例代码


Posted in Javascript onSeptember 29, 2016

前面的话

每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。操作特性的DOM方法主要有3个:getAttribute()方法、setAttribute()方法和removeAttribute()方法,而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题。本文将介绍jQuery中的特性操作

获取特性

jQuery中用attr()方法来获取和设置特性,attr是attribute(特性)的缩写,在jQuery DOM操作中会经常用到attr()方法

attr(attributeName)

attr(传入特性名):获取特性的值,相当于DOM中的getAttribute()

<div id="test"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
console.log(test.getAttribute('id'));//'test'  
console.log($('#test').attr('id'));//'test'
</script>

[注意]attr()方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值,我们依靠jQuery的.each()或者.map()方法循环

<div class="test" id="ele1">元素一</div>
<div class="test" id="ele2">元素二</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
console.log($('.test').attr('id'));//'test'
$('.test').each(function(index) {
 console.log(index+":"+$(this).attr('id'));//'1:ele1 2:ele2'
});
</script>

prop()

属性(property)和特性(attribute)是不同的。属性是DOM节点的属性,而特性是HTML标签的特性

[注意]关于属性和特性的区别的详细信息移步至此

<div id="test" data="abc"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
test.data = 123;
//IE8-浏览器返回123,其他浏览器返回'abc'
console.log(test.getAttribute('data'))
console.log(test.data)//123
//IE8-浏览器返回123,其他浏览器返回'abc'
console.log($('#test').attr('data'))
console.log($('#test').prop('data'))//123
</script>

由上面代码可知,jQuery并没有解决低版本IE浏览器属性和特性混淆的问题

设置特性

设置特性虽然依然使用attr()方法,但却有3种方式

【1】attr(attributeName,value)

attr(特性名, 特性值):设置特性的值,相当于DOM中的setAttribute()

<div id="test"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
test.setAttribute('title','abc');
console.log(test.getAttribute('title'))//'abc'
$('#test').attr('title','123');  
console.log($('#test').attr('title'));//'123'
</script>

jQuery禁止改变一个<input>或<button>元素的type特性,会静默失败。因为IE8-不会允许改变<input>或者<button>元素的type特性,静默失败

<input id="test" type="text">
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
test.setAttribute('type','button');
$('#test').attr('type','button');  
</script>

【2】attr(attributes)

attr(attributes):给指定元素设置多个特性值,即{特性名一: “特性值一”,特性名二:“特性值二”,…}

当设置多个特性,包裹特性名的引号是可选的

<div id="test"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
test.setAttribute('title','abc');
test.setAttribute('a','abc');
console.log(test.getAttribute('title'))//'abc'
console.log(test.getAttribute('a'))//'abc'
$('#test').attr({
  title: '123',
  a: '123'
});  
console.log($('#test').attr('title'));//'123'
console.log($('#test').attr('a'));//'123'
</script>

[注意]设置样式名“class”特性时,必须使用引号。否则IE8-浏览器下会报错

<div id="test"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#test').attr({
  class: 'test'
});  
//IE8-浏览器会报错,其他浏览器输出'test'
console.log($('#test').attr('class'));
</script>

【3】attr(attributeName,function(index,attr))

attr(特性名,函数值):通过使用一个函数来设置属性,可以根据该元素上的其它属性值返回最终所需的属性值

函数中的index表示元素在匹配集合中的索引位置,html表示元素原来的HTML内容,this指向当前的元素,函数返回用来设置的值

<div class="test" id="ele1" title="元素">元素一</div>
<div class="test" id="ele2" title="元素" >元素二</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('.test').attr('title',function(index,attr){
  return attr + this.className +index
})
console.log($('#ele1').attr('title'));//元素test0
console.log($('#ele2').attr('title'));//元素test1
</script>

如果用javascript实现类似的效果,实际上就是字符串连接

[注意]IE8-浏览器不支持getElementsByClassName()方法

<div class="test" id="ele1" title="元素">元素一</div>
<div class="test" id="ele2" title="元素" >元素二</div>
<script>
var classTest = document.getElementsByClassName('test');
for(var i = 0; i < classTest.length; i++){
  classTest[i].title = classTest[i].title + classTest[i].className + i;
}
console.log(ele1.title);//元素test0
console.log(ele2.title);//元素test1
</script>

删除特性

removeAttr(attributeName)

removeAttr()方法使用原生的removeAttribute()函数,但是它的优点是可以直接在一个jQuery 对象上调用该方法,并且它解决了跨浏览器的特性名不同的问题

要移除的属性名从1.7版本开始,可以是一个空格分隔的属性列表

<div id="ele1" title="元素" data="value">元素</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
console.log($('#ele1').attr('title'));//'元素'
console.log($('#ele1').attr('data'));//'value'
$('#ele1').removeAttr('title data');
console.log($('#ele1').attr('title'));//undefined
console.log($('#ele1').attr('data'));//undefined
</script>

通过此文,希望大家能对jQuery 特性操作的知识掌握,谢谢大家对本站的支持!

Javascript 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
Vue-component全局注册实例
Sep 06 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
vue实现动态按钮功能
May 13 Javascript
JS中常用的正则表达式
Sep 29 #Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 #Javascript
js创建对象几种方式的优缺点对比
Sep 28 #Javascript
AngularJS表单验证中级篇(3)
Sep 28 #Javascript
微信公众号 客服接口的开发实例详解
Sep 28 #Javascript
jQuery解析XML 详解及方法总结
Sep 28 #Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 #Javascript
You might like
php三维数组去重(示例代码)
2013/11/26 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
解决laravel session失效的问题
2019/10/14 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
js实现查询商品案例
2020/07/22 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
python字符串string的内置方法实例详解
2018/05/14 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
英文自荐信
2013/12/19 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
小学班级标语口号大全
2015/12/26 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python