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 load方法用法集锦
Dec 06 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
javascript cookie的简单应用
Feb 24 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 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学习笔记之二
2011/01/17 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
js获取select标签选中值的两种方式
2014/01/09 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
JS继承用法实例分析
2015/02/05 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
关于Js中new操作符的作用详解
2021/02/21 Javascript
分享6个隐藏的python功能
2017/12/07 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
python感知机实现代码
2019/01/18 Python
实例详解Python模块decimal
2019/06/26 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
会计与审计专业大专生求职信
2013/10/03 职场文书
自我评价范文分享
2014/01/04 职场文书
退休感言
2014/01/28 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
体育教师教学随笔
2015/08/15 职场文书
中学音乐课教学反思
2016/02/18 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle