一、对元素内容和值进行操作
元素的内容是指定义元素的起始标记和结束标记之间的内容,可分为文本内容和HTML内容。
<div>
<p>测试内容</p>
</div>
div元素的文本内容是“测试内容”,文本内容是不包含元素的子元素,质保函元素的文本内容。而“<p>测试内容</p>”就是元素的HTML内容,HTML内容不仅包括元素的文本内容,还包括元素的子元素。
1、对元素内容操作
(1)对文本内容操作
text()用于获取全部匹配元素的文本内容,text(val)用于设置全部匹配元素的文本内容。text()方法取得的是所有匹配元素包含的文本组合起来的文本内容,这个方法也对XML文件有效,可以用text()方法解析XML文档元素的文本内容。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对值和内容进行操作</title>
</head>
<body>
<div>
<span id="clock">程潇小可爱</span>
</div>
<script src="jquery.js"></script>
<script>
alert($("div").text());
</script>
</body>
</html>
运行结果:
(2)对HTML内容操作
html()用于获取第一个匹配元素的HTML内容,text(val)用于设置全部匹配元素的HTML内容。均不能用于XML文档,但是可用于XHTML文档。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对值和内容进行操作</title>
</head>
<body>
<div id="div1">
<span id="clock">程潇小可爱</span>
</div>
<br>
<div id="div2">
<span id="clock2">程潇大可爱</span>
</div>
<script src="jquery.js"></script>
<script>
alert($("#div1").text("<span style='color: yellow'>text2()获取</span>"));
alert($("#div2").html("<span style='color: yellow'>html()获取</span>"));
alert($("#div1").text() + $("#div2").html());
</script>
</body>
</html>
2、对元素值操作
val():用于获取第一个匹配元素的当前值。
val(val): 用于匹配所有匹配元素的值。
val(arrVal): 用于为check、select和radio等元素进行设置值,参数为字符串数组。
示例:
<select name="like" id="like" size="2" multiple="multiple">
<option value="北京">北京</option>
<option value="上海" selected>上海</option>
<option value="广州">广州</option>
<option value="深圳"selected>深圳</option>
</select>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("select").val(["北京","广州"]);
alert($("select").val());
});
</script>
运行结果:
二、对DOM节点进行操作
1、查找节点(选择器查找)
2、创建节点
(1)创建元素(2)将新元素插入到文档中(即父元素中)
示例:
<script>
$(document).ready(function () {
var $txtP = $("<p><span style='color: yellow'>程潇</span></p>")
$("body").append($txtP);
});
</script>
3、插入节点(创建节点时使用append()方法将节点添加到指定元素)
(1)在元素内部插入:在元素内部插入新的元素和内容。
append():为所选中的元素内部追加内容
appendTo():将所选中元素添加到另一个元素的元素集合中
prepend():在所选中元素的内部前置内容
prependTo(): 将所选中元素前置到另一个元素集合中
(2)在元素外部插入:在元素外部插入就是将要添加的内容添加到元素之前和元素之后。
after(): 在每个选中元素之后添加内容
insertAfter(): 将所有选中元素插入到另一个指定的元素的元素集合后面
before(): 在每一个选中元素之前添加内容
insertBefore(): 将所有选中元素插入到另一个指定的元素的元素集合前面
4、删除、复制与替换节点
(1)删除节点
①empty()用于删除所选元素中所有子节点,并不删除该元素
②remove([expr])用于从DOM中删除所有选中的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除节点</title>
</head>
<body>
div1:
<div id="div1"><span style="color: yellow">程潇小可爱</span></div>
div1:
<div id="div2"><span style="color: greenyellow">程潇大可爱</span></div>
<script>
$(document).ready(function () {
$("#div1").empty();
$("#div2").remove();
});
</script>
</body>
</html>
运行结果:
(2)复制节点 clone()
①不带参数,用于克隆匹配的DOM元素并且选中这些克隆的副本
②带有布尔型参数。参数=ture时,表示克隆选中元素及其所有的事件处理,并且选择这些克隆的副本;参数=false时,表示不复制元素的事件处理。
(3)替换节点 replaceAll()、replaceWith()
①replaceAll()用于使用选中的元素替换所有selector匹配的元素
②replaceWith()用于将所有选择的元素替换成指定的HTML或者DOM元素
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的开心农场</title>
<style>
div{
font-size: 12px;
border:yellow 1px solid;
padding: 5px;
}
#bg{
width: 456px;
height: 266px;
background-image: url(images/plowland.jpg);
}
img{
position: absolute;
top:85px;
left: 195px;
}
#seed{
background-image: url(images/btn_seed.png);
width: 56px;
height: 56px;
position: absolute;
top:229px;
left: 49px;
cursor: hand;
}
#grow{
background-image: url(images/btn_grow.png);
width: 56px;
height: 56px;
position: absolute;
top:229px;
left: 154px;
cursor: hand;
}
#bloom{
background-image: url(images/btn_bloom.png);
width: 56px;
height: 56px;
position: absolute;
top:229px;
left: 259px;
cursor: hand;
}
#fruit{
background-image: url(images/btn_fruit.png);
width: 56px;
height: 56px;
position: absolute;
top:229px;
left: 368px;
cursor: hand;
}
</style>
</head>
<body>
<div id="bg">
<span id="seed"></span>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>
</div>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("#seed").bind("click",function () {
$("img").remove();
$("#bg").prepend("<img src='images/seed.png'>");
});
$("#grow").bind("click",function () {
$("img").remove();
$("#bg").append("<img src='images/grow.png'>");
});
$("#bloom").bind("click",function () {
$("img").replaceWith("<img src='images/bloom.png'>");
});
$("#fruit").bind("click",function () {
$("<img src='images/fruit.png'>").replaceAll("img");
});
});
</script>
</body>
</html>
运行结果:
三、对元素属性进行操作
attr(name):获取选择的第一个元素的属性值(无值时返回undefined)
attr(key,value):为选择的元素设置一个属性值(value是设置的属性值)
attr(key,fn):为选择的元素设置一个函数返回的属性值
attr(多个属性): 为所有的选择元素以集合({name:value,name:value})形式同时设置多个属性值
removeAttr(name): 为选择的元素删除一个属性
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对元素属性进行操作</title>
</head>
<body>
<form name="form1">
<div align="center">
<p class="style1">学生登记表</p>
<table width="600" border="1" bgcolor="#adff2f">
<tr>
<td width="50">
<div align="right">账户</div>
</td>
<td width="267">
<div align="left">
<input type="text" name="textfield">
<span class="style2">*</span>
</div>
</td>
</tr>
<tr>
<td >
<div align="right">密码</div>
</td>
<td >
<div align="left">
<input type="text" name="textfield2">
<span class="style2">*(6-15)位</span>
</div>
</td>
</tr>
<tr>
<td >
<div align="right">确定密码</div>
</td>
<td >
<div align="left">
<input type="text" name="textfield3">
<span class="style2">*</span>
</div>
</td>
</tr>
<tr>
<td>
<div align="right">性别</div>
</td>
<td>
<div align="left">
<select name="select" id="">
<option value="">男</option>
<option value="">女</option>
<option value="" selected>--</option>
</select>
</div>
</td>
</tr>
<tr>
<td height="">
<div align="right">城市</div>
</td>
<td>
<div align="left">
<p>
<input type="checkbox" name="checkbox" value="checkbox">
北京
<input type="checkbox" name="checkbox" value="checkbox">
上海
<input type="checkbox" name="checkbox" value="checkbox">
广州
<input type="checkbox" name="checkbox" value="checkbox">
深圳
</p>
</div>
</td>
</tr>
<tr>
<td height="">
<div align="right">建筑</div>
</td>
<td>
<div align="left">
<p>
<input type="checkbox" name="checkbox" value="checkbox">
故宫
<input type="checkbox" name="checkbox" value="checkbox">
外滩
<input type="checkbox" name="checkbox" value="checkbox">
广州塔
<input type="checkbox" name="checkbox" value="checkbox">
小梅沙
</p>
<p>
<input type="checkbox" name="checkbox" value="checkbox">
颐和园
<input type="checkbox" name="checkbox" value="checkbox">
东方之珠
<input type="checkbox" name="checkbox" value="checkbox">
长隆欢乐乐园
<input type="checkbox" name="checkbox" value="checkbox">
大梅沙
</p>
<p align="right">
<input type="button" name="submit1" id="checkAll" value="全选">
<input type="button" name="submit2" id="inverse" value="反选">
<input type="button" name="submit" id="checkNo" value="全不选">
</p>
</div>
</td>
</tr>
<tr>
<td>
<div align="right">
邮箱
</div>
</td>
<td>
<div align="left">
<input type="email" name="textfield4">
</div>
</td>
</tr>
<tr>
<td>
<div align="right">
验证码
</div>
</td>
<td>
<div align="left">
<input type="text" value="GO" name="textfield5">
</div>
</td>
</tr>
<tr>
<td>
<div align="right">
确认验证码
</div>
</td>
<td>
<div align="left">
<input type="text" value="" name="textfield6">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<input type="button" name="submit3" value="确定">
<input type="reset" name="submit4" value="重置">
</div>
</td>
</tr>
</table>
</div>
</form>
<script src="jquery.js"></script>
<script>
$(function () {
$("#checkAll").click(function () {
$('[name=checkbox]:checkbox').attr('checked',true);
});
$("#inverse").click(function () {
$('[name=checkbox]:checkbox').each(function () {
if($(this).attr('checked')){
$(this).attr('checked',false);
}else{
$(this).attr('checked',true);
}
}) ;
});
$("#checkNo").click(function () {
$('[name=checkbox]:checkbox').attr('checked',false);
});
});
</script>
</body>
</html>
运行结果:
四、对元素的CSS样式操作
1、通过修改CSS类实现样式操作
addClass():为所有选中元素添加指定的CSS类
removeClass():从所选元素中删除全部或者指定的CSS类
toggleClass():如果存在(不存在)就删除(添加)一个CSS类
toggleClass(class,switch):如果switch参数为true则加上响应的CSS类,否则就删除相应的类。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改CSS类实现样式操作</title>
<style>
form{
background-color: #fff;
width: 300px;
height: 500px;
}
.form{
background-color: yellow;
}
input{
margin:5px;
}
.input{
font-size: 12pt;
color: #333333;
background-color: #cef;
border:1px solid #000000;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post">
姓 名:<input type="text" name="name" id="name"/>
<br>
籍 贯:<input type="text" name="native" id="native"/>
<br>
生 日:<input type="text" name="birthday" id="birthday"/>
<br>
E-mail:<input type="text" name="email" id="email"/>
<br>
<span>
<input type="button" name="change" id="change" value="换肤">
</span>
<input type="button" name="default" id="default" value="恢复默认">
<br>
</form>
<script src="../jquery.js"></script>
<script>
$(document).ready(function () {
$("#change").click(function () {
$("form>input").addClass("input");
$("form").addClass("form");
}) ;
$("#default").click(function(){
$("form>input").removeClass("input");
});
});
</script>
</body>
</html>
运行结果:
2、通过修改CSS属性实现样式操作
css(name):返回第一个所选择元素的样式属性
css(name,value):为所选元素的指定样式设置值
css(属性:值,属性:值;。。。):以属性-值对的形式为所选元素设置样式属性
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改css属性</title>
<style>
table{
border:1px solid black;
border-collapse: collapse;
width: 400px;
}
table th{
border:1px solid black;
width: 50%;
}
table td{
border:1px solid black;
width: 50%;
}
tbody th{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">点击学号编辑表格</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>001</td>
<td>李晓凡</td>
</tr>
<tr>
<td>002</td>
<td>崔月红</td>
</tr>
<tr>
<td>003</td>
<td>柳博文</td>
</tr>
<tr>
<td>004</td>
<td>舒百一</td>
</tr>
</tbody>
</table>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("tbody>tr:even").css("background-color","yellowgreen");
var numTd = $("tr>td:even");
numTd.click(function () {
var tdobj = $(this);
if(tdobj.children("input").length>0){
return false;
}
var tdtext = tdobj.html();
tdobj.html("");
var inputobj = $("<input type='text'>");
inputobj.appendTo(tdobj);
inputobj.width(tdobj.width());
inputobj.css("border-width","0");
inputobj.css("background-color",tdobj.css("background-color"));
inputobj.val(tdtext);
inputobj.css("font-size","16px");
inputobj.trigger("focus").trigger("select");
//处理回车键操作
inputobj.keyup(function (event) {
var keycode = event.which;
if(keycode == 13){
var inputvalue = $(this).val();
tdobj.html(inputvalue);
}
if(keycode == 27){
tdobj.html(tdtext);
}
});
});
});
</script>
</body>
</html>
运行结果:
本期学习到此结束,欢迎关注批评指正。