jQuery

jQueryBasicjQuery的应用举例1.制作渐变背景色的下拉菜单$(document).ready(function(){$(#navli).hover(function(){$(this).children(ul).fadeIn(600);$(this).find(img).attr(src,minus.gif);},function(){$(this).children(ul).fadeOut(600);$(this).find(img).attr(src,plus.gif);});$(#navlili).each(function(i){//下拉菜单项逐渐变色的代码部分$(this).css(background-color,rgb(+(320-i*16)+,+(240-i*16)+,+(240-i*16)+));});});2.使用jQuery插件jqzoom实现图片放大镜效果在一些电子商务的商品展示网页上，为了更好的展示商品，一般都会添加放大镜的效果。当把鼠标放到小图片上，右边会自动的出现小图局部的放大图，3.制作图片轮显效果divclass=imgsBoxdivclass=imgsahref=#imgid=picsrc=images/01.jpgwidth=282height=164//a/divdivclass=clickButtondivaclass=activehref=1/aaclass=href=2/aaclass=href=3/aaclass=href=4/aaclass=href=5/a/div/div/div内容简介jQuery简介一jQuery对象和DOM对象二jQuery选择器三jQuery中的DOM操作四使用jQuery创建动画效果三五jQuery简介什么是jQuery?jQuery是一个轻量级的JS框架，是快速的，简洁的javaScript库。开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架）jQuery能做什么?程序员：简化javascript和ajax编程，能够使程序员从书写大量繁杂的JS代码解脱出来。jQuery能够使html页面保持js代码和html代码分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。用户：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页。比如：jQuery可以实现比如渐变弹出,图层移动等动画效果,让我们获得更好的用户体验jQuery简介特点：1.提供了强大的功能函数使用这些功能函数,能够帮助我们快速完成各种功能,让我们的代码异常简洁.2，解决浏览器兼容性问题原来针对不同的浏览器编写不同的js脚本是一件痛苦的事情.有了jQuery我们将很方便快速编写代码。比如从前要根据event获取事件触发者,在ie下是event.srcElements，而在火狐等浏览器下是event.target.而在jQuery中的Event事件对象已经被格式化成所有浏览器通用的,jQuery通过统一的event对象,让我们可以在所有浏览器中使用event.target获取事件对象.3.丰富的UIjQuery可以实现比如渐变淡出,图层移动等动画效果,使用jQuery就可以帮助我们快速完成此类应用，让我们获得更好的用户体验。（还可以在网上找jq插件，完成更加绚丽的页面）jQuery的优势轻量级（Lightweight）强大的选择器出色的DOM操作封装可靠的事件处理机制出色的浏览器兼容性jQuery理念:写得少,做得多jQuery的使用下载：框架下载。通常只需下载最小的jQuery包即可。目前最新的版本jQuery1.7.2引用：页面头部head中，添加jsscriptsrc=jQuery1.7.2.js/script将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。jQuery对象与DOM对象jQuery对象jQuery对象就是通过jQuery包装DOM对象后产生的对象对于一个DOM对象,只需要用$();把DOM对象包装起来，就可以获得一个jQuery对象.例如：$(document.getElementById(“msg”))jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:$(“#tab”).html();jQuery对象无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的任何方法建议约定：如果获取的是jQuery对象,那么要在变量前面加上$.定义变量的区别var$variable=jQuery对象varvariable=DOM对象jQuery对象转成DOM对象jQuery对象不能使用DOM中的方法,但如果jQuery没有封装想要的方法,不得不使用DOM方法的时候,有如下两种处理方法:(1)当jQuery对象是一个数组对象,可以通过[index]的方法得到对应的DOM对象.如：$(#msg)[0](2)使用jQuery中的get(index)方法得到相应的DOM对象$(#msg).get(0)jQuery对象与dom对象的转换举例以下几种写法都是正确的：$(#msg).html();$(#msg)[0].innerHTML;$(#msg).get(0).innerHTML;如：$(#msg)[0]，$(div).eq(1)[0]，$(div).get()[1]，$(td)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用jQuery的方法jQuery的选择器jQuery选择器选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器jQuery选择器的优点:简洁的写法完善的事件处理机制各种不同的选择器基本选择器：*,class,element,id,selector1,selector2等.层级选择器：ancestordescendant,parentchild,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,disabled,enabled,selected.基本选择器基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和标记名来查找DOM元素基本选择器示例改变id为one的元素的背景色为红色$(#one).css(backgroundColor,red);改变元素名为p的所有元素的背景色为#bbffaa，字体颜色为红色$(p).css({color:red,backgroundColor:#bbffaa});改变第一个p元素的背景色为红色$(p).eq(0).css(backgroundColor,red);改变所有h1元素和id为one的元素的背景色为#bbffaa$(h1,#one).css(backgroundColor,#bbffaa);层次选择器如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器注意:1.包含所有后代，包括孙子元素；2.不包括孙子元素(“prev~div”)选择器只能选择“#prev”元素后面的同辈元素;而jQuery中的方法siblings()与前后位置无关,只要是同辈节点就可以选取层次选择器示例改变body内所有div的背景色为#bbffaa$(“bodydiv)改变body内子元素div的背景色为#bbffaa$(“bodydiv)改变id为one的下一个div的背景色为#bbffaa$(#one+div)改变id为two的元素后面的所有兄弟div的元素的背景色为#bbffaa$(#two~div)改变id为two的元素所有p兄弟元素的背景色为#bbffaa$(#two).siblings(p)过滤选择器过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,该选择器都以“:”开头按照不同的过滤规则,过滤选择器又可分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器.基本过滤选择器基本过滤选择器示例改变第一个div元素的背景色为#bbffaa$(div:first)改变id不为one的所有p元素的背景色为#bbffaa$(p:not('#one'))改变索引值为偶数的tr元素的背景色为#bbffaa$(“tr:even)改变索引值为大于3且为奇数的p元素的背景色为#bbffaa$(“p:gt(3):odd)改变所有的标题元素的背景色为#bbffaa$(:header)改变当前正在执行动画的所有元素的背景色为#bbffaa内容过滤选择器内容过滤选择器的过滤规则主要体现在：它所包含的子元素和文本内容上内容过滤选择器示例改变含有文本‘di’的p元素的背景色为#bbffaa$(p:cotains(di))改变含有class为mini元素的p元素的背景色为#bbffaa$(p:has(.mini))可见性过滤选择器可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素可见选择器:hidden不仅包含样式属性display为none的元素,也包含文本隐藏域(inputtype=“hidden”)和visible:hidden之类的元素属性过滤选择器属性过滤选择器的过滤规则是：通过（元素的属性）来获取相应的元素子元素过滤选择器nth-child()选择器详解如下：(1):nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素(2):nth-child(2):能选取每个父元素下的索引值为2的元素(3):nth-child(3n):能选取每个父元素下的索引值是3的倍数的元素(3):nth-child(3n+1):能选取每个父元素下的索引值是3n+1的元素表单对象属性过滤选择器此选择器主要对所选择的表单元素进行过滤表单选择器jQuery中的DOM操作jQuery中的DOM操作DOM(DocumentObjectModel—文档对象模型)：一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类:DOMCore:DOMCore并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它.它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档,例如:XMLHTMLDOM:使用JavaScript和DOM为HTML文件编写脚本时,有许多专属于HTML-DOM的属性CSS-DOM:针对于CSS操作,在JavaScript中,CSS-DOM主要用于获取和设置style对象的各种属性查找节点查找节点:查找元素节点:通过jQuery选择器完成.查找属性节点:查找到所需要的元素之后,可以调用jQuery对象的attr()方法来获