使用jQuery操作DOM（1） 《网页设计》.

Presentation on theme: "使用jQuery操作DOM（1） 《网页设计》."— Presentation transcript:

1 使用jQuery操作DOM（1） 《网页设计》

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

3 预习检查 提问 jQuery中如何添加和移除类样式？ append()和appendTo()有什么区别？ 如何获取元素的所有同辈节点？

4 本章任务 制作今日团购模块 制作YY安全中心登录框特效

5 本章目标 使用jQuery操作CSS样式 使用jQuery操作文本与属性值内容

6 DOM操作分类 DOM操作分为三类： JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持
DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green" 提示 教学指导： 该页PPT学员只需大致了解即可，无需详细解释各种名词及概念 JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

7 jQuery中的DOM操作 jQuery对JavaScript中的DOM操作进行了封装，使用起来也更简便 jQuery中的DOM操作可分为：
样式操作 内容及Value属性值操作 节点操作 节点属性操作 节点遍历 CSS-DOM操作 提示 “元素”和“节点”含义大同小异，本章并不严格区分

8 直接设置样式值 例如： 使用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"}); 设置透明度

9 动态添加边框效果 使用css()添加边框效果 演示示例1：动态添加边框效果

10 追加和移除样式 移除样式 追加样式 addClass(class)或addClass(class1 class2 … classN)
removeClass(“style2 ”)或removeClass("style1 style2 ") 演示示例2：追加和移除样式

11 切换样式 toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
toggleClass(class) 演示示例3：二级导航特效

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

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

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

15 Value值操作 val()可以获取或设置元素的value属性值 获取元素的value属性值 $(this).val(); 或
演示示例5：搜索框特效

16 操作—制作今日团购模块 练习 需求说明 当鼠标移过商品信息时，添加如右一所示的样式，边框及背景颜色变为#D51938，说明文字变为白色，鼠标移出时，恢复初始状态 完成时间：15分钟

17 操作—制作YY安全中心登录框特效 需求说明 练习 当文本框获得焦点时，文本框内默认文字消失，失去焦点时，文本框内提示文字再次出现
完成时间：15分钟

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

19 总结 样式操作：css()、 addClass()、 removeClass()、 toggleClass()
内容操作：html()、 text()、 val()