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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
JavaScript组合继承详解
Nov 07 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
php 动态多文件上传
2009/01/18 PHP
php 操作调试的方法
2012/07/12 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
asp批量修改记录的代码
2008/06/25 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
Python与Redis的连接教程
2015/04/22 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
详解Django admin高级用法
2019/11/06 Python
Python reduce函数作用及实例解析
2020/05/08 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
村干部承诺书
2014/03/28 职场文书
小区文明倡议书
2014/05/16 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
调任通知
2015/04/21 职场文书
行政复议决定书
2015/06/24 职场文书
2016年清明节寄语
2015/12/04 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
python3 sqlite3限制条件查询的操作
2021/04/07 Python
基于Python的EasyGUI学习实践
2021/05/07 Python
Javascript webpack动态import
2022/04/19 Javascript
MySql数据库 查询时间序列间隔
2022/05/11 MySQL