jquery获取自定义属性(attr和prop)实例介绍


Posted in Javascript onApril 21, 2013

$("form").attr("check"); $("form").prop("check"); 两种都可以,不过新版jquery推荐第二种,两个在其他方面都差不多,我发现的唯一不同就是在checkbox上的时候,需要用prop,不然IE浏览器会不兼容

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<scripttype="text/javascript"src="/js/jq1.3.2.js"></script> 
</head> 
<body> 
<divlang="rrery"> </div> 
<divdata-url="rrery"> </div> 
<divdata-url="rrrrrrrrrrrrrrttttttttttttttttttttttgggggggggggggggggggggg"> </div> 
<divdata-url="rrrrrrrrrrrrrrrrrrrrrrrrrrttttttttttttttttt777777777777777777777777777777777778888888888455rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrtttttttttttttttttttttttttttt777777777777777777777777777777777778888888888888"> </div> 
</body> 
</html> 
<script> 
// var J = $("div[lang]").get(); 
// alert($("[data-url]:eq(2)").attr("data-url")); 
$("[data-url]").each(function () { 
alert($(this).attr("data-url")); }); 
// $("[data-url]").each(function () { 
// alert($(this).prop("data-url")); // }); 
</script>

附:jquery attr()方法jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式。

1. attr(属性名       //获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined )

2. attr(属性名, 属性值)   //设置属性的值 (为所有匹配的元素设置一个属性值。)

3. attr(属性名,函数值    //设置属性的函数值  (为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。)

4.attr(properties)    //给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)

示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery中attr()方法</title> 
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script> 
<style> 
p{color:red} 
li{color:blue;} 
.lili{font-weight:bold;color:red;} #lili{font-weight:bold;color:red;} 
</style> 
</head> 
<body> 
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p> 
<ul> 
<li title="苹果汁">苹果</li> 
<li title="橘子汁" alt="123">橘子</li> 
<li title="菠萝汁">菠萝</li> 
</ul> 
<script> 
... 
</script> 
</body> 
<html>

1.attr(name)//获取属性的值

1.1使用attr(name)获取title值:

<script> 
alert($("ul li:eq(1)").attr("title")); 
</script>

结果:
jquery获取自定义属性(attr和prop)实例介绍

1.2使用attr(name)获取alt值:

<script> 
alert($("ul li:eq(1)").attr("alt")); 
</script>

结果:
jquery获取自定义属性(attr和prop)实例介绍

2. attr(name,value)   //设置属性的值


2.1使用attr(name,value)修改title值为:不吃橘子
<script> 
$("ul li:eq(1)").attr("title","不吃橘子"); 
alert($("ul li:eq(1)").attr("title")); 
</script>

结果:
jquery获取自定义属性(attr和prop)实例介绍

3. attr(name,fn)  //设置属性的函数值

3.1把alt属性的值设置为title属性的值。
<script> 
$("ul li:eq(1)").attr("title",function(){ return this.alt}); 
alert($("ul li:eq(1)").attr("title")); 
</script>

结果:
jquery获取自定义属性(attr和prop)实例介绍

4.attr(properties)  //将一个“名/值”形式的对象设置为所有匹配元素的属性


4.1获取<ul>里第2个<li>设置title和alt属性。
<script> 
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"}); 
alert($("ul li:eq(1)").attr("title")); 
alert($("ul li:eq(1)").attr("alt")); 
</script>

结果:
jquery获取自定义属性(attr和prop)实例介绍jquery获取自定义属性(attr和prop)实例介绍

4.2获取<ul>里第2个<li>设置class。

<script> 
$("ul li:eq(1)").attr({className:"lili"}); 
</script>

结果:
jquery获取自定义属性(attr和prop)实例介绍

4.3获取<ul>里第2个<li>设置id。

<script> 
$("ul li:eq(1)").attr({id:"lili"}); 
</script>

结果:jquery获取自定义属性(attr和prop)实例介绍

4.4获取<ul>里第2个<li>设置style。

<script> 
$("ul li:eq(1)").attr({style:"color:red"}); 
</script>

结果:jquery获取自定义属性(attr和prop)实例介绍

在li中添加alt是错误的,它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。在这里为了很详细说明attr()方法,没有合适的属性,所有用了alt进行举例,只供学习参考attr()方法用法。
在此说明下alt和tite的区别。
alt:这是用以描述图形的文字,当图片无法显示时,这些文字会替代图片而被显示。当鼠标移至图片上该些文字亦会显示。
title:是鼠标放上去之后,会显示出来的文字。

那么怎么删除属性呢?

jquery中删除属性的关键词是: removeAttr 注意A是大写的. 看看怎么用的:

同样是用法一中的html代码, 我想删掉li的title属性, 那么就这样:

<script> 
$("ul li:eq(1)").removeAttr ("title"); 
</script>

就这么简单, attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了。

那么是否有跟attr()相似的属性呢?
jquery中val()与之类似,
$(this).val();获取某个元素节点的value值,相当于$(this).attr("value");
$(this).val(value);设置某个元素节点的value值,相当于$(this).attr("value",value);

Javascript 相关文章推荐
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
js实现无缝滚动图
Feb 22 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 #Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 #Javascript
jQuery获取注册信息并提示实现代码
Apr 21 #Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 #Javascript
jQuery模拟超链接点击效果代码
Apr 21 #Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 #Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 #Javascript
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
yii分页组件用法实例分析
2015/12/28 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
js评分组件使用详解
2017/06/06 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
javascript实现数字时钟效果
2021/02/06 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Python下singleton模式的实现方法
2014/07/16 Python
Python中http请求方法库汇总
2016/01/06 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
django rest framework serializers序列化实例
2020/05/13 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
2014年乡镇妇联工作总结
2014/12/02 职场文书
公司感谢信范文
2015/01/22 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
关于 Python json中load和loads区别
2021/11/07 Python