jQurey最大的特点就是可以方便操作网页文档内的DOM元素，如获取某个元素、修改元素内容、创建新的元素等操作。
1、 元素内容的取值与赋值操作
元素的取值操作
jQurey有三个方法来获取DOM元素的内容，分别是text()、html()和val()。text()方法用于获取元素的文本内容；html()方法用于获取元素的HTML内容；val()方法用于获取表单元素的值，如input元素。
text()方法和html()方法的明显区别是text()只返回元素的文本内容，而html()方法返回的是将HTML 解析后的内容。val 返回的是表单的内容。
案例代码3（案例代码见unit4\case3.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#id_btn").click(function(){
// 获取id值为id_content的文本内容
$("#text_count").html($("#id_content").text())
// 获取id值为id_content的HTML内容
alert($("#id_content").html())
// 获取input元素的值
alert($("#username").val())
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<div id="id_content">
<p>我们家的后园有半亩空地。母亲说：“让它荒着怪可惜的，你们那么爱吃花生，就开辟出来种花生吧。”<p>
</div>
<form action="">
<p>姓名：<input type="text" id="username" maxlength="20" value="请输入您的姓名"/></p>
</form>
<p><input type="button" id="id_btn" value="元素取值操作"/></p>
<p><span id="text_count"></span></p>
</body>
<html>元素的赋值操作
元素赋值操作也是使用text()、html()和val()方法，当调用这些方法对元素进行赋值时需要传入一个参数，这个参数将作为值赋值给元素。
案例代码2（案例代码见unit5\case4.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#id_btn").click(function(){
// 修改元素的HTML内容
$("#id_content").html("<p id='id_para'>这是修改后的HTML内容</p>")
// 修改元素的文本内容
$("#id_para").text("文本内容被修改")
// 修改input元素的value
$("#username").val("张三")
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<div id="id_content">
<p>我们家的后园有半亩空地。母亲说：“让它荒着怪可惜的，你们那么爱吃花生，就开辟出来种花生吧。”<p>
</div>
<form action="">
<p>姓名：<input type="text" id="username" maxlength="20" value="请输入您的姓名"/></p>
</form>
<p><input type="button" id="id_btn" value="元素赋值操作"/></p>
<p><span id="text_count"></span></p>
</body>
<html>2、 元素属性的取值与赋值操作
jQuery也提供了针对元素属性的操作，获取和设置属性使用attr()方法，获取元素属性的attr()方法如下：
$(selector).attr(attribute)
selector是jQuery的选择器，选择器会返回与selector匹配的第一个元素，attribute是元素的属性名称。例如：要获取<a>元素的href属性，可以使用下面的语句：
$(“a”).attr(“href”)
语句会返回网页第一个<a>元素的href属性值。
设置元素属性时，attr()方法需要传入一个或多个(key,value)键值对，key是元素的属性名称，value是元素属性的值。使用方法如下：
$(selector).attr({key:value,……})例如设置<a>元素的href属性和title属性的语句如下：
$("a").attr({"href":"www.milihua.com",
"title":"编程训练营"})如果仅设置元素的一个属性值，一对“{}”大括号可以省略。
案例代码3（案例代码见unit5\case5.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#id_btn").click(function(){
//设置第一个a元素的href属性值和title属性值
$("a").attr({"href":"www.milihua.com",
"title":"编程训练营"})
$("a:eq(0)").text("编程训练营")
//获取input元素的value属性值
alert($("#id_btn").attr("value"))
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<a href="www.baidu.com">百度</a>
<a href="www.sohu.com">搜狐</a>
<p><input type="button" id="id_btn" value="元素属性操作"/></p>
</body>
<html>3、 添加或删除元素
jQuery也支持在页面中动态添加或删除元素，jQuery提供了多个方法在页面中添加或删除元素，常用的方法如下表所示：
案例代码4（案例代码见unit5\case6.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#id_add").click(function(){
// 在id值为id_content元素的尾部添加子元素
$("#id_content").append("<p>我们家的后园有半亩空地。</p>")
// 在id值为id_content元素的头部添加子元素
$("#id_content").prepend("<p>落花生</p>")
});
$("#id_del").click(function(){
// 移除id值为id_content元素
$("#id_content").remove()
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<div id = "id_content">
</div>
<p><input type="button" id="id_add" value="添加元素"/>
<input type="button" id="id_del" value="删除元素"/></p>
</body>
<html>4、 元素样式操作
样式的添加或删除
jQuery提供了addClass()方法用来向元素添加新的样式，同时也提供了removeClass()方法从元素删除一个或多个样式。
addClass()方法使用如下：
$(selector).addClass(class)
selector是选择器，class是样式名称，若需要添加多个样式，可以传入多个样式名称，每个样式名称用空格分隔。例如下面的代码向所有的p元素添加样式para：
$("p").addClass("para");removeClass()方法使用如下：
$(selector).removeClass(class)
selector是选择器，class是样式名称，若需要删除多个样式，可以传入多个样式名称，每个样式名称用空格分隔。例如下面的代码删除所有P元素的para样式：
$("p").removeClass(“para”)案例代码5（案例代码见unit5\case7.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#id_add").click(function(){
// 添加样式para到所有p元素
$("p").addClass("para")
});
$("#id_del").click(function(){
// 从p元素删除para样式
$("p").removeClass("para")
});
});
</script>
<style type="text/css">
.para{color:#cc6600;font-size:22px;}
</style>
</head>
<body>
<h3>JavaScript开发案例</h3>
<div id = "id_content">
<p>落花生</p>
<p>我们家的后园有半亩空地。</p>
</div>
<p><input type="button" id="id_add" value="添加样式"/>
<input type="button" id="id_del" value="删除样式"/></p>
</body>
<html>样式的切换
在网页元素的实际操作中，网页元素的样式切换可以给网页元素带来动态变化。例如按钮被按下时会显示凹陷样式，按钮正常时会显示凸起样式。
jQuery提供了toggleClass()方法来切换样式，toggleClass()方法使用如下：
$(selector).toggleClass(class,switch)
该方法检查每个元素中指定的样式，若元素不存在传入的样式，则添加样式，若元素已存在传入的样式，则删除样式，起到切换的效果。
参数class为添加或移除的样式名称，若需要添加或移除多个样式，每个样式名称用空格分隔。参数switch是可选参数，布尔类型，用于设置只添加或只删除样式。
案例代码6（案例代码见unit5\case8.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#id_change").click(function(){
// 切换所有P元素的样式
$("p").toggleClass("para")
});
});
</script>
<style type="text/css">
.para{color:#cc6600;font-size:22px;}
</style>
</head>
<body>
<h3>JavaScript开发案例</h3>
<div id = "id_content">
<p>落花生</p>
<p>我们家的后园有半亩空地。</p>
</div>
<p><input type="button" id="id_change" value="切换样式"/>
</body>
<html>样式属性的取值与赋值操作
jQuery 提供了css()方法用来获取或设置元素的一个或多个样式属性。要获取样式属性的值，使用方法如下：
$(selector).css(propertyname)
参数propertyname是样式属性名称。例如：要获取<p>元素样式的font-size属性，可以使用下面的语句：
$(“p”).css(“font-size”)
如果需要设置样式属性的值，可以使用下面的方法：
$(selector).css(propertyname,value)
参数propertyname是样式属性名称。例如：要设置<p>元素样式的font-size属性值为22px，可以使用下面的语句：
$(“p”).css(“font-size”,”22px”)
可以设置多个样式属性，设置多个样式属性的使用方法如下：
$(“p”).css(“font-size”:”22px”,”color”:”#ff00cc”,……)
每个样式属性是一个键值对，键值对之间使用逗号分隔。
案例代码7（案例代码见unit5\case9.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#id_get").click(function(){
// 获取div子元素p样式属性font-size值
alert($("div p").css("font-size"))
});
$("#id_set").click(function(){
// 设置div子元素p样式属性color值
$("div p").css("color","#ff00cc")
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<div id = "id_content">
<p style="font-size:22px;">我们家的后园有半亩空地。</p>
</div>
<p><input type="button" id="id_get" value="样式属性取值"/>
<input type="button" id="id_set" value="样式属性赋值"/></p>
</body>
<html>