第八章 使用jQuery操作 DOM.pptx

第八章 使用jQuery操作 DOM预习检查集中测试DOM操作分为哪些类型？ jQuery中如何添加和移除类样式？append()和appendTo()有什么区别？如何获取元素的所有同辈节点？简述remove( )方法与empty( )方法的异同简述parent( )方法与parents( )方法的异同/50回顾及作业点评列举至少4种常用的鼠标或键盘事件当元素获得焦点时将触发什么事件？bind()方法有什么作用？页面中有一个ID为title的div，编写代码隐藏此元素点评作业的提交情况和共性问题提问作业点评/50本章任务制作今日团购模块制作QQ简易聊天框制作论坛帖子页面制作凡客诚品帮助中心页面/50本章目标使用jQuery操作CSS样式使用jQuery操作网页元素使用jQuery操作文本与属性值内容使用jQuery操作DOM节点使用jQuery遍历DOM节点使用jQuery操作CSS-DOM/50DOM操作分类DOM操作分为三类：DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()HTML-DOM：用于处理HTML文档，如document.formsCSS-DOM：用于操作CSS，如element.style.color="green"提示JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持/50jQuery中的DOM操作jQuery对JavaScript中的DOM操作进行了封装jQuery中的DOM操作样式操作内容及Value值操作节点操作节点属性操作节点遍历CSS-DOM操作提示“元素”和“节点”含义大同小异，本章并不严格区分/50设置和获取样式值使用css()为指定的元素设置样式值或获取样式值设置单个属性语法css(name,value) ;或css({name:value, name:value,name:value…}) ;同时设置多个属性示例获取属性值css(name)$(this).css("border","5px solid #f5f5f5");或$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});设置透明度/50追加和移除样式2-1追加样式语法$(selector).addClass(class);或$(selector).addClass(class1 class2 … classN);示例.text{ padding:10px;}.content {background-color:#FFFF00; }.border {border:1px dashed #333; }$("h2").mouseover(function() { $("p").addClass("content border");});演示示例1：追加和移除样式/50追加和移除样式2-2移除样式语法$(selector).removeClass("class") ;或$(selector).removeClass("class1 class2 … classN ") ;示例$("h2").mouseout(function() { $("p").removeClass("text content");});演示示例1：追加和移除样式/50切换样式toggleClass()模拟了addClass()与removeClass()实现样式切换的过程语法示例$(selector).toggleClass(class) ;$("h2").click(function() { $("p").toggleClass("content border");});/50判断是否含指定的样式hasClass( )方法来判断是否包含指定的样式语法$(selector). hasClass(class);$("h2").mouseover(function() { if(!$("p").hasClass("content ")){ $("p").addClass("content "); }});示例$("h2").mouseout(function() { if($("p").hasClass("content ")) { $("p").removeClass("content "); }});演示示例2：hasClass的用法/50内容操作HTML代码操作标签内容操作属性值操作/50HTML代码操作html()可以对HTML代码进行操作，类似于JS中的innerHTML语法获取元素中的html代码$("div.left").html();或 $("div.left").html("<div class='con