Jquery 属性attr()用法教程

发布时间:2020-02-18编辑:脚本学堂
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中,用一个attr()即可搞定。

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>

实例:点击button时执行
 

复制代码 代码示例:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").removeAttr("style");
  });
});
</script>
</head>
<body>
<h1>脚本学堂</h1>
<p style="font-size:14px;color:red">脚本学堂-脚本学堂</p>
<p>这是另一个段落。</p>
<button>删除所有 p 元素的 style 属性</button>
</body>
</html>
 

attr是原生js中getAttribute简写, 而removeAttr为removeAttribute的简写。