jQuery操作DOM
本章目标 使用jQuery操作CSS样式 使用jQuery操作文本与属性值内容 使用jQuery操作DOM节点 使用jQuery操作CSS-DOM
DOM操作分类 DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green" 提示 教学指导： 该页PPT学员只需大致了解即可，无需详细解释各种名词及概念 JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持
jQuery中的DOM操作 jQuery对JavaScript中的DOM操作进行了封装，使用起来也更简便 jQuery中的DOM操作可分为： 样式操作 内容及Value属性值操作 节点操作 节点属性操作 节点遍历 CSS-DOM操作 提示 “元素”和“节点”含义大同小异，本章并不严格区分
直接设置样式值 使用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"}); 设置透明度
动态添加边框效果 使用css()添加边框效果 演示示例1：动态添加边框效果
追加和移除样式 追加样式 移除样式 addClass(class)或addClass(class1 class2 … classN) removeClass(“style2 ”)或removeClass("style1 style2 ") 演示示例2：追加和移除样式
切换样式 toggleClass()模拟了addClass()与removeClass()实现样式切换的过程 toggleClass(class) 演示示例3：二级导航特效
HTML代码操作 html()可以对HTML代码进行操作，类似于JS中的innerHTML 获取元素中的html代码 $("div.left").html(); 或 $("div.left").html("<div class='content'>…</div>"); 设置元素中的html代码 演示示例4：使用html()操作元素内容
文本操作 text()可以获取或设置元素的文本内容 获取元素中的文本内容 $("div.left").text(); 或 $("div.left").text("<div class='content'>…</div>"); 设置元素中的文本内容 演示示例4：使用text()操作元素内容
html()和text()的区别 html()和text() 的区别如下： 语法 参数 功能 html() 无参数 html(content) content参数为元素的HTML内容 用于设置所有匹配元素的HTML内容或文本内容 text() 用于获取所有匹配元素的文本内容 text (content) content参数为元素的文本内容 用于设置所有匹配元素的文本内容
Value值操作 val()可以获取或设置元素的value属性值 获取元素的value属性值 $(this).val(); 或 演示示例5：搜索框特效
练习1—制作今日团购模块 需求说明 练习 完成时间：15分钟 当鼠标移过商品信息时，添加如右一所示的样式，边框及背景颜色变为#D51938，说明文字变为白色，鼠标移出时，恢复初始状态 完成时间：15分钟
需求说明 练习2—制作YY安全中心登录框特效 练习 当文本框获得焦点时，文本框内默认文字消失，失去焦点时，文本框内提示文字再次出现 完成时间：15分钟
共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧 共性问题集中讲解
节点操作 jQuery中节点操作主要分为： 查找节点 创建节点 插入节点 删除节点 替换节点 复制节点
创建含文本与属性<li>元素节点 创建节点元素 工厂函数$()用于获取或创建节点 $(selector)：通过选择器获取节点 $(element)：把DOM节点转化成jQuery节点 $(html)：使用HTML字符串创建jQuery节点 var $newNode2=$(“<li title=‘标题为千与千寻’>千与千寻</li>”); 教学指导： 重点讲解$(html)这种方式 创建含文本与属性<li>元素节点
插入子节点 元素内部插入子节点 语法 功能 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"); 教学指导： 对照PPT简单讲解，使用演示案例时再详细讲解 演示示例6：节点属性操作
插入同辈节点 元素外部插入同辈节点 语法 功能 after(content) $(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1); insertAfter(content) $(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul"); before(content) $(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1); insertBefore(content) $(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul"); 教学指导： 对照PPT简单讲解，使用演示案例时再详细讲解 演示示例6：节点属性操作
两者的关系类似于append()和appendTo() 替换节点 replaceWith()和replaceAll()用于替换某个节点 $("ul li:eq(1)").replaceWith($newNode1); 或 $newNode1.replaceAll("ul li:eq(1)"); 两者的关系类似于append()和appendTo() 演示示例6：节点属性操作
复制节点 clone()用于复制某个节点 可以使用clone()实现输出DOM元素本身的HTML $("ul li:eq(1)").clone(true).appendTo("ul"); 参数true表示复制事件处理 可以使用clone()实现输出DOM元素本身的HTML $("<div></div>").append($(DOM元素).clone()).html(); 演示示例6：节点属性操作
删除节点 jQuery提供了三种删除节点的方法 remove()：删除整个节点 detach()：删除整个节点，保留元素的绑定事件、附加的数据 empty()：清空节点内容 演示示例7：增减购物车商品信息
获取与设置节点属性 attr()用来获取与设置元素属性 removeAttr()用来删除元素的属性 获取alt属性值 $newNode4.attr("alt"); 或 $("img").attr({width:"50",height:"100"}); 设置width、height属性的值 removeAttr()用来删除元素的属性 $newNode2.removeAttr("title"); 删除元素的title属性 演示示例6：节点属性操作
练习3—制作会员信息模块 练习 需求说明 单击“X”图标时，删除其所在行信息，单击“新增”时，增加一条表格中现有信息 完成时间：20分钟
共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧 共性问题集中讲解
获取<body>元素的子元素，但不包含子元素的子元素 遍历子元素 children()方法可以用来获取元素的所有子元素 $("body").children(); 获取<body>元素的子元素，但不包含子元素的子元素 演示示例8：节点遍历
遍历同辈元素 jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素 语法 功能 next([expr]) 用于获取紧邻匹配元素之后的元素， 如：$("li:eq(1)").next().css("background-color","#F06"); prev([expr]) 用于获取紧邻匹配元素之前的元素， 如：$("li:eq(1)").prev().css("background-color","#F06"); slibings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素， 如：$("li:eq(1)").siblings().css("background-color","#F06"); 教学指导： 对照PPT简单讲解，使用演示案例时再详细讲解 演示示例8：节点遍历
遍历前辈元素 jQuery中可以遍历前辈元素，方法如下： parent()：获取元素的父级元素 parents()：元素元素的祖先元素 提示 jQuery中提供了each()、find()、filter()等节点操作方法，请登录青鸟学习平台进行学习 演示示例8：节点遍历
CSS-DOM操作 除css()外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法 语法 功能 css() 设置或返回匹配元素的样式属性 height([value]) 设置或返回匹配元素的高度 width([value]) 设置或返回匹配元素的宽度 offset([value]) 返回以像素为单位的top和left坐标。此方法仅对可见元素有效 教学指导： 如果时间允许，此处可以补充height()和通过css()获取
练习4—制作凡客诚品帮助中心页面2-1 练习 教学指导： 该上机练习难度大，需求多，教员可以在演示需求的时候简单讲解实现思路及关键代码
需求说明 练习4—制作凡客诚品帮助中心页面2-2 练习 左导航，当前项展开时，其余导航项关闭 帮助中心，文本框获得焦点文字消失，失去焦点显示文字 购物流程，鼠标移过时，当前项高亮显示，鼠标移至其同辈元素时，同辈元素高亮，并去掉该元素高亮样式 右下角问题解决，选中“未解决”时实现如下图所示的内容： 完成时间：30分钟
共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧 共性问题集中讲解
总结 样式操作：css()、 addClass()、 removeClass()、 toggleClass() 内容操作：html()、 text()、 val() 节点操作：查找、创建、替换、复制和遍历 节点属性操作：attr() 、removeAttr() 遍历操作：遍历子元素、遍历同辈元素和遍历前辈元素