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 timers计时器简单应用说明
Oct 28 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php Undefined index的问题
2009/06/01 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
PHP运行模式的深入理解
2013/06/03 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python修改操作系统时间的方法
2015/05/18 Python
Python操作MongoDB详解及实例
2017/05/18 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
印度网上药店:1mg
2017/10/13 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
《夏夜多美》教学反思
2014/02/17 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
mysql部分操作
2021/04/05 MySQL