1.jQuery入门-第一季.ppt

jQuery 第一季 ——简单应用 认识jQuery jQuery由美国人John Resig于2006年初创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的 Zaeffere ，罗马尼亚的Stefan Petre等等。 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 它的主旨：以更少的代码、实现更多的功能 能做什么 程序员：简化javascript和ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。 用户：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页效果。 1、访问和操作DOM元素 2、控制页面样式（CSS） 3、对页面事件的处理 4、大量插件在页面中的运用 5、与Ajax技术的完美结合 主流的JavaScript框架 YUI Dojo mooTools Prototype jQuery More.. 搭建jQuery开发环境 1、下载jQuery文件库 在jQuery的官网中进行下载，目前在本课程中，使用的必威体育精装版版本为1.6.4。 2、引入jQuery文件库 jQuery框架不需要单独安装，只需要在页面中script中进行导入即可。 script type=“text/javascript” src=“jquery-1.6.4.min.js”/script 第一简单的jQuery应用 html head title第一个简单的jQuery程序/title script type=text/javascript src=“jquery-1.6.4.min.js/script script type=text/javascript $(document).ready(function(){ alert(“Hello World！); }) /script /head body /body /html $(document).ready(function(){ ….. }) $(function(){ ....... }) 上述代码，与我们传统的javascript中： window.onLoad=function(){ } 类似。在某种程度上我们可以进行互换，但其实是有着本质的区别。 1、执行时机不同： $(document).ready在页面框架下载完毕后就执行，而window.onLoad必须在页面全部加载（包括图片的下载）完成后才能执行. 2、执行数量不同： $(document).ready可以重复写多个且每次执行结果不同；而window.onLoad虽然可以写多个，但是执行结果只有最后一个，无法完成多结果的输出。 jQuery的代码构成 1、“$”符号的使用 我们可以把“$”看做jQuery对象。 2、事件操作的链接式写法 例如： $(function(){ $(.divTitle).click(function(){ $(this).addClass(divCurrColor).next(.divContent).css(display,block); }); }); 我们来实现一个隐藏功能，了解一下jQuery的便利。 jQuery访问DOM对象 1、如何获得DOM对象 例如：div id=“title”测试文本/div 通过javascritp来获取DOM对象及内容 var title = document.getElementById(“titile”); var content = title.innerHTML; 2、使用jQuery对象 var title = ${#title}; var content = title.html(); 通过这两段代码的比对，大家应该能够很清楚的辨别jQuery访问DOM的更简单、更有效了。 实现登录功能的javaScript和jQuery代码对比。 jQuery控制CSS 在jQuery中，提供了全部的CSS3的选择器。开发者可以预定义自己的CSS样式，然后通过jQuery中的addClass()方法将该样式添加到页面中。