jQuery基础培训(1).pptVIP

Write Less,Do More  ——jQuery基础培训 钟永生 jQuery概述 jQuery是继prototype之后又一个优秀的Javascrīpt框架。 其宗旨是——Write Less,Do More,写更少的代码,做更多的事情。 程序员：简化javascript和ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。 用户：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页资源。 jQuery特点 　　它是轻量级的js库(压缩后只有50k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 2.0+, Safari 2.0+, Opera 9.0+）。 　　jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 　　jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery特点 　　jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id或者class即可。 jQuery用简洁的方法，把大量常用功能封装起来，并提供精巧的插入式API，来满足标准库之外的功能模块的实现。jQuery秉持的核心，乃DOM元素的集合——它把元素集合作为一个根本，给高度抽象出来了。最重要的，是这种遵循最佳实践的抽象，能让jQuery与其他Javascript代码相处融洽。 Hello World -0- 国际惯例，先上个 Hello World jQuery 下载安装 jQuery下载 当前版本1.3.2 官方网站下载：/ jQuery安装 在页面头部head中，添加js script type=text/javascript“ src=“../jquery.min.js/script VS2008中可以实现jQuery的智能提示 /p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc2.js Document Ready页面载入 $(document).ready(function() {}); 可以简写为 $(function(){}); 绑定一个在DOM文档载入完成后执行的函数 同一个页面上可以多次使用 这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。 简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。 Demo 从查找开始 还记得$()这个东西吧 ，相信很多人都熟悉不过了。最早出现在prototype中，后来的mootools也延用了这种设计，在jQuery中，$()也被使用了，但是却有着完全不一样的使用方法 var someElement = $(“#myId”);  看起来比其他两个框架的要多了一个#，好，看看下面的用法：  $(div p); 选取了所有div里的p 　 $(div.container); 选取了class=“container”的div元素 　 $(“div #msg”); 选取了所有div里id=“msg”的元素 $(table a,context); 选取了在context为上下文的所有table里的链接 　　 如果你熟悉CSS，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jQuery就是通过这样的方式来找到Dom对象里面的元素，也就是相当于一个CSS的选择器。 选择器 基本选择器 #id 根据给定的ID匹配一个元素。 * 匹配所有元素 .class 根据给定的类匹配元素。 element 根据给定的元素名匹配所有元素 selector1, selector2 将每一个选择器匹配到的元素合并后一起返回。 层级选择器 ancestor descendant 在给定的祖先元素下匹配所有的后代元素 parent child 在给定的父元素下匹配所有的子元素 prev + next 匹配所有紧接在 prev 元素后的 next 元素 prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素 选择器 简单选择器 :ev