Jquery attr()方法 属性赋值和属性获取详解


Posted in Javascript onApril 15, 2016

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>

结果:   显示 橘子汁

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

<script>

alert($("ul li:eq(1)").attr("alt"));

</script>

结果:

显示123

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>

结果:

显示不吃橘子

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>

结果:

显示123

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>

结果:

显示2个,不喝橘子汁   不是123

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

<script>

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

</script>

结果:

<li title="苹果汁">苹果</li>

<li class="lili" alt="123" title="橘子汁">橘子</li>

<li title="菠萝汁">菠萝</li>

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

<script>

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

</script>

结果:

<li title="苹果汁">苹果</li>

<li class="lili" alt="123" title="橘子汁">橘子</li>

<li title="菠萝汁">菠萝</li>

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

<script>

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

</script>

结果:

<li title="苹果汁">苹果</li>

<li class="lili" alt="123" title="橘子汁" style="color:red">橘子</li>

<li title="菠萝汁">菠萝</li>

在 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);

以上这篇Jquery attr()方法 属性赋值和属性获取详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 #Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 #Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 #Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 #Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 #Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 #Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 #Javascript
You might like
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
javascript学习网址备忘
2007/05/29 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
《狼》教学反思
2014/03/02 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
捐书仪式主持词
2015/07/04 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS