jQuery操作Table学习总结.docxVIP

jQuery操作Table学习总结随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript? 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。通过这段时间学习和练习，我掌握了大部分jQuery操作Table的知识。1. 常用的HTML元素选取$(“xxx”) 所有xxx标签的元素$(“p#demo”) 所有id=”demo”的p元素$(“p.style”) 所有class=”style”的p元素$(“#demo”) 所有id=”demo”的元素$(“.style”) 所有class=”style”的元素$(“[href]”) 所有带有href属性的元素$(“[href=’#’]”) 所有带有href属性且属性值为”#”的元素$(“[href!=’#’]”) 所有带有href属性且属性值不为”#”的元素$(“[href$=’.jpg’]”) 所有带有href属性且属性值以”.jpg”结尾的元素更多元素选取方法请查阅jQuery选择器参考手册。2. 获取元素集合中的具体项如上，通过jQuery选取得到的HTML元素都是一组元素的集合，要获取到其中具体的某一项，可以使用eq(index)方法来获得集合中索引号为index的jQuery对象，如：[javascript] view plaincopyprint?1.$(“div”).eq(1).hide(); // 隐藏当前页面中第2个div元素 若不获取具体的元素项就调用相关的方法，则会对该集合中的所有元素都执行该方法，如：[javascript] view plaincopyprint?1.$(“#demo”).hide(); // 隐藏当前页面中所有id=”demo”的元素 3. jQuery对象与DOM对象需要注意的是eq方法获得的是jQuery对象，不是DOM对象，它只能执行jQuery的方法而不能调用DOM的方法。普通的DOM对象可以通过$()转化为jQuery对象，最常见的如：$(document)。转化后的jQuery对象为只有一个元素的集合。jQuery对象要转化成DOM对象则需要用相关的方法从集合中取出特定的DOM对象，常见的方法有get(index)和[index]两种，如：[javascript] view plaincopyprint?1.//获取当前页面中的第1个div元素的DOM对象 2.$(“div”).get(0); 3.$(“div”)[0]; 4.$(“div”).eq(0)[0]; 特别需要注意的是，jQuery对象只能使用jQuery方法，DOM对象只能使用DOM方法。4. 引用jquery.js文件jQuery只是一个JavaScript库文件，所以当需要使用jQuery之前首先需要引用这个库文件。通常可以到jQuery的官网下载一份放到本地。另外，Google和微软也提供了在线的库文件供开发者使用。Google的引用地址：/ajax/libs/jquery/1.7.0/jquery.min.js微软的引用地址：/ajax/jquery/jquery-1.7.min.js当jQuery更新的时候，上述两个在线引用也会做出相应的更新。所以，可以通过修改上述两个地址中的版本号来引用其它版本的jQuery文件，如：/ajax/libs/jquery/1.4.0/jquery.min.js是Google提供的1.4.0版本的JQuery文件；而前述分别是两