使用jQuery操作 DOM_H5之家 - 中国HTML5教程资源分享第一站

第六章
使用jQuery操作 DOM

回顾及作业点评
提问

列举至少4种常用的鼠标或键盘事件当元素获得焦点时将触发什么事件？ bind()方法有什么作用？

2/38

预习检查
提问

jQuery中如何添加和移除类样式？ append()

和appendTo()有什么区别？如何获取元素的所有同辈节点？

3/38

本章任务
制作今日团购模块制作YY安全中心登录框特效制作会员信息制作凡客诚品帮助中心页面

4/38

本章目标
使用jQuery操作CSS样式使用jQuery操作文本与属性值内容使用jQuery操作DOM节点使用jQuery遍历DOM节点使用jQuery操作CSS-DOM

5/38

DOM操作分类
DOM操作分为三类：
DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如 document.forms CSS-DOM：用于操作CSS，如 element.style.color="green"
提示

JavaScript用于对(x)html文档进行操作，它对这三类 DOM操作都提供了支持

6/38

jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装，使用起来也更简便 jQuery中的DOM操作可分为：
样式操作内容及Value属性值操作节点操作节点属性操作节点遍历 CSS-DOM操作
提示

“元素”和“节点”含义大同小异，本章并不严格区分
7/38

直接设置样式值
使用css()为指定的元素设置样式值
设置单个属性 css(name,value) 或 css({name:value, name:value,name:value…})

同时设置多个属性

