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 一个图片切换的插件
Oct 09 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
javascript实现下雨效果
Mar 27 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 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打印输出棋盘的实现方法
2014/12/23 PHP
php使用google地图应用实例
2014/12/31 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
详解Python文本操作相关模块
2017/06/22 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
python爬虫用mongodb的理由
2020/07/28 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
六年级学生期末评语
2014/12/26 职场文书
物业管理交接协议书
2016/03/24 职场文书
2019新员工心得体会
2019/06/25 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
原生JS实现飞机大战小游戏
2021/06/09 Javascript