jQuery基础入门ppt

jQuery基础教程唐四薪《基于Web标准的网页设计与制作》配套课件V2.0清华大学出版社内容简介jQuery的由来及简介一jQuery对象和DOM对象二jQuery选择器三jQuery中的DOM操作四使用jQuery创建动画效果三五RIA技术RIA(RichInternetApplications)富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户端。常见的RIA技术AjaxFlexSliverlightJavaScript及其框架是实现RIA的重要工具JavaScript框架简介随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架）当前流行的JavaScript库有:jQuery的优势轻量级（Lightweight）强大的选择器出色的DOM操作封装可靠的事件处理机制出色的浏览器兼容性jQuery理念:写得少,做得多jQuery的使用下载：框架下载。通常只需下载最小的jQuery包（Minified）即可。目前最新的版本jquery-1.3.2.min.js文件只有55.9KB引用：scriptsrc=jquery.min.js/script将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。第一个jQuery程序scriptsrc=jquery.min.js/scriptscript$(document).ready(function(){alert(HelloWorld!);});/script引入jQuery等待DOM文档载入后执行类似于window.onload弹出一个对话框jQuery对象与DOM对象jQuery对象jQuery对象就是通过jQuery包装DOM对象后产生的对象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)DOM对象转成jQuery对象对于一个DOM对象,只需要用$()把DOM对象包装起来(jQuery对象就是通过jQuery包装DOM对象后产生的对象),就可以获得一个jQuery对象.例如：$(document.getElementById(“msg”))转换后就可以使用jQuery中的方法了jQuery对象与dom对象的转换举例以下几种写法都是正确的：$(#msg).html();$(#msg)[0].innerHTML;$(#msg).eq(0)[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选择器的优点:简洁的写法完善的事件处理机制基本选择器基本选择器是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元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器注意:(“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))改变不包含子元素(或者文本元素)的div空元素的背景色为#bbffaa改变含有class为mini元素的p元素的背景色为#bbffaa$(p:has(.mini))改变含有子元素(或者文本元素)的div元素的背景色为#bbffaa可见性过滤选择器可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素可见选择器:hidden不仅包含样式属性display为none的元素,也包含文本隐藏域(inputtype=“hidden”)和visible:hidden之类的元素可见性过滤选择器示例改变所有可见的div元素的背景色为#bbffaa选取所有不可见的元素,利用jQuery中的show()方法将它们显示出来,并设置其背景色为#bbffaa选取所有的文本隐藏域,并打印它们的值属性过滤选择器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素属性过滤选择器示例选取下列元素,改变其背景色为#bbffaa含有属性title的div元素.属性title值等于test的div元素.属性title值不等于test的div元素(没有属性title的也将被选中).属性title值以te开始的div元素.属性title值以est结束的div元素.属性title值含有es的div元素.选取有属性id的div元素，然后在结果中选取属性title值含有“es”的div元素.子元素过滤选择器nth-child()选择器详解如下：(1):nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素(2):nth-child(2):能选取每个父元素下的索引值为2的元素(3):nth-child(3n):能选取每个父元素下的索引值是3的倍数的元素(3):nth-child(3n+1):能选取每个父元素下的索引值是3n+1的元素子元素过滤选择器示例选取下列元素,改变其背景色为#bbffaa每个class为one的div父元素下的第2个子元素.每个class为one的div父元素下的第一个子元素每个class为one的div父元素下的最后一个子元素如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素表单对象属性过滤选择器此选择器主要对所选择的表单元素进行过滤表单对象属性过滤选择器示例利用jQuery对象的val()方法改变表单内可用input元素的值利用jQuery对象的val()方法改变表单内不可用input元素的值利用jQuery对象的length属性获取多选框选中的个数利用jQuery对象的text()方法获取下拉框选中的内容表单选择器练习1.给网页中所有的p元素添加onclick事件2.是一个特定的表格隔行变色3.对多选框进行操作,输出选中的多选框的个数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()方法来获取它的各种属性值创建节点创建节点:使用jQuery的工厂函数$():$(html);会根据传入的html标记字符串创建一个DOM对象,并把这个DOM对象包装成一个jQuery对象返回.注意:动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;当创建单个元素时,需注意闭合标签和使用标准的XHTML格式.例如创建一个p元素,可以使用$(“p/”)或$(“p/p”),但不能使用$(“p”)或$(“P”)创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建插入节点(1)动态创建了HTML元素之后,还需要将新创建的节点插入到文档中,即成为文档中某个节点的子节点插入节点(2)以上方法不但能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动.创建节点和插入节点示例varnewP=$(p武广高速铁路即将通车！/p);newP.insertAfter(“#chapter”);//将创建的newP元素插入到ID为#chapter的元素之后或者newP.appendTo(“body”);//插入到body元素里删除节点remove():从DOM中删除所有匹配的元素,传入的参数用于根据jQ