8.5 jQuery HTML操作
学习目标
熟悉jQuery HTML操作。
使用jQuery可以方便动态修改网页中的内容信息或者修改网页内容展示结构，这主要用到了jQuery操作HTML元素的一些方法。包括改变HTML内容、添加修改HTML内容。
8.5.1 改变HTML内容
在jQuery操作中，用于动态改变HTML内容的函数就是html()。
语法:$(selector).html(content)
比如要通过单击一个按钮来改变网页中所有<p>元素中显示的内容，就可以使用如下代码：$("p").html("<b>好好学习!</b>")，而且可以看出其中也可以加入HTML标记效果。接下来给出一个例子Test05.aspx的完整代码。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test05.aspx.cs" Inherits="Test05" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学习jquery应用</title>
<script type="text/javascript" src="JS/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#b1").click(function () {
$("p").html("<b>Welcome to Beijing</b>");
});
});
</script>
<style type="text/css">
* {padding: 0px;margin: 0px;}
body{font-size: 14px; font-family: 微软雅黑,宋体;
color: #333333; line-height: 25px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="padding: 20px;">
<h3>测试jquery操作中html()函数</h3>
<p>北京欢迎您</p>
<p>乐观,是一种生活态度</p>
<input type="button" id="b1" name="b1" value="单击一下" />
</div>
</form>
</body>
</html>
Test05.aspx首次运行效果如图8-5所示。
图8-5 网页Test05.aspx首次运行效果
单击图8-5中的“单击一下”按钮，页面运行效果如图8-6所示。
图8-6 单击页面上的“单击一下”按钮显示效果
8.5.2 添加HTML内容
1．append()函数
语法格式：$(selector).append(content)
函数功能：append()函数向所匹配的HTML元素内部最后面追加内容。用法类似于html()函数，直接把Test05.aspx中的jQuery代码中的html()函数修改为append()函数，操作一下就可以看到效果。
举例：$("#box").append("好好学习!");
2．prepend()函数
语法格式：$(selector).prepend(content)
函数功能：prepend()函数向所匹配的HTML元素内部最前面插入内容。用法类似于html()函数，直接把Test05.aspx中的jQuery代码中的html()函数修改为prepend()函数，操作一下就可以看到效果。
举例：$("#box").prepend("好好学习!");
3．after()函数
语法格式：$(selector).after(content)
函数功能：after()函数在所有匹配的元素之后插入HTML内容。用法类似于html()函数，直接把Test05.aspx中的jQuery代码中的html()函数修改为after()函数，操作一下就可以看到效果。
举例：$("#box").after("好好学习!");
4．before()函数
语法格式：$(selector).before(content)
函数功能：before()函数在所有匹配的元素之前插入HTML内容。用法类似于html()函数，直接把Test05.aspx中的jQuery代码中的html()函数修改为before()函数，操作一下就可以看到效果。
举例：$("#box").before("好好学习!");
8.5.3 jQuery HTML操作总结
jQuery HTML操作总结如表8-3所示。
表8-3 jQuery HTML操作函数
在线客服
共有条评论 网友评论