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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
JS实现音乐钢琴特效
Jan 06 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中include文件变量作用域
2015/06/18 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python创建子类的方法分析
2019/11/28 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
编写python代码实现简单抽奖器
2020/10/20 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
车间安全生产标语
2014/06/06 职场文书
高效课堂标语
2014/06/26 职场文书
先进事迹演讲稿
2014/09/01 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
自我工作评价范文
2015/03/06 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL