jQuery基础入门ppt

jQuery基础教程jQuery的入门全教程tb内容简介三jQuery的由来及简介一jQuery对象和DOM对象二jQuery选择器三jQuery中的DOM操作四使用jQuery创建动画效果三五使用jQuery完成Ajax操作六RIA技术RIA(RichInternetApplications)富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户端。常见的RIA技术AjaxFlexSliverlightJavaScript及其框架是实现RIA的重要工具JavaScript框架简介随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架）当前流行的JavaScript库有:用JavaScript语言实现的开源DHTML工具包Ajax库Ajax库的出现是为了将程序员从解决越来越多的RIA应用的代码泥潭里解救出来,不用去关注底层的实现代码,只需将注意力放到业务需求上.jQuery的优势轻量级（Lightweight）强大的选择器出色的DOM操作封装可靠的事件处理机制出色的浏览器兼容性jQuery理念(宗旨):写得少,做得多WRITELESS,DOMOREjQuery的使用将Jquery库嵌入到web页面中：(有以下两种方法)1：使用Google在线提供的特定版本库文件(scripttype=text/JavaScriptsrc=)2:JQuery.com网站下载特定版本的JQuery库并将期房到本地服务器上下载：框架下载。通常只需下载最小的jQuery包c（Minified）即可。目前最新的版本jquery-1.6.2.min.js文件只有92KB引用：scriptsrc=jquery.min.js/script将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。第一个jQuery程序scriptsrc=jquery.min.js/scriptscript$(document).ready(function(){alert(HelloWorld!);});/script简写:$(function(){alert('HelloWorld')});引入jQuery等待DOM文档载入后执行类似于window.onload弹出一个对话框第一个jQuery程序(续)scripttype=text/javascriptsrc=js/jquery-1.6.2.js/scriptscripttype=text/javascriptalert('jQuery'+jQuery.fn.jquery);//Dom尚未加载,弹出对话框后，才显示页面里的内容出现jQuery(document).ready(//DOM尚未加载,必须使用ready事件function(){alert('jQuery'+jQuery.fn.jquery);//jQuery('选择器')alert(jQuery('p').text());alert('Pagecontains'+jQuery('a').length+'个aelements!');//jQuery('selector1,selector2,selector3').length;alert('Pagecontains'+jQuery(document.getElementsByTagName('a')).length+'个aElements,Andhasa'+jQuery(document.body).attr('bgcolor')+'background');});/scriptdemo：jquery1.jspjQuery对象与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的方法demo:jquery_dom.jspjQuery的选择器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选取所有的文本隐藏域,并打印它们的值属性过滤选择器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素demo:jquery.jsp属性过滤选择器示例选取下列元素,改变其背景色为#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