《jQuery权威指南》学习笔记之第3章 jQuery操作DOM

来源：互联网发布：守望先锋攻击力数据编辑：程序博客网时间：2024/05/19 21:01

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)方法获取元素的属性

<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;}.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", 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()

无参数

用于获取元素的HTML内容

html(val)

val参数为元素的HTML内容

用于获取元素的HTML内容

text()

无参数

用于获取元素的文本内容

text(val)

val参数为元素的文本内容

用于设置元素的文本内容

说明:html()方法仅支持XHTML的文档,不能用于xml文档，而text()都支持。
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: 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>增加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>类别切换</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">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内部插入节点

语法格式

参数说明

功能描述

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;}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 外部插入节点

语法格式

参数说明

功能描述

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">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包裹节点

语法格式

参数说明

功能描述

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函数返回值包裹起来

注:wrap(html)与wrapInner(html)方法常用，前者包裹外部元素，后者包裹元素内部的文本字符。
示例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;}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;}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: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 代码分析

代码下载:点击打开链接

《jQuery权威指南》学习笔记之第3章 jQuery操作DOM

3.1 DOM基础示例3-1 创建一个DOM页面文档

语法格式

参数说明

功能描述

html()

无参数

用于获取元素的HTML内容

html(val)

val参数为元素的HTML内容

用于获取元素的HTML内容

text()

无参数

用于获取元素的文本内容

text(val)

val参数为元素的文本内容

用于设置元素的文本内容

语法格式

参数说明

功能描述

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表达式

将所选择的元素前置到另一个指定的元素集合中

语法格式

参数说明

功能描述

after(content)

content表示插入目标元素外部后面的内容

向所选择的元素外部后面插入内容

after(function)

通过function函数返回插入目标外部后面的内容

向所选择的元素外部后面插入function函数所返回的内容

before(content)

content表示插入目标元素外部前面的内容

向所选择的元素外部前面插入内容

before(function)

通过function函数返回插入目标外部前面的内容

向所选择的元素外部前面插入function函数所返回的内容

nsertAfter(content)

content表示插入目标元素外部后面的内容

向所选择的元素外部前面插入function函数所返回的内容

insertBefore(content)

content表示插入目标元素外部前面的内容

将所选择的元素插入另一个指定的元素外部前面

语法格式

参数说明

功能描述

wrap(html)

html参数为字符串代码，用于生成元素并包裹所选元素

把所有选择的元素用其他字符串代码包裹起来

wrap(elem)

elem参数用于包装所选元素的DOM元素

把所有选择的元素用其他DOM元素包裹起来

wrap(fn)

fn参数为包裹结构的一个函数

把所有选择的元素用其他DOM元素包裹起来

upwrap()

无参数

移除所选元素的父元素或包裹标记

wrapAll(html)

html参数为字符串代码，用于生成元素并包裹所选元素

把所有选择的元素用单个元素包裹起来

wrapAll(elem)

elem参数用于包装所选元素的DOM元素

把所有选择的元素用单个DOM元素包裹起来

3.1 DOM基础
示例3-1 创建一个DOM页面文档