内容回顾-北京邮电大学世纪学院.PPTVIP

* * * 学生操作—使用jQuery变换网页效果2-1 需求说明 单击标题“你是人间的四月天”后，标题字体大小、颜色发生变化，正文的字体大小发生变化，网页中所有元素的边距发生变化，所有文本的行高发生变化 指导 * 学生操作—使用jQuery变换网页效果2-2 实现思路 1. 在新建的HTML文档中引入jQuery库 2. 使用$(document).ready()创建文档加载事件 3. 使用$(选择器)选取所需元素 4. 使用css( )方法为所选取的元素添加CSS样式 指导 * 学员操作—使用addClass()为图片添加边框 需求说明 点击页面中的图片后，图片外围加上边框 练习 * 学员操作—制作帮助中心问答特效 需求说明 点击标题后，显示回答的内容，同时标题加上背景色 练习 * 共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧 共性问题集中讲解 * 2.6.3DOM对象转jQuery对象 使用$()函数进行转化：$(DOM对象) var txtName =document.getElementById(txtName); //DOM对象 var $txtName =$(txtName); //jQuery对象 jQuery对象命名一般约定以$开头 在事件中经常使用$(this)，this是触发该事件的对象 注意 * 2.6.4jQuery对象转DOM对象 jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象 var $txtName =$ (#txtName); //jQuery对象 var txtName =$txtName[0]; //DOM对象 通过get(index)方法得到相应的DOM对象 var $txtName =$(#txtName); //jQuery对象 var txtName =$txtName.get(0); //DOM对象 * 学员操作—使用jQuery方式弹出消息2-1 需求说明 点击页面中的文字“请为我们的服务做出评价”，弹出消息框，显示“非常满意” 将DOM对象转换为jQuery对象，再调用jQuery对象的方法 指导 * 学员操作—使用jQuery方式弹出消息2-2 实现思路 1. 在新建的HTML文档中引入jQuery库 2. 使用$(document).ready()创建文档加载事件 3. 获取DOM对象 4. 将DOM对象转换成jQuery 对象 5. 使用jQuery对象的click()方法，弹出对话框 指导 * 学员操作—使用DOM方式判断复选框选中状态 需求说明 使用DOM方式进行判断，当复选框选中时，弹出窗口 练习 * 学员操作—制作左导航特效 需求说明 单击“新手指南”显示其下的子菜单 使用css()为class为first的列表项添加蓝色背景 使用addClass()为该列表项设置字体大小为14px，加粗体，字体颜色为白色，为紧跟其后的列表项设置字体大小为14px 列表项之间的行间距为24px 练习 * 共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧 共性问题集中讲解 * 总结 jQuery的基本语法结构是 常用选择器 ID选择器 标签选择器 类选择器 设置样式的方法 css() addClass() DOM对象和jQuery对象可以相互转化 $(selector).action()?; * 课堂练习8：大图幻灯片技术 * * 教学指导： 本页代码只为了让学生对jQuery有个大致的印象，无需详细讲解 * 教学指导： 不能带入过多的细节，让学员在以后的学习中取体会jQuery的优势 * * * * * * 此处用到了id选择器，可以连同标签选择器、类选择器简单讲解一下 * 教学指导： 工厂函数在后面的章节中还有详细的讲解，这里只需讲解基本用法。 * 此处用到了click()事件，简单讲解该为事件绑定函数即可 * * * * * * * * 网页设计技术 任课教师：孙丽娜 北京邮电大学-世纪学院-艺术与传媒学院 * 第二部分（24学时）JavaScript控制CSS 第二节 JQuery基础知识与实践（4学时） 主要内容：jQuery基础知识 课堂练习8：大图幻灯片技术 * 本章目标 会在网页中导入jQuery框架 掌握jQuery的基本语法 掌握jQuery对象与DOM对象的相互转换 会使用jQuery实现简单特效 * 2.1jQuery简介 jQuery由美国人John Resig于2006年创建 jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装 它