第8章2jQuery

HTML5+CSS3Web前端开发唐四薪编著清华大学出版社8.5jQuery基础内容简介jQuery的由来及简介一jQuery对象和DOM对象二jQuery选择器三jQuery中的DOM操作四使用jQuery创建动画效果三五8.5.1jQuery的功能和使用jQuery的设计目的:让用户简化JavaScript代码的编写功能①取得页面中的元素，这是DOM操作的基础功能。②修改页面元素的外观，通过修改元素的CSS属性或HTML属性实现。③修改页面的内容，提供了html()和text()等函数。④响应用户的页面操作，jQuery提供了完善的事件绑定和处理机制。jQuery理念:写得少,做得多jQuery的使用1.下载：jQuery官网(jquery.com)提供下载2.引用：scriptsrc=jquery.min.js/script3.将该文件导入后，就可以使用jQuery的选择器和各种函数的功能了。第一个jQuery程序scriptsrc=jquery.min.js/scriptscript$(document).ready(function(){alert(HelloWorld!);});/script引入jQuery等待DOM文档载入后执行类似于window.onload弹出一个对话框8.5.2jQuery中的“$”1.“$”用作选择器scriptsrc=jquery.min.js/scriptscript$(document).ready(function(){//页面载入后执行$(h2a).css(color,red);$(h2a).css(textDecoration,none);});/script则使得本来不支持子选择器的IE6也能支持子选择器了,jQuery中的“$”及其作用2.“$”用作功能函数前缀(1)遍历数组$.each([0,1,2],function(i){document.write(Item#+i+br/);});(2)遍历选择器中的元素$(function(){$(img).each(function(index){this.title=这是第+(index+1)+幅图，路径是：+this.src;});});jQuery中的“$”及其作用3.用作$(document).ready()$(document).ready(function(){(#loading).css(display,none);})jQuery的写法则会使页面仅加载完DOM结构后就执行，即加载完html文档后，还没加载图像等其他文件就执行ready()函数，给图像添加“display:none”的样式，因此id为“loading”的图片不可能被显示。所以$(document).ready()比window.onload载入执行更快jQuery中的事件--加载DOM在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件.在常规的JavaScript代码中,通常使用window.onload方法,在jQuery中使用$(document).ready()方法.$(document).ready()比window.onload的比较$(document).ready()的优势在DOM文档载入后就执行，载入速度更快；如果找不到DOM中的元素，能够自动容错；在页面中多个地方使用ready()方法不会发生冲突jQuery中的“$”及其作用4.创建DOM元素使用“$”可以直接创建DOM元素：varnewP=$(p武广高速铁路即将通车！/p);创建了DOM元素后，将这个元素插入到在页面的某个具体位置上newP.insertAfter(“#chapter”);//将创建的newP元素插入到ID为#chapter的元素之后或者newP.appendTo(body);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.对多选框进行操作,输出选中的多选框的个数8.5.5jQuery的事件绑定8.5.5jQuery的事件绑定jQuery1.7以上版本中，提供了on()方法，用于绑定事件处理程序到当前选定的jQuery对象中的元素。jQuery官