第五章 初次接触，初识jQuery.pptx

第五章 初识jQuery预习检查集中测试简单描述JavaScript与jQuery的关系jQuery的语法结构包括哪几部分？在jQuery中用于加载文档的方法是什么？在jQuery中显示和隐藏HTML元素的方法分别是什么？/43回顾及作业点评如何使用new操作符创建对象，举例说明？创建对象后，如何添加属性和方法，举例说明？请用自己的话描述什么是原型链？在继承中，组合继承的优点是什么？点评作业的提交情况和共性问题提问作业点评/43本章任务编写第一个jQuery程序制作当当顶部导航使用jQuery变换网页效果制作广告图片轮播切换效果/43本章目标能够搭建jQuery开发环境使用ready( )方法加载页面、掌握jQuery语法使用addClass( )方法和css( )方法为元素添加CSS样式使用next( )方法获取元素会使用show( )和hide( )显示和隐藏元素/43jQuery简介jQuery由美国人John Resig于2006年创建jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装它的设计思想是write less,do more/43初识jQuery实现隔行变色效果，只需一句关键代码示例$("tr:even").css("background-color","#e8f0f2");/43jQuery的应用jQuery与其他JavaScript库jQueryBootstrapZeptoExtYUI/43jQuery能做什么访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合提示jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率/43jQuery的优势体积小，压缩后只有100KB左右强大的选择器出色的DOM封装可靠的事件处理机制出色的浏览器兼容性使用隐式迭代简化编程丰富的插件支持/43获取jQuery进入jQuery官网：点击此处下载/43jQuery库文件jQuery库分开发版和发布版在页面中引入jQuery名称大小说 明jquery-1.版本号.js（开发版）约286KB完整无压缩版本，主要用于测试、学习和开发jquery-1.版本号.min.js（发布版）约94.8KB经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目<script src="js/jquery-1.12.4.js" type="text/javascript"></script>/43jQuery基本语法使用jQuery弹出提示框<script> $(document).ready(function() { alert("我欲奔赴沙场征战jQuery，势必攻克之！"); });</script>示例为页面加载事件绑定方法 演示示例1：弹出窗口特效/43$(document).ready()$(document).ready()与window.onload类似，但也有区别window.onload$(document).ready()执行时机必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完编写个数同一页面不能同时编写多个同一页面能同时编写多个简化写法无$(function(){ //执行代码})?;/43学员操作—编写第一个jQuery程序练习需求说明在WebStrom中配置jQuery开发环境打开页面时，弹出窗口，提示信息为“我编写的第一个jQuery程序！^^”完成时间：10分钟/43共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解/43jQuery语法结构$(selector).action()?; 语法工厂函数$()：将DOM对象转化为jQuery对象选择器 selector：获取需要操作的DOM 元素方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法/43jQuery操作页面元素使用addClass( )方法为元素添加样式使用css( )方法设置元素样式使用show( )、hide( ) 方法设置元素的显示和隐藏/43addClass( )方法jQuery 对象.addClass([样式名]);语法示例$("#current").addClass("current"); 演示示例2：导航菜单/43css( )方法设置一个CSS属性css("属性","属性值") ;css({"属性1":"属性值1","属性2":"属性值2"...}) ;语法示例同时设置多个CSS属性$(this).css({"backgro