第8章 jQuery中的DOM操作

消失，失去焦点时若内容为空，则再
$(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
插入节点
• 元素外部插入同辈节点
语法 after(content) insertAfter(content) before(content) insertBefore(content)
功能
$(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1);
$(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul");
任务实现
$(function() { $("div img").mouseover(function(){
获取当前发生单击事件的小图片的src 属性，将其作为大图的src属性值
var big_src = $(this).attr("src"); //获取小图的src属性
$("#test").attr("src"，big_src); //设置大图的src属性
01 学会查找节点、创建节点、删除节点 02 学会复制节点、替换节点、遍历节点 03 能够根据需要动态改变页面元素的样式 04 能够动态改变元素的属性
本章任务
• 任务1 制作图片展示效果 • 任务2 制作留言板前端局部更新效果 • 任务3 制作电子邮件删除效果 • 任务4 表格隔行变色和当前行变色
明
任务描述
在页面中有四幅小图片和一个图片展示区域，当鼠标移入某幅小图片时，在 图片展示区域可看到其对应的大图。为凸显当前的小图状态，把其它三幅小 图透明度设为0.2
演示任务1：图片展示效果
任务分析
实现思路
1. 为四幅小图片绑定鼠标移入事件。 2. 获取当前发生鼠标移入事件的小图片的src属性，将其设置为大图的src
var defaultVal = $(this).val(); //保存当前文本框在的“值昵称”和“留言内容”文本框中
$(this).focus(function(){ //获得焦点时，如果值显为示默提认示值文字，，则获设得置焦为点空时提示文字
if($(this).val() == defaultVal){
说 JavaScript用于对html文档进行操作，它对这三类DOM操作都提供了支持
明
jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装
jQuery中的DOM操作
• 样式操作
内容及Value值操作
Байду номын сангаас• 节点属性操作 节点遍历
节点操作 CSS-DOM操作
说 “元素”和“节点”含义大同小异，这里不严格区分
任务描述
当在“昵称”和“留言内容”文本框内输入信息后，单击“单击这里提交 留言”按钮，输入的信息会显示在页面上端的留言板中。若没有输入昵称 和留言内容，单击“单击这里提交留言”时不能发送留言。
演示任务2：留言板前端局部更新效果
任务分析
实现思路
1. 在“昵称”和“留言内容”文本框中显示提示文字，获得焦点时提 示文字消失，失去焦点时若内容为空，则再次显示提示文字。
$("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); //将留言显示在留言板中
任务实现
$(function() {
$("div img").addClass("alpha"); //四幅小图透明度全部设为0.2
$("div img:eq(0)").removeClass("alpha"); //第一幅小图不设置透明
度
获取当前发生单击事件的小图片的
//当鼠标移入某幅小图时
src属性，将其作为大图的src属性值
DOM操作分类
DOM操作分为三类：
• DOM Core：任何一种支持DOM的编程语言都可以使用它，如 getElementById()
• HTML-DOM：用于处理HTML文档，如document.forms • CSS-DOM：用于操作CSS，如element.style.color="green"
了该邮件
• 掌握jQuery中删除节点的方法 • 掌握jQuery中遍历节点的方法
删除节点
jQuery提供了三种删除节点的方法
方法 remove()
功能 删除指定的元素，后代节点也会删除。返回 值是一个指向已被删除的节点的引用
示例 $(“p”).remove()删除p元素
detach()
删除指定元素，但其绑定的事件、附加的数 $(“p”).detach() 据都会保留下来
empty() 清空指定元素
$(“p”).empty()清空p元素
复制节点
• 通过clone()方法实现复制节点
参数ture或flase, true复制 事件处理，flase时反之
语法： $(selector).clone([includeEvents])
$(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1);
$(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul");
任务实现
关键代码
$(".text").each(function(){ //为每个匹配元素运行指定的函数，隐形迭代
创建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");
2. 获取用户输入的“昵称”和“留言内容”。 3. 若用户输入了“昵称”和“留言内容”，则创建一条留言，并显示
在页面上面的留言板中。 4. 将“昵称”和“留言内容”文本框的value值设置为初始值。
• 掌握jQuery中获取或设置元素的value属性值的方法 • 掌握jQuery中创建节点、插入节点的方法
属性值。这样大图也就随之改变了。 3. 为凸显当前的小图状态，把其它三幅小图透明度设为0.2。
• 掌握jQuery中获取和设置属性的方法
获取和设置属性
attr()方法：获取和设置元素属性
要获取图片的src属性，只需要给attr()方法传递一个参数，即属性名称 示例 var $img = $("#photo"); //获取图片<img>元素
var path = $img.attr("src"); //获取图片<img>元素节点src属性的值 $img.attr("src"， "路径"); //设置图片<img>元素节点src属性的值 $img.attr({"src": "路径"， "title": "图片提示文字" }); //同时设置同一元素多个属性