3.1 DOM基础
示例3-1 创建一个DOM页面文档
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<title></title>
<style type="text/css">
body {
font-size: 13px;
}
table,div,p,ul {
width: 280px;
border:solid 1px #666;
margin: 10px 0px 10px 0px;
padding: 0px;
background-color: #eee;
list-style-type: none;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<table>
<tr><td>Td1</td></tr>
<tr><td>Td2</td></tr>
</table>
<div>Div</div>
<p>p</p>
<div><span>Span</span></div>
<ul>
<li>Li1</li>
<li>Li2</li>
</ul>
</body>
</html>
3.2 访问元素
主要包括对元素属性,内容,值,css的操作。
3.2.1 元素属性的操作(获取attr(),设置attr(),删除removeAttr())
1. 获取元素的属性: attr(name)
示例3-2 通过attr(name)方法获取元素的属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<title></title>
<style type="text/css">
body {
font-size: 13px;
}
table,div,p,ul {
width: 280px;
border:solid 1px #666;
margin: 10px 0px 10px 0px;
padding: 0px;
background-color: #eee;
list-style-type: none;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<table>
<tr><td>Td1</td></tr>
<tr><td>Td2</td></tr>
</table>
<div>Div</div>
<p>p</p>
<div><span>Span</span></div>
<ul>
<li>Li1</li>
<li>Li2</li>
</ul>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
body {
font-size: 12px;
}
div {
float:left;
padding-left:10px;
}
img {
border: solid 1px #ccc;
padding: 3px;
float: left;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
var strAlt = $("img").attr("src");
strAlt += "<br /><br/>" +
$("img").attr("title");
strAlt += "<br /><br />" +
$("img").attr("alt");
$("#divAlt").html(strAlt);
});
</script>
</head>
<body>
<img alt="test" title="这是一幅风景画" src="images/img01.jpg" />
<div id="divAlt"></div>
</body>
</html>
2. 设置元素的属性:attr(key, value) attr({key0:value0, key1:value1});
示例3-3 设置元素的属性(一)
<html>
<head>
<title></title>
<style type="text/css">
body {
font-size: 12px;
}
div {
float:left;
padding-left:10px;
}
img {
border: solid 1px #ccc;
padding: 3px;
float: left;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
var strAlt = $("img").attr("src");
strAlt += "<br /><br/>" +
$("img").attr("title");
strAlt += "<br /><br />" +
$("img").attr("alt");
$("#divAlt").html(strAlt);
});
</script>
</head>
<body>
<img alt="test" title="这是一幅风景画" src="images/img01.jpg" />
<div id="divAlt"></div>
</body>
</html>
<html>
<head>
<title>设置元素的属性</title>
<style type="text/css">
body {
font-size: 12px;
}
.clsSpn {
float: left;
padding-top: 10px;
padding-left: 10px;
}
.clsImg {
border: solid 1px #ccc;
padding: 3px;
float: left;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").attr("src","images/img01.jpg"); //
$("img").attr("title", "这是一幅风景画"); //
//$("img").attr({src: "images/img02.jpg", title:"这是一幅风景画" });
$("img").addClass("clsImg"); //
$("span").html("加载完毕"); //
});
</script>
</head>
<body>
<img alt="" src="images/img03.gif" style="float:left" />
<span class="clsSpn">正在加载图片</span>
</body>
</html>
示例3-4 设置元素的属性(二)
<html>
<head>
<title>设置元素的属性</title>
<style type="text/css">
body {
font-size: 12px;
}
.clsSpn {
float: left;
padding-top: 10px;
padding-left: 10px;
}
.clsImg {
border: solid 1px #ccc;
padding: 3px;
float: left;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").attr("src","images/img01.jpg"); //
$("img").attr("title", "这是一幅风景画"); //
//$("img").attr({src: "images/img02.jpg", title:"这是一幅风景画" });
$("img").addClass("clsImg"); //
$("span").html("加载完毕"); //
});
</script>
</head>
<body>
<img alt="" src="images/img03.gif" style="float:left" />
<span class="clsSpn">正在加载图片</span>
</body>
</html>
<html>
<head>
<title>设置元素的属性</title>
<style type="text/css">
body {
font-size: 12px;
}
.clsSpn {
float: left;
padding-top: 10px;
padding-left: 10px;
}
.clsImg {
border: solid 1px #ccc;
padding: 3px;
float: left;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").attr("src", function() {
return "images/img0" +
Math.floor(Math.random() * 2 + 1) +
".jpg"
});
$("img").attr("title", "这是一幅风景画");
$("img").addClass("clsImg");
});
</script>
</head>
<body>
<img alt="" src="images/img03.gif" style="float:left" />
</body>
</html>
3. 删除元素的属性: removeAttr(name);
3.2.2 元素内容的操作
1. 方法有html()和text()
html()获取或设置元素的html内容
text()获取或设置文本的内容
2. html()和text()方法的区别
<html>
<head>
<title>设置元素的属性</title>
<style type="text/css">
body {
font-size: 12px;
}
.clsSpn {
float: left;
padding-top: 10px;
padding-left: 10px;
}
.clsImg {
border: solid 1px #ccc;
padding: 3px;
float: left;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").attr("src", function() {
return "images/img0" +
Math.floor(Math.random() * 2 + 1) +
".jpg"
});
$("img").attr("title", "这是一幅风景画");
$("img").addClass("clsImg");
});
</script>
</head>
<body>
<img alt="" src="images/img03.gif" style="float:left" />
</body>
</html>
语法格式 | 参数说明 | 功能描述 |
html() | 无参数 | 用于获取元素的HTML内容 |
html(val) | val参数为元素的HTML内容 | 用于获取元素的HTML内容 |
text() | 无参数 | 用于获取元素的文本内容 |
text(val) | val参数为元素的文本内容 | 用于设置元素的文本内容 |
3. 示例3-5 设置或获取元素的内容
<html>
<head>
<title>获取或设置元素的内容</title>
<style type="text/css">
body {
font-size: 15px;
text-align: center;
}
div {
border: solid 1px #666;
padding: 5px;
width: 220px;
margin: 5px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
var strHTML = $("#divShow").html();
var strText = $("#divShow").text();
$("#divHTML").html(strHTML); //strHTML="<b><i>Write Less Do More</i></b>"
$("#divText").text(strText); //strText="Write Less Do More"
});
</script>
</head>
<body>
<div id="divShow"><b><i>Write Less Do More</i></b></div>
<div id="divHTML"></div>
<div id="divText"></div>
</body>
</html>
3.2.3 获取或设置元素值:
1. val(val)和val() 常用于表单中获取或设置对象的值
2. val()方法还可以获取select标记中的多个选项值: val().join(",")
3. 示例3-6 设置或获取元素的值
<html>
<head>
<title>获取或设置元素的内容</title>
<style type="text/css">
body {
font-size: 15px;
text-align: center;
}
div {
border: solid 1px #666;
padding: 5px;
width: 220px;
margin: 5px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
var strHTML = $("#divShow").html();
var strText = $("#divShow").text();
$("#divHTML").html(strHTML); //strHTML="<b><i>Write Less Do More</i></b>"
$("#divText").text(strText); //strText="Write Less Do More"
});
</script>
</head>
<body>
<div id="divShow"><b><i>Write Less Do More</i></b></div>
<div id="divHTML"></div>
<div id="divText"></div>
</body>
</html>
<html>
<head>
<title>获取或设置元素的值</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
div {
padding: 3px;
margin: 3px;
width: 120px;
float: left;
}
.txt {
border: solid 1px #666;
padding: 3px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("select").change(function() {
var strSel = $("select").val().join(",");
$("#p1").html(strSel);
});
$("input").change(function() {
var strTxt = $("input").val();
$("#p2").html(strTxt);
});
$("input").focus(function() {
$("input").val("");
});
});
</script>
</head>
<body>
<div>
<select multiple="multiple" style="height:96px; width: 85px">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
</select>
<p id="p1"></p>
</div>
<div>
<input type="text" class="txt" />
<p id="p2"></p>
</div>
</body>
</html>
说明:在val(val)方法中,如果有参数,其参数还可以是数组的形式,即val(array).其作用是设置元素被选中。因此,$(":radio").val(["radio2","radio3"])意思是:id号为radio2和radio3的单选框被选中
3.2.4 元素样式操作
包括直接设置样式,增加CSS类别,类别切换,删除类别
1. 直接设置元素样式值: css(name, value)
示例3-7 直接设置元素样式值
<html>
<head>
<title>直接设置元素样式值</title>
<style type="text/css">
body {
font-size: 15px;
}
p {
padding: 5px;
width: 220px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("p").click(function() {
$(this).css("font-weight", "bold");
$(this).css("font-style", "italic");
$(this).css("background-color", "#eee");
});
});
</script>
</head>
<body>
<p> Write Less Do More</p>
</body>
</html>
2. 增加CSS类别: addClass(Class) addClass(class0 class1...)
示例3-8 增加元素CSS类别
<html>
<head>
<title>直接设置元素样式值</title>
<style type="text/css">
body {
font-size: 15px;
}
p {
padding: 5px;
width: 220px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("p").click(function() {
$(this).css("font-weight", "bold");
$(this).css("font-style", "italic");
$(this).css("background-color", "#eee");
});
});
</script>
</head>
<body>
<p> Write Less Do More</p>
</body>
</html>
<html>
<head>
<title>增加CSS类别</title>
<style type="text/css">
body {
font-size: 15px;
}
p {
padding: 5px;
width: 220px;
}
.cls1 {
font-weight: bold;
font-style: italic
}
.cls2 {
border: solid 1px #666;
background-color: #eee;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("p").click(function() {
$(this).addClass("cls1 cls2");
});
});
</script>
</head>
<body>
<p>Write Less Do More</p>
</body>
</html>
注意:使用addClass()方法仅是追加样式类别,即它还保存原有的类别.
3. 类别切换: toggleClass(class)
示例3-9 类别切换
<html>
<head>
<title>增加CSS类别</title>
<style type="text/css">
body {
font-size: 15px;
}
p {
padding: 5px;
width: 220px;
}
.cls1 {
font-weight: bold;
font-style: italic
}
.cls2 {
border: solid 1px #666;
background-color: #eee;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("p").click(function() {
$(this).addClass("cls1 cls2");
});
});
</script>
</head>
<body>
<p>Write Less Do More</p>
</body>
</html>
<html>
<head>
<title>类别切换</title>
<style type="text/css">
.clsImg {
border: solid 1px #666;
padding: 3px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).toggleClass("clsImg");
});
});
</script>
</head>
<body>
<img src="images/logo.gif" alt="" title="jQuery" />
</body>
</html>
4. 删除类别: removeClass(class)
class不写,删除所有。
注意:toggleClass()与css(),addClass()的区别
3.3 创建节点元素
格式:$(html)
例: var $div = $("<div title="jQuery">Write Less Do More</div>");
$("body").append($div);
示例3-10 动态创建节点元素
<html>
<head>
<title>类别切换</title>
<style type="text/css">
.clsImg {
border: solid 1px #666;
padding: 3px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).toggleClass("clsImg");
});
});
</script>
</head>
<body>
<img src="images/logo.gif" alt="" title="jQuery" />
</body>
</html>
<html>
<head>
<title>动态创建节点元素</title>
<style type="text/css">
body {
font-size: 13px;
}
ul {
padding: 0px;
list-style: none;
}
ul li {
line-height: 2.0em;
}
.divL {
float: left;
width: 200px;
background-color: #eee;
border: solid 1px #666;
margin: 5px;
padding: 0px 8px 0px 8px;
}
.divR {
float: left;
width: 200px;
border: solid 1px #ccc;
margin: 5px;
padding: 0px 8px 0px 8px;
display: none;
}
.txt {
border: solid 1px #666;
padding: 3px;
width: 120px;
}
.btn {
border: solid 1px #666;
padding: 2px;
width: 60px;
filter: progid:DXImageTransform.Micrsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);
}
p {
color: #eee;
}
div {
color:#666;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
var $str1 = $("#select1").val();
var $str2 = $("#text1").val();
var $str3 = $("#select2").val();
var $str4 = $("#text2").val();
var $div = $("<" + $str1 + " " + $str3 + "='" + $str4 + "'>" + $str2 + "</" + $str1 + ">");
$(".divR").show().append($div);
});
});
</script>
</head>
<body>
<div class="divL">
<p></p>
<ul>
<li>元素名:
<select id="select1">
<option value='p'>p</option>
<option value='div'>div</option>
</select>
</li>
<li>内容为:
<input type="text" id="text1" class="txt" />
</li>
<li>属性名:
<select id="select2">
<option value='title'>title</option>
</select>
</li>
<li>属性值:
<input type="text" id="text2" class="txt" />
</li>
<li style="text-align:center;padding-top:5px">
<input id="Button1" type="button" value="创建" class="btn" />
</li>
</ul>
</div>
<div class="divR"></div>
</body>
</html>
注意:函数$(html)只完成DOM元素创建,加入到页面还需要通过元素节点的插入或追加操作;同时在创建DOM元素时,要注意字符标记是否完全闭合,否则达不到预期效果.
3.4 插入节点
内部插入和外部插入
3.4.1 内部插入节点
<html>
<head>
<title>动态创建节点元素</title>
<style type="text/css">
body {
font-size: 13px;
}
ul {
padding: 0px;
list-style: none;
}
ul li {
line-height: 2.0em;
}
.divL {
float: left;
width: 200px;
background-color: #eee;
border: solid 1px #666;
margin: 5px;
padding: 0px 8px 0px 8px;
}
.divR {
float: left;
width: 200px;
border: solid 1px #ccc;
margin: 5px;
padding: 0px 8px 0px 8px;
display: none;
}
.txt {
border: solid 1px #666;
padding: 3px;
width: 120px;
}
.btn {
border: solid 1px #666;
padding: 2px;
width: 60px;
filter: progid:DXImageTransform.Micrsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);
}
p {
color: #eee;
}
div {
color:#666;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
var $str1 = $("#select1").val();
var $str2 = $("#text1").val();
var $str3 = $("#select2").val();
var $str4 = $("#text2").val();
var $div = $("<" + $str1 + " " + $str3 + "='" + $str4 + "'>" + $str2 + "</" + $str1 + ">");
$(".divR").show().append($div);
});
});
</script>
</head>
<body>
<div class="divL">
<p></p>
<ul>
<li>元素名:
<select id="select1">
<option value='p'>p</option>
<option value='div'>div</option>
</select>
</li>
<li>内容为:
<input type="text" id="text1" class="txt" />
</li>
<li>属性名:
<select id="select2">
<option value='title'>title</option>
</select>
</li>
<li>属性值:
<input type="text" id="text2" class="txt" />
</li>
<li style="text-align:center;padding-top:5px">
<input id="Button1" type="button" value="创建" class="btn" />
</li>
</ul>
</div>
<div class="divR"></div>
</body>
</html>
语法格式 | 参数说明 | 功能描述 |
append(content) | content表示追加到目标的内容 | 向所选择的元素内部插入内容 |
append(function(index, html)) | 通过function函数返回追加到目标中的内容 | 向所选择的元素内部插入function函数返回的内容 |
appendTo(content) | content表示追加的内容 | 把所选择的元素追加到另一个指定的元素集合中 |
prepend(content) | content表示插入目标元素内部前面的内容 | 向每个所选择的元素内部前置内容 |
prepend(function(index, html)) | 通过function函数返回插入目标元素内部前面的内容 | 向所选择的元素内部前置function函数所返回的内容 |
prependTo(content) | content表示用于选择元素的jQuery表达式 | 将所选择的元素前置到另一个指定的元素集合中 |
1. append(function(index,html))
示例3-11 插入节点(一)
<html>
<head>
<title>动态插入节点方法</title>
<style type="text/css">
body {
font-size: 13px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
//$("div").append(reHtml);
//function reHtml() {
// var str = " <b>Write Less Do More </B>";
// return str;
//}
$("div").prepend(reHtml);
function reHtml() {
var str = " <b>Write Less Do More </b>";
return str;
}
});
</script>
</head>
<body>
<div>jQuery</div>
</body>
</html>
2. appendTo(content)
示例3-12 插入节点(二)
<html>
<head>
<title>动态插入节点方法</title>
<style type="text/css">
body {
font-size: 13px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
//$("div").append(reHtml);
//function reHtml() {
// var str = " <b>Write Less Do More </B>";
// return str;
//}
$("div").prepend(reHtml);
function reHtml() {
var str = " <b>Write Less Do More </b>";
return str;
}
});
</script>
</head>
<body>
<div>jQuery</div>
</body>
</html>
<html>
<head>
<title>动态插入节点方法</title>
<style type="text/css">
body {
font-size: 13px;
}
img {
border: solid 1px #ccc;
padding: 3px;
margin: 5px;
}
span img {
border: solid 1px #ccc;
padding: 10px;
margin: 5px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").appendTo($("span"));
});
</script>
</head>
<body>
<img title="2008年新书封面" src="images/img03.jpg" />
<span><img title="2010年新书封面" src="images/img04.jpg" /></span>
</body>
</html>
3.4.3 外部插入节点
<html>
<head>
<title>动态插入节点方法</title>
<style type="text/css">
body {
font-size: 13px;
}
img {
border: solid 1px #ccc;
padding: 3px;
margin: 5px;
}
span img {
border: solid 1px #ccc;
padding: 10px;
margin: 5px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").appendTo($("span"));
});
</script>
</head>
<body>
<img title="2008年新书封面" src="images/img03.jpg" />
<span><img title="2010年新书封面" src="images/img04.jpg" /></span>
</body>
</html>
语法格式 | 参数说明 | 功能描述 |
after(content) | content表示插入目标元素外部后面的内容 | 向所选择的元素外部后面插入内容 |
after(function) | 通过function函数返回插入目标外部后面的内容 | 向所选择的元素外部后面插入function函数所返回的内容 |
before(content) | content表示插入目标元素外部前面的内容 | 向所选择的元素外部前面插入内容 |
before(function) | 通过function函数返回插入目标外部前面的内容 | 向所选择的元素外部前面插入function函数所返回的内容 |
nsertAfter(content) | content表示插入目标元素外部后面的内容 | 向所选择的元素外部前面插入function函数所返回的内容 |
insertBefore(content) | content表示插入目标元素外部前面的内容 | 将所选择的元素插入另一个指定的元素外部前面 |
1. after(function)
示例3-13 外部插入节点
<html>
<head>
<title>动态插入节点方法</title>
<style type="text/css">
body {
font-size: 13px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
/*
$("span").after(reHtml);
function reHtml() {
var str="<span><b>Write Less Do More</b></span>";
return str;
}
$("span").before(reHtml);
function reHtml() {
var str="<span><b>Write Less Do More</b></span>";
return str;
}
*/
$("<span><b>Write Less Do More</b></span>").insertAfter("span");
});
</script>
</head>
<body>
<span>jQuery</span>
</body>
</html>
3.5 复制节点:clone()与clone(true)
示例3-14 复制元素节点
<html>
<head>
<title>复制元素节点</title>
<style type="text/css">
img {
border: solid 1px #ccc;
padding: 3px;
margin: 5px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).clone().appendTo("span");
});
});
</script>
</head>
<body>
<span><img title="封面" src="images/img04.jpg" /></span>
</body>
</html>
注意:clone(true)
3.6 替换节点: replaceWith(content)与replaceAll(selector)
示例3-15 替换元素节点
<html>
<head>
<title>复制元素节点</title>
<style type="text/css">
img {
border: solid 1px #ccc;
padding: 3px;
margin: 5px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).clone().appendTo("span");
});
});
</script>
</head>
<body>
<span><img title="封面" src="images/img04.jpg" /></span>
</body>
</html>
<html>
<head>
<title>替换元素节点</title>
<style type="text/css">
body {
font-size: 13px;
}
span {
font-weight: bold;
}
p {
background-color: #eee;
padding: 5px;
width: 200px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#Span1").replaceWith("<span title='replaceWith'>jinhongliang</span>");
$("<span title='replaceAll'>sdjfka@213.com</span>").replaceAll("#Span2");
});
</script>
</head>
<body>
<p>姓名:<span id="Span1"></span></p>
<p>邮箱:<span id="Span2"></span></p>
</body>
</html>
注意:replaceWith()与replaceAll()方法都可以实现元素节点的替换,二者最大的区别在于替换字符的顺序,前者是用括号中的字符替换所选择的元素,后者是用字符串替换括号中所选择的元素。一旦替换完成,事件全部消失。
3.7 包裹节点
<html>
<head>
<title>替换元素节点</title>
<style type="text/css">
body {
font-size: 13px;
}
span {
font-weight: bold;
}
p {
background-color: #eee;
padding: 5px;
width: 200px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#Span1").replaceWith("<span title='replaceWith'>jinhongliang</span>");
$("<span title='replaceAll'>sdjfka@213.com</span>").replaceAll("#Span2");
});
</script>
</head>
<body>
<p>姓名:<span id="Span1"></span></p>
<p>邮箱:<span id="Span2"></span></p>
</body>
</html>
语法格式 | 参数说明 | 功能描述 |
wrap(html) | html参数为字符串代码,用于生成元素并包裹所选元素 | 把所有选择的元素用其他字符串代码包裹起来 |
wrap(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素用其他DOM元素包裹起来 |
wrap(fn) | fn参数为包裹结构的一个函数 | 把所有选择的元素用其他DOM元素包裹起来 |
upwrap() | 无参数 | 移除所选元素的父元素或包裹标记 |
wrapAll(html) | html参数为字符串代码,用于生成元素并包裹所选元素 | 把所有选择的元素用单个元素包裹起来 |
wrapAll(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素用单个DOM元素包裹起来 |
wrapInner(html) | html参数为字符串代码,用于生成元素并包裹所选元素 | 把所有选择的元素的子内容(包括文本节点)用字符串代码包裹起来 |
wrapInner(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素的子内容(包括文本节点)用DOM元素包裹起来 |
wrapInner(fn) | fn参数为包裹结构的一个函数 | 把所有选择的元素的子内容(包括文本节点)用function函数返回值包裹起来 |
示例3-16 包裹元素节点
<html>
<head>
<title>包裹元素节点</title>
<style type="text/css">
body {
font-size: 13px;
}
p {
background-color: #eee;
padding: 5px;
width: 200px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("p").wrap("<b></b>");
$("span").wrapInner("<i></i>");
});
</script>
</head>
<body>
<p>最喜欢的体育运动:<span>羽毛球</span></p>
<p>最爱看哪类型图书:<span>网络,技术</span></p>
</body>
</html>
3.8 遍历元素:each(callback)
示例3-17 遍历元素
<html>
<head>
<title>包裹元素节点</title>
<style type="text/css">
body {
font-size: 13px;
}
p {
background-color: #eee;
padding: 5px;
width: 200px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("p").wrap("<b></b>");
$("span").wrapInner("<i></i>");
});
</script>
</head>
<body>
<p>最喜欢的体育运动:<span>羽毛球</span></p>
<p>最爱看哪类型图书:<span>网络,技术</span></p>
</body>
</html>
<html>
<head>
<title>遍历元素</title>
<style type="text/css">
body {
font-size: 13px;
}
img {
border: solid 1px #ccc;
padding: 3px;
margin: 5px;
width: 143px;
height: 101px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").each(function(index) {
this.title = "第" + index + "幅风景画图片,alt内容是" + this.alt;
});
});
</script>
</head>
<body>
<p>
<img src="images/img05.jpg" alt="第0幅风景画" />
<img src="images/img06.jpg" alt="第1幅风景画" />
<img src="images/img07.jpg" alt="第2幅风景画" />
</p>
</body>
</html>
3.9 删除元素:remove([expr])与empty()
示例3-18 删除元素
<html>
<head>
<title>遍历元素</title>
<style type="text/css">
body {
font-size: 13px;
}
img {
border: solid 1px #ccc;
padding: 3px;
margin: 5px;
width: 143px;
height: 101px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").each(function(index) {
this.title = "第" + index + "幅风景画图片,alt内容是" + this.alt;
});
});
</script>
</head>
<body>
<p>
<img src="images/img05.jpg" alt="第0幅风景画" />
<img src="images/img06.jpg" alt="第1幅风景画" />
<img src="images/img07.jpg" alt="第2幅风景画" />
</p>
</body>
</html>
<html>
<head>
<title>删除元素</title>
<style type="text/css">
body {
font-size: 13px;
}
ul {
width: 200px;
}
ul li {
list-style: none;
padding: 0px;
height: 23px;
}
span {
padding-left: 20px;
}
.btn {
border: solid 1px #666;
padding: 2px;
width: 60px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("ul li:first").css("font-weight", "bold");
$("#Button1").click(function() {
//$("ul li").remove("li[title=t]");
$("ul li:eq(0)").remove();
});
});
</script>
</head>
<body>
<ul>
<li>学号</li>
<li title="t">1001</li>
<li>1002</li>
<li>1003</li>
<li style="text-align:center;padding-top:5px">
<input id="Button1" type="button" value="删除" class="btn" />
</li>
</ul>
</body>
</html>
3.10 综合案例分析-----数据删除和图片预览在项目中的应用
3.10.1 需求分析
3.10.2 效果界面
3.10.3 功能实现
示例3-19 数据删除和图片预览在项目中的应用
<html>
<head>
<title>删除元素</title>
<style type="text/css">
body {
font-size: 13px;
}
ul {
width: 200px;
}
ul li {
list-style: none;
padding: 0px;
height: 23px;
}
span {
padding-left: 20px;
}
.btn {
border: solid 1px #666;
padding: 2px;
width: 60px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("ul li:first").css("font-weight", "bold");
$("#Button1").click(function() {
//$("ul li").remove("li[title=t]");
$("ul li:eq(0)").remove();
});
});
</script>
</head>
<body>
<ul>
<li>学号</li>
<li title="t">1001</li>
<li>1002</li>
<li>1003</li>
<li style="text-align:center;padding-top:5px">
<input id="Button1" type="button" value="删除" class="btn" />
</li>
</ul>
</body>
</html>
<html>
<head>
<title>数据管理</title>
<style type="text/css">
body {
font-size:12px;
}
table {
width: 360px;
border-collapse: collapse;
}
table tr th,td {
border: solid 1px #666;
text-align: center;
}
table tr td img {
border: solid 1px #ccc;
padding: 3px;
width: 42px;
height: 60px;
cursor: hand;
}
table tr td span {
float: left;
padding-left: 12px;
}
table tr th {
background-color: #ccc;
height: 32px;
}
.clsImg {
position: absolute;
border: solid 1px #ccc;
padding: 3px;
width: 85px;
height: 120px;
background-color: #eee;
display: none;
}
.btn {
border: solid 1px #666;
padding: 2px;
width: 50px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("table tr:nth-child(odd)").css("background-color", "#eee");
/** 全选复选框单击事件 **/
$("#chkAll").click(function() {
if(this.checked) {
$("table tr td input[type=checkbox]").attr("checked", true);
} else {
$("table tr td input[type=checkbox]").attr("checked", false);
}
});
/** 删除按钮单击事件 **/
$("#btnDel").click(function() {
var intL = $("table tr td input:checked:not('#chkAll')").length;
if(intL != 0) {
$("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) {
if(this.checked) {
$("table tr[id=" + this.value + "]").remove();
}
});
}
});
/** 小图片鼠标移动事件 **/
var x=5; var y = 15;
$("table tr td img").mousemove(function(e) {
$("#imgTip")
.attr("src", this.src)
.css({"top" : + (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"})
.show();
});
/** 小图片鼠标移出事件**/
$("table tr td img").mouseout(function() {
$("#imgTip").hide();
});
});
</script>
</head>
<body>
<table>
<tr>
<th>选项</th>
<th>编号</th>
<th>封面</th>
<th>购书人</th>
<th>性别</th>
<th>购书价</th>
</tr>
<tr id="0">
<td><input id="checkbox1" type="checkbox" value="0" /></td>
<td>1001</td>
<td><img src="images/img03.jpg" alt="" /></td>
<td>李小明</td>
<td>男</td>
<td>35.60元</td>
</tr>
<tr id="1">
<td><input id="checkbox2" type="checkbox" value="1" /></td>
<td>1002</td>
<td><img src="images/img04.jpg" alt="" /></td>
<td>刘明明</td>
<td>女</td>
<td>37.80元</td>
</tr>
<tr id="2">
<td><input id="checkbox3" type="checkbox" value="2" /></td>
<td>1003</td>
<td><img src="images/img08.jpg" alt="" /></td>
<td>张晓星</td>
<td>女</td>
<td>45.60元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left; height:28px">
<span><input id="chkAll" type="checkbox" />全选</span>
<span><input id="btnDel" type="button" value="删除" class="btn" /></span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="images/img03.gif" />
</body>
</html>
3.10.4 代码分析
<html>
<head>
<title>数据管理</title>
<style type="text/css">
body {
font-size:12px;
}
table {
width: 360px;
border-collapse: collapse;
}
table tr th,td {
border: solid 1px #666;
text-align: center;
}
table tr td img {
border: solid 1px #ccc;
padding: 3px;
width: 42px;
height: 60px;
cursor: hand;
}
table tr td span {
float: left;
padding-left: 12px;
}
table tr th {
background-color: #ccc;
height: 32px;
}
.clsImg {
position: absolute;
border: solid 1px #ccc;
padding: 3px;
width: 85px;
height: 120px;
background-color: #eee;
display: none;
}
.btn {
border: solid 1px #666;
padding: 2px;
width: 50px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("table tr:nth-child(odd)").css("background-color", "#eee");
/** 全选复选框单击事件 **/
$("#chkAll").click(function() {
if(this.checked) {
$("table tr td input[type=checkbox]").attr("checked", true);
} else {
$("table tr td input[type=checkbox]").attr("checked", false);
}
});
/** 删除按钮单击事件 **/
$("#btnDel").click(function() {
var intL = $("table tr td input:checked:not('#chkAll')").length;
if(intL != 0) {
$("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) {
if(this.checked) {
$("table tr[id=" + this.value + "]").remove();
}
});
}
});
/** 小图片鼠标移动事件 **/
var x=5; var y = 15;
$("table tr td img").mousemove(function(e) {
$("#imgTip")
.attr("src", this.src)
.css({"top" : + (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"})
.show();
});
/** 小图片鼠标移出事件**/
$("table tr td img").mouseout(function() {
$("#imgTip").hide();
});
});
</script>
</head>
<body>
<table>
<tr>
<th>选项</th>
<th>编号</th>
<th>封面</th>
<th>购书人</th>
<th>性别</th>
<th>购书价</th>
</tr>
<tr id="0">
<td><input id="checkbox1" type="checkbox" value="0" /></td>
<td>1001</td>
<td><img src="images/img03.jpg" alt="" /></td>
<td>李小明</td>
<td>男</td>
<td>35.60元</td>
</tr>
<tr id="1">
<td><input id="checkbox2" type="checkbox" value="1" /></td>
<td>1002</td>
<td><img src="images/img04.jpg" alt="" /></td>
<td>刘明明</td>
<td>女</td>
<td>37.80元</td>
</tr>
<tr id="2">
<td><input id="checkbox3" type="checkbox" value="2" /></td>
<td>1003</td>
<td><img src="images/img08.jpg" alt="" /></td>
<td>张晓星</td>
<td>女</td>
<td>45.60元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left; height:28px">
<span><input id="chkAll" type="checkbox" />全选</span>
<span><input id="btnDel" type="button" value="删除" class="btn" /></span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="images/img03.gif" />
</body>
</html>
代码下载:点击打开链接