在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()方法 添加,修改,获取对象的属性值。

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

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

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

  3. jquery attr方法获取input的checked属性问题

    1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase <input type="checkbox" id= ...

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

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

  5. jquery attr()方法获取input的checked属性问题

    问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性 ...

  6. js attribute 和 jquery attr 方法

    attribute 是原生js dom 对象上的一个属性,这个属性有很多子属性,比如 isId(判断属性是否是Id) , name (获取属性名称) , value (获取属性值),attribute ...

  7. jQuery attr方法修改onclick值

    了通过jQuery的attr修改onclick值. 代码: var js = "alert('B:' + this.id); return false;"; var newclic ...

  8. jQuery prop方法替代attr方法

    jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法.

  9. jQuery attr() 源码解读

    我们知道,$().attr()实质上是内部调用了jQuery.access方法,在调用时jQuery.attr作为回调传入.在通过种种判断(参看jQuery.access()方法)之后,取值和赋值最后 ...

随机推荐

  1. 关于ie11 的开发者工具

    win7旗舰系统64为,更新ie11: 新安装了ie11浏览器,安装以后发现原来可以正常使用的开发者工具不能使用,提示 Imposible use F12 Developer Tools (Excep ...

  2. WaitType:ASYNC_IO_COMPLETION

    项目组有一个数据库备份的Job运行异常,该Job将备份数据存储到remote server上,平时5个小时就能完成的备份操作,现在运行19个小时还没有完成,backup命令的Wait type是 AS ...

  3. DAC Usage3:Monitor Data-tier Applications

    If you deploy a DAC to a managed instance of the Database Engine, information about the deployed DAC ...

  4. YII 的源码分析(三)

    前面已经看完了启动一个yii程序所要经过的流程,以及渲染一个页面是怎么完成的.今天要分析的是yii是如何处理用户请求的.也就是控制和动作部分. 还是以helloworld为例演示这一过程.我们在地址栏 ...

  5. hibernate笔记--双向一对多映射方法

    前两节写了两个例子,分别是单向多对一的映射和单向一对多的映射,这一节继续以这个例子讲一下双向一对多的映射方法,如下图所示: 很多时候,我们既想从一对端获取多对端的信息,又想从多对端获取一对端的数据,这 ...

  6. ASP.NET或者 js方式实现文件夹多图片浏览的方式

    1.JS方式,限制大,而且图片名称如果不规则的话会获取不全. <html> <head> <style> img { max-width:1300px; } < ...

  7. 【原创】技术往事:改变世界的TCP/IP协议(珍贵多图、手机慎点)

    1.前言 作为应用层开发人员,接触最多的网络协议通常都是传输层的TCP(与之同处一层的另一个重要协议是UDP协议),但对于IP协议,对于应用程序员来说更多的印象还是IP地址这个东西,再往深一点也就很难 ...

  8. linux源码分析(五)-start_kernel

    前置:这里使用的linux版本是4.8,x86体系. local_irq_disable(); 这个函数是做了关闭中断操作.和后面的local_irq_enable相对应.说明启动的下面函数是不允许被 ...

  9. Debugging into .NET Core源代码的两种方式

    一.前言 .NET开源时间还不长,因为一直在做YOYOFx的关系,所似我常常有更深入的了解.NET Core和ASP.NET Core内容的需求,并且.NET Core平台与之前版本的变化太大,这也导 ...

  10. 使用Executor管理线程

    上一篇博客(第一个并发程序:定义任务和驱动任务)中,我们使用Thread对象启动线程,而java.util.concurrent包的Executor执行器提供了更好的管理Thread对象的方法,从而简 ...