在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中,用一个attr()就可以全部搞定了,赞一个先 ^^

jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式。

1. attr(属性名       //获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined )

2. attr(属性名, 属性值)   //设置属性的值 (为所有匹配的元素设置一个属性值。)

3. attr(属性名,函数值    //设置属性的函数值  (为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。)

4.attr(properties)    //给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)

html代码结构:

<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
   <li title="苹果汁">苹果</li>
   <li title="橘子汁" value="123">橘子</li>
   <li title="菠萝汁">菠萝</li>
</ul>

1.attr(name)//获取属性的值

1.1 使用attr(name)获取title值:

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

结果:橘子汁

 

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

<script>
alert($("ul li:eq(1)").attr("value"));
</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 把value属性的值设置设给title属性。
<script>
$("ul li:eq(1)").attr("title",function(){ return this.value});
alert($("ul li:eq(1)").attr("title"));
</script>

结果:123

4.attr(properties)  //将一个“名/值”形式的对象设置为所有匹配元素的属性

4.1 获取<ul>里第2个<li>设置title和value属性。
<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",value:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("value"));
</script>

结果:不喝橘子汁  不是123

4.2 获取<ul>里第2个<li>设置class。
<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

结果:第二个li的html:<li class="lili" title="橘子汁" value="123">橘子</li>

4.3 获取<ul>里第2个<li>设置id。
<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

结果:第二个li的html:<li id="lili" title="橘子汁" value="123">橘子</li>

4.4 获取<ul>里第2个<li>设置style。
<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

那么怎么删除属性呢?

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>

就这么简单, attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了。

jquery attr的属性的更多相关文章

  1. jQuery attr removeAttr 属性操作

    jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...

  2. Jquery attr()方法 属性赋值和属性获取

    jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr(属性名 ...

  3. jquery attr()方法 添加,修改,获取对象的属性值。

    jquery attr()方法 添加,修改,获取对象的属性值. jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到 ...

  4. jquery attr方法和prop方法获取input的checked属性问题

    jquery attr方法和prop方法获取input的checked属性问题   问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法 ...

  5. [Web 前端 ] Jquery attr()方法 获取或修改 对象的属性值

    cp from : https://blog.csdn.net/gf771115/article/details/18086707 jquery中用attr()方法来获取和设置元素属性,attr是at ...

  6. jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...

  7. jQuery原生框架-----------------属性操作

    // 添加一个处理兼容获取样式的静态方法jQuery.getStyle = function( dom, styleName ) { // dom不是dom,styleName不是字符串,直接打走 i ...

  8. jquery对标签属性操作

    jquery中添加属性和删除属性: $("#2args").attr("disabled",'disabled'); $("#2args") ...

  9. 使用jQuery设置disabled属性与移除disabled属性

    Readonly只针对input和textarea有效,而disabled对于所有的表单元素都有效,下面为大家介绍下使用jQuery设置disabled属性   表单中readOnly和disable ...

随机推荐

  1. bzoj4031

    4031: [HEOI2015]小Z的房间 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 823  Solved: 407[Submit][Statu ...

  2. 虚拟机安装hadoop

    1.用VMware建立两台虚拟机(Centos6.5)系统,并设立主机名为node1与node2 2.设置虚拟机网络两台都是设置为如图: 3.修改两台虚拟机的/etc/hosts的文件为 (其中192 ...

  3. Vue解决安卓4.4不兼容的问题

    1.npm安装 npm install babel-polyfillnpm install es6-promise package.json中会出现 "babel-polyfill" ...

  4. Application 效能分析有妙招 — 使用 perf 走天下(转载)

    转载:http://tech.mozilla.com.tw/posts/1803/application-%E6%95%88%E8%83%BD%E5%88%86%E6%9E%90-%E4%BD%BF% ...

  5. 真正认识 realloc 的工作方式(转载)

    转自:http://www.cnblogs.com/ren54/archive/2008/11/20/1337545.html realloc 用过很多次了.无非就是将已经存在的一块内存扩大. cha ...

  6. IE浏览器下错误,不能执行已释放script的代码

    错误提示: 错误原因: 我使用layui打开子页面,用到了父页面中的一个全局变量(我用的数组),子页面关闭后,使用该数组方法(如:arr.join(",")),便提示此错误 我的解 ...

  7. bzoj 1180: [CROATIAN2009]OTOCI【LCT】

    一道几乎是板子的LCT,但是沉迷数学很久时候突然1A了这道题还是挺开心的 #include<iostream> #include<cstdio> using namespace ...

  8. ACM_送气球(规律题)

    送气球 Time Limit: 2000/1000ms (Java/Others) Problem Description: 为了奖励近段时间辛苦刷题的ACMer,会长决定给正在机房刷题的他们送气球. ...

  9. magento 用程序生成优惠劵码

    参考自http://fragmentedthought.com/fragments/programatically-creating-sales-rule-coupon-code 上面的代码只能生成C ...

  10. get和post中文乱码原理相关博客

    博客一:  http://blog.csdn.net/saygoodbyetoyou/article/details/16834395 博客二: http://www.jb51.net/article ...