在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的简写。