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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
js charAt的使用示例
Feb 18 Javascript
Javascript模块化编程详解
Dec 01 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 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中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
JS实现复制功能
2017/03/01 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
Python实现通讯录功能
2018/02/22 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
详解python while 函数及while和for的区别
2018/09/07 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
运动会入场词100字
2014/02/06 职场文书
家长评语和期望
2014/02/10 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Echarts如何重新渲染实例详解
2022/05/30 Javascript