jQuery培训课程第一课时

jQuery基础教程《基于Web标准的网页设计与制作》配套课件V1.0内容简介jQuery的原理一jQuery对象和DOM对象二jQuery选择器三三jQuery的原理jQuery的历史jQuery是由美国人JohnResig创建，它是轻量级js库这是其他的js库所不及的。2005年8月22日，JohnResig提出Behaviour框架的三种改良建议（支持层级选择符、支持事件绑定、消除冗余关键字）2006年1月14日jQuery正式发布2006年1月25日，首个jQuery插件发布2006年2月26日，jQueryAJAX插件发布jQuery是一种新的JavaScript库。jQuery是继prototype只有又一个优秀的js框架其宗旨是：WRITELESS,DOMORE,(写更少的代码，做更多的事情。)jQuery的原理jQuery是为了改变javascript的编码方式而设计的，它把面向对象思想发挥的淋漓尽致它那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程:查找(创建)jQuery对象:$(”selector”);调用jQuery对象的方法完成我们需要完成的工作:$(”selector”).doOurWork();jQuery就是以这种可以说是最简单的编码逻辑来改变js编码方式的.这两个步骤是jQuery的编码逻辑核心,要实现这种简洁编码方式,创建jQuery对象这一环节至关重要.因此,jQuery的dom元素查找能力相当强悍。*jQuery()=$()jQuery的优势轻量级（Lightweight）强大的选择器出色的DOM操作封装可靠的事件处理机制出色的浏览器兼容性完善的AJAX链式操作方式行为层和结构层分离丰富的插件支持和完善的文档原理：写得少,做得多JavaScript框架简介随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架）当前流行的JavaScript库有:jQuery的使用下载：框架下载。通常只需下载最小的jQuery包（Minified）即可。目前最新的版本jquery-2.0.3.min.js文件只有81.6KB*历史版本：jQuery1.0、jQuery1.1、jQuery1.1.3、jQuery1.2、jQuery1.2.6、jQuery1.3、jQuery1.3.2、jQuery1.4、jQuery1.5、jQuery1.6、jQuery1.7、jQuery1.7.1、jQuery1.7.2…jQuery1.10.2、jQuery2.0.3引用：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方法的时候,有如下两种处理方法:jQuery对象是一个数组对象,可以通过[index]的方法得到对应的DOM对象$(#msg)[0]使用jQuery中的get(index)方法得到相应的DOM对象$(#msg).get(0)jQuery()=$()DOM对象转成jQuery对象对于一个DOM对象,只需要用$()把DOM对象包装起来(jQuery对象就是通过jQuery包装DOM对象后产生的对象),就可以获得一个jQuery对象.例如：$(document.getElementById(“msg”))$(“#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$(:animated)内容过滤选择器内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上内容过滤选择器示例改变含有文本‘di’的p元素的背景色为#bbffaa$(p:cotains(di))改变不包含子元素(或者文本元素)的div空元素的背景色为#bbffaa$(p:empty)改变含有class为mini元素的p元素的背景色为#bbffaa$(p:has(.mini))改变含有子元素(或者文本元素)的div元素的背景色为#bbffaa$(p:parent)可见性过滤选择器可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素可见选择器:hidden不仅包含样式属性display为none的元素,也包含文本隐藏域(inputtype=“hidden”)和visible:hidden之类的元素可见性过滤选择器示例改变所有可见的div元素的背景色为#bbffaa$(“div:visible).css(‘background-color’,’#bbffaa’);选取所有不可见的元素,利用jQuery中的show()方法将它们显示出来,并设置其背景色为#bbffaa选取所有的文本隐藏域,并打印它们的值怎么显示？属性过滤选择器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素属性过滤选择器示例选取下列元素,改变其背景色为#bbffaa含有属性title的div元素$(‘div[title]’)属性title值等于test的div元素$(“div[title=‘text’]”)属性title值不等于test的div元素(没有属性title的也将被选中).属性title值以te开始的div元素.属性title值以est结束的div元素.属性title值含有es的div元素.选取有属性id的div元素，然后在结果中选取属性title值含有“es”的div元素.怎么显示？子元素过滤选择器nth-child()选择器详解如下：nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素nth-child(2):能选取每个父元素下的索引值为2的元素nth-child(3n):能选取每个父元素下的索引值是3的倍数的元素nth-child(3n+1):能选取每个父元素下的索引值是3n+1的元素子元素过滤选择器示例选取下列元素,改变其背景色为#bbffaa每个class为one的div父元素下的第2个子元素.每个class为one的div父元素下的第一个子元素每个class为one的div父元素下的最后一个子元素如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素$(“div[class=‘one’]:only-child)表单对象属性过滤选择器此选择器主要对所选择的表单元素进行过滤表单对象属性过滤选择器示例利用jQuery对象的val()方法改变表单内可用input元素的值$(“input:enabled”).val(‘HelloWorld’);利用jQuery对象的val()方法改变表单内不可用input元素的值利用jQuery对象的length属性获取多选框选中的个数利用jQuery对象的text()方法获取下拉框选中的内容表单选择器此选择器主要对所选择的表单元素进行过滤练习1.给网页中所有的p元素且元素内容中包含“段落”字样添加onclick事件2.给一个特定的表格隔行变色，并且添加全选、全不选功能3.对多选框进行操作,输出选中的多选框的个数jQuery中对DOM操作jQuery中的DOM操作DOM(DocumentObjectModel—文档对象模型)：一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类: