JQuery第一季 ——Ajax开发.ppt

JQuery ——Ajax开发 概述 jQuery由美国人John Resig于2006年初创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jouml;rn Zaeffere ，罗马尼亚的Stefan Petre等等。 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可 能做什么 程序员：简化javascript和ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。 用户：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。 主流的JavaScript框架 YUI Dojo mooTools Prototype jQuery More.. 性能测试：/slickspeed/ JQUERY的特点 轻量级：经GZip压缩后传输的代码文件仅14KB，未经压缩传送的代码文件仅26KB 链式语法 ：$(p.surprise).addClass(ohmy).show(slow); CSS 1-3 选择器：支持CSS选择器选定DOM对象 跨浏览器：支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+ 简单：较其它JS库更容易入门，中、英文档很齐全 易扩展： JQUERY UI 、 JQUERY FX –已经有很完善的基于JQUERY的用户界面库 和网页特效库 页面载入 $(document).ready(callback); $(document).ready(function() {});?简写$(function(){}); 绑定一个在DOM文档载入完成后执行的函数 同一个页面 script type=text/javascript src=jquery.js/script script type=text/javascript $(document).ready(function() { alert(helloworld); }); $(function() { alert(!!); }); $(window).bind(load,function() { alert(This is bind window loaded); }); //但是window.onload却要比他们快 /script script type=text/javascript window.onload = function() { alert(window onload); } /script 核心函数 $(expression,[context]) 接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素 jQuery 的核心功能都是通过这个函数实现的 $(html) 根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素 $(elements) 将一个或多个DOM元素转化为jQuery对象 注意是jQuery对象，而不是DOM对象。如果我想得到DOM对象呢？很简单，只需在其后跟一个索引值（如[0]）—因为它得到的是一个对象数组，即可得到DOM对象。然后就可以使用innerHTML、innerText等DHTML方法和属性了。 选择器 返回jQuery对象 基本选择器*, class,element, id, selector1, selector2等. 层级选择器ancestor descendant, parent child, prev + next , prev ` siblings 简单选择器even, odd, eq[index], last, first等 内容选择器contains[text], empty, parent, has[selector]等 可见性选择器hidden, visible. 属性选择器[attribute *=value], [attribute =value], [attribute]等 子元素选择器first-child, last-child, nth-child(index), only-child. 表单选择器button, checkbox, file, hidden等. 表单对象属性选择器checked,