jquery第一章第二章剖析.ppt

jQuery 第一章.认识jQuery javascript自身存在的三个弊端 复杂的文档对象模型（DOM） 不一致的浏览器实现和快捷的开发 调试工具的缺乏 1.1、什么是jQuery(极快瑞) javascript+Query(查询):辅助javascript开发的一个库 一个优秀的Javascript库（框架），一个轻量级的JS库。（2006.1发布） 语法简洁，跨平台兼容，兼容CSS3及各种浏览器。 使用户更方便地处理HTML、Events、实现动画效果，并且更方便地为网站提供Ajax交互。 使用户的HTML页面保持代码和HTML内容分离(onclick) 注意：jQuery2.x开始不再支持IE6、7、8 1.2、jQuery理念：write less, do more 轻量级。 强大的选择器 出色的DOM操作的封装 可靠的事件处理机制 完善的Ajax 不污染顶级变量 出色的浏览器兼容性 链式操作方式 隐式迭代 行为层与结构层的分离 丰富的插件支持 完善的文档 开源 1.3、jQuery代码的编写 1）进入jQuery官方网站：/下载需要的jQuery库文件 2）jQuery环境配置 想要在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可 jQuery的编程步骤 1）引入jQuery的js文件 2）使用选择器定位要操作的节点 3）调用jQuery的方法进行操作 第一个jQuery程序：hello world! script type=text/javascript src=jquery.js/script script type=text/javascript $(document).ready(function(){ alert(hello world);}); /script $(document).ready(function(){//...}); 注意： 要在页面上运行一个javascript函数，应该将这个函数写到$(document).ready()函数内 所有代码都将在DOM加载完毕后页面内容完全加载完毕前执行。 产生的效果：用户在第一眼看到元素时，就能立即看到元素产生的一些隐藏效果、显示效果和其他效果 P8与window.onload对比示例 1.4 jQuery对象和DOM对象 javascript定位节点： jQuery利用选择器定位节点： 什么是jQuery对象 jQuery为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述 jQuery提供的方法都是针对jQuery对象特有的，而且大部分方法的返回值类型也是jQuery对象，所以方法可以连缀调用“jQuery对象.方法（）.方法（）.方法（）... 如：$(div)和$(#id)都是jQuery对象 1.4.1 jQuery对象转成DOM对象 jQuery提供了两种方法： 1）[index] // get()[index] var $cr=$(#cr);//jQuery对象 var cr=$cr[0];//DOM对象 alert(cr.checked);//检测这个checkbox是否被选中了 2）get(index) var $cr=$(#cr);//jQuery对象 var cr=$cr.get(0);//DOM对象 alert(cr.checked); 1.4.2 DOM对象转成jQuery对象 方法：只需要用$()把DOM对象包装起来 $(DOM对象)（$()-jQuery的工厂函数） var cr=document.getElementById(cr);//DOM对象 var $cr=$(cr);//jQuery对象 注意： 只有DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但jQuery对象提供了一套更加完善的工具用于操作DOM（第三章） 平时用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂 实例演示1.4.3论坛注册： DOM方式和jQuery方式 jQuery开发工具 Dreamweaver VS2008 文本编辑器（记事本，notepad++...） ....... 第二章.jQuery选择器 2.1 jQuery选择器是什么 jQuery选择器类似于CSS选择器（定位元素，施加样式），能够实现定位元素，施加行为 使用jQuery选择器能够将内容与行为分离 CSS选择器 标签选择器：E{CSS规则} ID选择器：#ID{} 类选择器：E.classname{} 群组选择器：E1,E2,E3{} 后代选择器：E F{} 通配选择符：*{} ........ jQuery选择器