第8章 jQuery中的DOM操作

$(html标签)
创建1个空<li>节点 示例 var $li_1 = $("<li></li>"); //创建第1个<li>元素 创建1个有文本内
容的<li>节点 var $newNode1=$(“<li>你喜欢哪些水果？</li>");
var $newNode2=$("<li title=contact us'>关于我们</li>");
消失，失去焦点时若内容为空，则再
$(this).val(“”);
}
次});显示提示文字。
$(this).blur(function(){ //失去焦点时，如果值为空，则设置为默认值
if (($(this).val() == ""){
$(this).val(“defaultVal”);
}
});
});
任务实现
});
});
//页面打开后的初始状态 $("div img").addClass("alpha"); //四幅小图透明度全部设为0.2 $("div img:eq(0)").removeClass("alpha"); //第一幅小图不设置透明度 //当鼠标移入某幅小图时 $(this).removeClass("alpha").siblings().addClass("alpha");//当前小图不设 透明度，其他三幅小图透明度设为0.2
empty() 清空指定元素
$(“p”).empty()清空p元素
复制节点
• 通过clone()方法实现复制节点
参数ture或flase, true复制 事件处理，flase时反之
语法： $(selector).clone([includeEvents])
演示任务3：电子邮件删除效果
任务分析
实现思路
1. 为“全选/全不选”按钮绑定onclick事件。 2. 查找所有的复选框，把每个复选框的checked属性值变为true或false，
实现全选或全不选。 3. 为“删除邮件”按钮绑定onclick事件。 4. 查找所有checked属性值为true的复选框，删除其所在的行，即删除
说 JavaScript用于对html文档进行操作，它对这三类DOM操作都提供了支持
明
jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装
jQuery中的DOM操作
• 样式操作
内容及Value值操作
• 节点属性操作 节点遍历
节点操作 CSS-DOM操作
说 “元素”和“节点”含义大同小异，这里不严格区分
$("div img").mouseover(function() {
var big_src = $(this).attr("src"); //获取小图的src属性
$("#test").attr("src"，big_src); //设置大图的src属性
//当前小图不设透明度，其他三幅小图透明度设为0.2
if(Name!="你的昵称" && Content!="你要说的话") {
<p>标签中的文字内容
var msg =
"<li><span>"+Name+"</span><p>"+Content+"</p></li>";//创建一
条留言
$("ul").append(msg); //将留言显示在留言板中
}
将“昵称”和“留言内容”文本框
$("input[name]").val("你的昵称");
的value值变为初始值
$("textarea").val("你要说的话");
练一练
练习 制作如图所示页面，当用户单击最下面的超链接“添加”时，表格 增加一行
任务描述
在邮件列表前都有一个复选框，单击可以选中或取消选中。当单击“全选/ 全不选”按钮，所有复选框都随之选中或取消选中。单击“删除邮件”按 钮可删除被选中的邮件。
插入节点
• 元素外部插入同辈节点
语法 after(content) insertAfter(content) before(content) insertBefore(content)
功能
$(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1);
$(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul");
明
任务描述
在页面中有四幅小图片和一个图片展示区域，当鼠标移入某幅小图片时，在 图片展示区域可看到其对应的大图。为凸显当前的小图状态，把其它三幅小 图透明度设为0.2
演示任务1：图片展示效果
任务分析
实现思路
1. 为四幅小图片绑定鼠标移入事件。 2. 获取当前发生鼠标移入事件的小图片的src属性，将其设置为大图的src
任务描述
当在“昵称”和“留言内容”文本框内输入信息后，单击“单击这里提交 留言”按钮，输入的信息会显示在页面上端的留言板中。若没有输入昵称 和留言内容，单击“单击这里提交留言”时不能发送留言。
演示任务2：留言板前端局部更新效果
任务分析
实现思路
1. 在“昵称”和“留言内容”文本框中显示提示文字，获得焦点时提 示文字消失，失去焦点时若内容为空，则再次显示提示文字。
var Name = $("input[name]").val(); var Content = $("textarea").val();
获取用户输入的“昵称”和“留言内 容”
<li> <span>功夫熊猫</span> <p>欢迎你</p>
</li>
创建新留言需要生成的HTML标签内容
修改<span>标签中的文字内容和
$(this).removeClass("alpha").siblings().addClass("alpha");
});
当前小图应用样式，其
他兄弟节点移除该样式
练一练
练习 根据所给素材，实现如图所示的图片切换效果。当用户单击某幅缩略图时，在上面显示对
应的大图，同时在标题“图片切换”后面添加“Image2”、“Image3”等。
DOM操作分类
DOM操作分为三类：
• DOM Core：任何一种支持DOM的编程语言都可以使用它，如 getElementById()
• HTML-DOM：用于处理HTML文档，如document.forms • CSS-DOM：用于操作CSS，如element.style.color="green"
var defaultVal = $(this).val(); //保存当前文本框在的“值昵称”和“留言内容”文本框中
$(this).focus(function(){ //获得焦点时，如果值显为示默提认示值文字，，则获设得置焦为点空时提示文字
if($(this).val() == defaultVal){
01 学会查找节点、创建节点、删除节点 02 学会复制节点、替换节点、遍历节点 03 能够根据需要动态改变页面元素的样式 04 能够动态改变元素的属性
本章任务
• 任务1 制作图片展示效果 • 任务2 制作留言板前端局部更新效果 • 任务3 制作电子邮件删除效果 • 任务4 表格隔行变色和当前行变色
jQuery 1.6新增方法 prop()，与attr()相似，可以设置或返回被选元素的属性和值。 说 区别：一般来说，具有 true 和 false 两个属性的属性，如 checked, selected 或 明 者 disabled 使用prop()方法，其他的使用 attr()方法。
删除属性
属性值。这样大图也就随之改变了。 3. 为凸显当前的小图状态，把其它三幅小图透明度设为0.2。
• 掌握jQuery中获取和设置属性的方法
获取和设置属性
attr()方法：获取和设置元素属性
要获取图片的src属性，只需要给attr()方法传递一个参数，即属性名称 示例 var $img = $("#photo"); //获取图片<img>元素
任务实现
$(function() {
$("div img").addClass("alpha"); //四幅小图透明度全部设为0.2
$("div img:eq(0)").removeClass("alpha"); //第一幅小图不设置透明
度
获取当前发生单击事件的小图片的
பைடு நூலகம்
//当鼠标移入某幅小图时
src属性，将其作为大图的src属性值
$(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1);
$(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul");
任务实现
关键代码
$(".text").each(function(){ //为每个匹配元素运行指定的函数，隐形迭代
removeAttr()方法：删除属性
示例 $("#photo").removeAttr("title");
1.removeProp()可移除属性，但一般情况下，不要使用该函数来删除DOM元素 的固有属性，如：checked、selected和disabled。如果使用该函数删除对应的 说 属性，一旦删除之后，无法再向该DOM元素重新添加对应的属性。可以使用 明 prop()函数将属性设为false即可。 2.在IE6 ~ IE8中，removeAttr()函数无法移除行内的onclick事件属性，为了避免 潜在的问题，可使用prop()函数，jQueryObject.prop("onclick",null);
2. 获取用户输入的“昵称”和“留言内容”。 3. 若用户输入了“昵称”和“留言内容”，则创建一条留言，并显示
在页面上面的留言板中。 4. 将“昵称”和“留言内容”文本框的value值设置为初始值。
• 掌握jQuery中获取或设置元素的value属性值的方法 • 掌握jQuery中创建节点、插入节点的方法
获取或设置元素的value属性值
val()可以获取或设置元素的value属性值
设置元素的value属性值
语法：
示例
$(selector). val() 或 $(selector). val(value)
获取元素的value属性值
创建节点
• 创建元素节点：使用jQuery的工厂函数$()来完成
语法：
任务实现
$(function() { $("div img").mouseover(function(){
获取当前发生单击事件的小图片的src 属性，将其作为大图的src属性值
var big_src = $(this).attr("src"); //获取小图的src属性
$("#test").attr("src"，big_src); //设置大图的src属性
var path = $img.attr("src"); //获取图片<img>元素节点src属性的值 $img.attr("src"， "路径"); //设置图片<img>元素节点src属性的值 $img.attr({"src": "路径"， "title": "图片提示文字" }); //同时设置同一元素多个属性
创建1个有文本内容 和属性的<li>节点
插入节点
• 元素内部插入子节点
语法 append(content) appendTo(content) prepend(content) prependTo(content)
功能 $(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1); $(A).appendTo(B)表示把A追加到B中 如：$newNode1.appendTo("ul"); $(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1); $(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo ("ul");
了该邮件
• 掌握jQuery中删除节点的方法 • 掌握jQuery中遍历节点的方法
删除节点
jQuery提供了三种删除节点的方法
方法 remove()
功能 删除指定的元素，后代节点也会删除。返回 值是一个指向已被删除的节点的引用
示例 $(“p”).remove()删除p元素
detach()
删除指定元素，但其绑定的事件、附加的数 $(“p”).detach() 据都会保留下来