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 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP实现的简单缓存类
2015/07/29 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jquery自定义表格样式
2015/11/23 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python实现的快速排序算法详解
2017/08/01 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
Python模块WSGI使用详解
2018/02/02 Python
机器学习实战之knn算法pandas
2019/06/22 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
某同学的自我鉴定范文
2013/12/26 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
见习报告的格式
2014/11/04 职场文书
儿园租房协议书范本
2014/12/02 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
就业推荐表院系意见
2015/06/05 职场文书
消费者投诉书范文
2015/07/02 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python