精通JavascriptJQuery--第10章.pptx

精通JavaScript+jQuery 第10章：jQuery基础 jQuery概述 jQuery的“$” jQuery与CSS3 使用选择器 管理选择结果 采用jQuery链 JQUERY概述 JQUERY简介 jQuery由美国人John Resig于2006年初创建，至今已吸引了来自世界 各地的众多javascript高手加入其team，包括来自德国的Jrn 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 的用户界面库 和网页特效库 jQuery下载 当前版本1.7.2 官方网站下载：/ 2.2 jQuery安装 在页面头部head中，添加js 2.3 MyEclipse中可以实现jQuery的智能提示 jQuery的“$” 选择器 $(“h2 a”); 功能函数前缀 $.trim(sString); 解决window.onload函数的冲突 创建DOM元素 自定义添加“$” 解决“$”的冲突 $(“div p”); jQuery(“div p”); jQuery与CSS3 CSS3标准 浏览器的兼容性 jQuery的引入 提供了CSS3标准下的选择器 兼容性好 使用选择器 属性选择器 $(“ahref=10-9.html”).addClass(“myClass”); 包含选择器 $(“li:has(a)”) 位置选择器 $(“p:first-child”) 过滤选择器 $(“inputname=cbx:checked”) 实现反向过滤 $(“input:not(:radio)”) 管理选择结果 获取元素的个数 $(“img”).size() 提取元素 $(“imgtitle”)1 $(“imgtitle”).get(1) 添加、删除、过滤元素 $(“imgalt”).add(“imgtitle”) 将设置了alt属性和title属性的img组合成新数组 $(“imgtitle”).not(“title*=isaac”) $(“img”).filter(“title*=isaac”) $(“img title*=isaac”) 查询过滤新元素集合 $(“p”).find(“span”)$(“span”,$(“p”) 采用jQuery链 jQuery的语句可以链接在一起 缩短代码的长度 实现特殊的效果 $(“div”).addClass(“myClass1”).filte