精通第章.pptxVIP

精通JavaScript+jQuery第10章：jQuery基础jQuery概述jQuery的“$”jQuery与CSS3使用选择器管理选择结果采用jQuery链JQUERY概述 JQUERY简介 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框架YUIDojomooToolsPrototypejQueryMore..性能测试：/slickspeed//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中，添加jsscript type=text/javascript src=./script/jquery.js/script2.3 MyEclipse中可以实现jQuery的智能提示 jQuery的“$”选择器 $(“h2 a”);功能函数前缀$.trim(sString);解决window.onload函数的冲突创建DOM元素自定义添加“$”解决“$”的冲突$(“div p”); jQuery(“div p”);jQuery与CSS3CSS3标准浏览器的兼容性jQuery的引入提供了CSS3标准下的选择器兼容性好使用选择器属性选择器$(“a[href=10-9.html]”).addClass(“myClass”);包含选择器$(“li:has(a)”)位置选择器$(“p:first-child”)过滤选择器$(“input[name=cbx]:checked”)实现反向过滤$(“input:not(:radio)”)管理选择结果获取元素的个数$(“img”).size()提取元素$(“img[title]”)[1] $(“img[title]”).get(1)添加、删除、过滤元素$(“img[alt]”).add(“img[title]”) 将设置了alt属性和title属性的img组合成新数组$(“img[title]”).not(“[title*=isaac]”)$(“img”).filter(“[title*=isaac]”) $(“img [title*=isaac]”) 查询过滤新元素集合$(“p”).find(“span”) $(“span”,$(“p”))采用jQuery链jQuery的语句可以链接在一起缩短代码的长度实现特殊的效果$(“div”).addClass(“myClass1”).filter(function(index){ return index=1 || $(this).attr(“id”)==“fourth”;}).addClass(“myClass2”);