例如：
$(this).css("border","5px solid #f5f5f5"); 或 $(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"}); 设置透明度
8/38

动态添加边框效果
使用css()添加边框效果

演示示例1：动态添加边框效果
9/38

追加和移除样式
追加样式
addClass(class)或addClass(class1 class2 … classN)

移除样式
removeClass(“style2 ”)或removeClass("style1 style2 ")

演示示例2：追加和移除样式
10/38

切换样式
toggleClass()模拟了addClass()与 removeClass()实现样式切换的过程
toggleClass(class)

演示示例3：二级导航特效
11/38

HTML代码操作
html()可以对HTML代码进行操作，类似于JS 中的innerHTML
获取元素中的html代码 $("div.left").html(); 或 $("div.left").html("<div class='content'>…</div>"); 设置元素中的html代码

演示示例4：使用html()操作元素内容
12/38

文本操作
text()可以获取或设置元素的文本内容
获取元素中的文本内容 $("div.left").text(); 或 $("div.left").text("<div class='content'>…</div>"); 设置元素中的文本内容

演示示例4：使用text()操作元素内容
13/38

html()和text()的区别
html()和text() 的区别如下：
语法 html() 参数无参数功能用于获取第一个匹配元素的 HTML内容或文本内容用于设置所有匹配元素的HTML 内容或文本内容用于获取所有匹配元素的文本内容用于设置所有匹配元素的文本内容

html(content content参数为 ) 元素的HTML内容 text() 无参数

text (content)

content参数为元素的文本内容

14/38

Value值操作
val()可以获取或设置元素的value属性值
获取元素的value属性值 $(this).val(); 或 $(this).val(""); 设置元素的value属性值

演示示例5：搜索框特效
15/38

学员操作—制作今日团购模块
练习

需求说明
当鼠标移过商品信息时，添加如右一所示的样式，边框及背景颜色变为#D51938，说明文字变为白色，鼠标移出时，恢复初始状态

完成时间：15分钟
16/38

学员操作—制作YY安全中心登录框特效
练习

需求说明
当文本框获得焦点时，文本框内默认文字消失，失去焦点时，文本框内提示文字再次出现

完成时间：15分钟
17/38

共性问题集中讲解
常见问题及解决办法
代码规范问题调试技巧共性问题集中讲解

18/38

节点操作
jQuery中节点操作主要分为：
查找节点（第4章已讲）创建节点插入节点删除节点替换节点复制节点

19/38

创建节点元素
工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点 $(element)：把DOM节点转化成jQuery节点 $(html)：使用HTML字符串创建jQuery节点

var $newNode2=$(“<li title=?标题为千与千寻?>千与千寻</li>”);
创建含文本与属性<li>元素节点

20/38

插入子节点
元素内部插入子节点
语法 append(content) 功能 $(A).append(B)表示将B追加到A中如：$("ul").append($newNode1);

appendTo(content) $(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo("ul"); prepend(content) $(A). prepend (B)表示将B前置插入到A中如：$("ul"). prepend ($newNode1);

prependTo(content $(A). prependTo (B)表示将A前置插入到B中 ) 如：$newNode1. prependTo ("ul");

演示示例6：节点属性操作
21/38

插入同辈节点
元素外部插入同辈节点
语法 after(content) 功能 $(A).after (B)表示将B插入到A之后如：$("ul").after($newNode1); $(A). insertAfter (B)表示将A插入到B之后如：$newNode1.insertAfter("ul"); $(A). before (B)表示将B插入至A之前如：$("ul").before($newNode1);

insertAfter(content)

before(content)

insertBefore(conten $(A). insertBefore (B)表示将A插入到B之前 t) 如：$newNode1.insertBefore("ul");

演示示例6：节点属性操作
22/38

替换节点
replaceWith()和replaceAll()用于替换某个节点
$("ul li:eq(1)").replaceWith($newNode1); 或 $newNode1.replaceAll("ul li:eq(1)"); 两者的关系类似于append()和appendTo()

演示示例6：节点属性操作
23/38

复制节点
clone()用于复制某个节点
$("ul li:eq(1)").clone(true).appendTo("ul"); 参数true表示复制事件处理

可以使用clone()实现输出DOM元素本身的HTML
$("<div></div>").append($(DOM元素).clone()).html();

演示示例6：节点属性操作

24/38

删除节点
jQuery提供了三种删除节点的方法 remove()：删除整个节点 detach()：删除整个节点，保留元素的绑定事件、附加的数据 empty()：清空节点内容

演示示例7：增减购物车商品信息

25/38

获取与设置节点属性
attr()用来获取与设置元素属性
获取alt属性值 $newNode4.attr("alt"); 或 $("img").attr({width:"50",height:"100"}); 设置width、height属性的值

removeAttr()用来删除元素的属性
$newNode2.removeAttr("title"); 删除元素的title属性

演示示例6：节点属性操作
26/38

学员操作—制作会员信息模块
练习

需求说明
单击“X”图标时，删除其所在行信息，单击“新增”时，增加一条表格中现有信息

完成时间：20分钟
27/38

共性问题集中讲解
常见问题及解决办法
代码规范问题调试技巧共性问题集中讲解

28/38

遍历子元素
children()方法可以用来获取元素的所有子元素
$("body").children();

获取<body>元素的子元素，但不包含子元素的子元素

演示示例8：节点遍历
29/38

遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
语法 next([expr]) 功能用于获取紧邻匹配元素之后的元素，如：$("li:eq(1)").next().css("backgroundcolor","#F06"); prev([expr]) 用于获取紧邻匹配元素之前的元素，如：$("li:eq(1)").prev().css("backgroundcolor","#F06"); slibings([expr] 用于获取位于匹配元素前面和后面的所有同辈元素， ) 如：$("li:eq(1)").siblings().css("backgroundcolor","#F06");

演示示例8：节点遍历

30/38

遍历前辈元素
jQuery中可以遍历前辈元素，方法如下：
parent()：获取元素的父级元素 parents()：元素元素的祖先元素
提示

jQuery中提供了each()、find()、filter()等节点操作方法，请登录青鸟学习平台进行学习

演示示例8：节点遍历
31/38

CSS-DOM操作
除css()外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法
语法 css() 功能设置或返回匹配元素的样式属性

height([value]) 设置或返回匹配元素的高度 width([value]) 设置或返回匹配元素的宽度

offset([value]) 返回以像素为单位的top和left坐标。此方法仅对可见元素有效

32/38

学员操作—制作凡客诚品帮助中心页面2-1
练习

33/38

学员操作—制作凡客诚品帮助中心页面2-2
练习

需求说明
左导航，当前项展开时，其余导航项关闭帮助中心，文本框获得焦点文字消失，失去焦点显示文字购物流程，鼠标移过时，当前项高亮显示，鼠标移至其同辈元素时，同辈元素高亮，并去掉该元素高亮样式

右下角问题解决，选中“未解决”时实现如下图所示的内容：

完成时间：30分钟
34/38

共性问题集中讲解
常见问题及解决办法
代码规范问题调试技巧共性问题集中讲解

35/38

总结
样式操作：css()、 addClass()、 removeClass()、 toggleClass() 内容操作：html()、 text()、 val() 节点操作：查找、创建、替换、复制和遍历节点属性操作：attr() 、removeAttr() 遍历操作：遍历子元素、遍历同辈元素和遍历前辈元素

36/38

作业
课后作业
教员备课时根据班级情况在此添加内容，应区分必做、选做内容，以满足不同层次学员的需求

预习作业
预习目标
了解表单校验和正则表达式

预习下一章学生用书，完成预习作业

37/38

38/38