使用jQuery操作HTML元素(二)

一.使用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>

猜你喜欢

转载自blog.csdn.net/qq_38835140/article/details/84586168
今日推荐