jquery学习大总结(三)jquery操作元素属性精选 .doc

jquery学习大总结(三)jquery操作元素属性 本文学习如何使用jQuery获取和操作元素的属性和CSS样式.元素属性和Dom属性 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性. 元素属性和Dom属性只是在我们对其进行不同解析时的不同称呼. 值得注意的是: 1.元素被解析成Dom时,元素属性和Dom属性并不一定是原来的名称. 例如,img的class属性,在表现为元素属性时是class;在表现为Dom属性时,属性名为className 2.在JavaScript中,我们可以直接获取或设置Dom属性 使用jQuery操作元素属性 在jQuery中,提供了attr函数来操作元素属性,具体如下: 注意: 1.如果要设置对象的class属性时,必须使用className作为属性名. 2.我们可以使用removeAttr删除元素属性,但其对应的Dom属性是不会被删除掉的,只是被改变其值而已 根据上面的几个函数,我们可以这样使用来获取dom的value值和innerHTML值: $.attr $.attr; $.attr; $.attr; 实际上,jQuery提供了更简单的方法来访问value,innerHTML,具体函数如下: 使用jQuery操作CSS 注意: 、removeClass、toggleClass均可添加多个类,多个类之间用空格隔开 方法的参数可选,如果有参数,则删除指定class,如果无参数,则删除匹配元素的所有class 3.在调用toggleClass时,我们可以有更多的用法,例如: //每当按钮被点击三次时,添加样式 var i = 0; $.click { $.toggleClass; }); 注意: 对于样式值为数字的代码示例及结果: 注意: 对于一些常用的属性,例如width,height之类,使用attr和css是无法正常获取其 值的,现在,我们来介绍一些常用的属性. 获取常用的属性 注意: 返回的高度、宽度均为数字,不带px 参照一张图,会更容易理解些. 2.位置相关 在设计一些弹出对象的脚本中,经常需要动态获取弹出坐标并且设置元素的位置.jQuery为我 offset方法是相对于当前窗口的相对偏移,而position方法是相对于父元素的偏移 --选自《从零开始学习jQuery》 jQuery操作Table学习总结 随着及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元素选取 $ 所有标签的元素 $ 所有id=”demo”的 元素 $ 所有class=”style”的 元素 $ 所有id=”demo”的元素 $ 所有class=”style”的元素 $ 所有带有href属性的元素 $ 所有带有href属性且属性值为”#”的元素 $ 所有带有href属性且属性值不为”#”的元素 $ 所有带有href属性且属性值以”.jpg”结尾的元素 更多元素选取方法请查阅jQuery选择器参考手册。 2. 获取元素集合中的具体项 如上，通过jQuery选取得到的HTML元素都是一组元素的集合，要获取到其中具体的某一项，可以使用eq方法来获得集合中索引号为index的jQuery对象，如：