一.使用jQuery获取和设置HTML的属性。
使用attr()方法可以获取和设置匹配的HTML元素的指定属性,
获取HTML元素属性的语法如下:
Val=jQuery对象.attr(属性名);
attr()方法的返回值就是HTML的属性值。
设置HTML元素属性的语法如下:
jQuery对象.attr(属性名,属性值);
多个属性时,attr({属性名1:属性值1,属性名2:属性值2})
以键/值对的形式设置匹配元素的一组属性。例如,可以使用下面的代码设置所有的img元素的src.title.alt属性。
$("img").attr({
src:"/images/hat.gif",
扫描二维码关注公众号,回复:
4615655 查看本文章
title:"jquery",
alt:"jquery logo"
});
使用attr()方法的实例:(在新窗口打开网页)
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery(1).js"></script>
<script>
$(document).ready(function(){
$("a").attr("target","_blank");
});
</script>
</head>
<body>
<a href="http://www.sina.com.cn">新浪</a>
<a href="http://www.souhu.com">搜狐</a>
</body>
</html>
二.使用jQuery删除HTML的属性。
语法: jquery对象.removeAttr(属性名)
例:removeAttr("disabled") 删除了表单不可编辑的disabled属性,使表单可编辑了。
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery(1).js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).next().removeAttr("disabled").focus().val("现在可以编辑了");
});
});
</script>
</head>
<body>
<button>启用</button>
<input type="text" disabled="disabled" value="现在不能编辑"/>
</body>
</html>
removeAttr()和remove()的区别:
removeAttr()移除属性,remove()移除属性的内容。
三.使用jQuery在网页中添加追加内容
1.向HTML元素追加内容
调用append()向HTML元素追加内容.
语法:jquery对象.append(追加内容)
例,使用append()方法向p元素中添加文本和向ol元素中添加列表项的实例。
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery(1).js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").append("你好明天");
$("ol").append("<li>明天</li>"); //注意<li> </li>
});
});
</script>
</head>
<body>
<button>追加</button>
<p>我想说:</p>
<ol>
<li>我</li>
<li>爱</li>
<li>你</li>
<li>你好</li>
</ol>
</body>
</html>
2.在HTML元素的前面插入内容
语法: jquery对象.before(追加内容)
3.在HTML元素的后面插入内容
语法: jquery对象.after(追加内容)
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery(1).js"></script>
<script>
$(document).ready(function(){
$("#wg").click(function(){
$("img").before("<b>hello</b>");
});
$("#th").click(function(){
$("img").after("<b>jquery</b>");
});
});
</script>
</head>
<body>
<img src="hoeel.jpg"><br>
<button id="wg">在前面插入内容</button>
<button id="th">在后面插入内容</button>
</body>
</html>