第7章 操作得到的元素.pptVIP

第7章 操作得到的元素 第6章详细介绍了jQuery中的各种选择器以及其使用方法，jQuery选择器可以快速的定位到页面上的每个元素，并且得到该元素的一个jQuery对象或者jQuery对象数组。得到了jQuery对象或者数组之后，就可以利用jQuery强大的功能来对页面元素进行各种操作了。本章将结合实例首先介绍使用jQuery操作页面元素的属性、对页面元素应用CSS样式类的方法、操作CSS改变页面样式以及操作页面内容等，然后介绍jQuery中的查找以及筛选函数，使用这些函数可以对jQuery选择器选择的元素进行进一步地灵活筛选，最后，将介绍jQuery中比较有特色的一个功能：链式操作。 7.1 操作属性 属性是每个页面元素的重要内容，HTML标签可以有一到若干个属性。前面章节中反复使用的id即是元素的常用属性之一。例如： input type=text name=firstname value=Dennis id=first / 7.1.1 读取属性 对于页面上的各个元素，jQuery可以很方便的得到元素的各个属性。读取属性的函数是attr(name) 7.1.2 修改属性 attr(key,value)函数的原型、作用、返回值以及包含参数的意义可参看表7.2。 7.1.2 修改属性 attr(key,fn)函数和attr(key,value)的使用十分相似，只不过其第二个参数为一个函数而已。 7.1.2 修改属性 jQuery还提供了一个更加强大的批量操作属性值的函数，函数名依然是attr()，不过其声明方式以及参数的意义有所不同，参看表7.4。 7.1.3 删除属性 removeAttr(name)函数用来对页面上元素的属性进行删除的操作。 7.2 操作样式类 样式类是CSS中的一个概念，它用于设定页面上对应于“class”属性的元素的样式显示。对于样式类，读者应该不会感到陌生，在之前章节的实例中，反复被使用的如rose样式类就是一个最简单的样式类。 .rose { background-color: #FFE4E1; } 7.2.1 添加样式类 jQuery中可以使用样式类的操作函数对页面元素进行样式类的添加和删除操作。添加样式类的函数是addClass(class)，其执行效果相当于为每个匹配的元素添加了一个“class=XXX”的属性。 7.2.2 去除样式类 removeClass(class)函数用于去除所有匹配元素的指定样式类，其效果相当于从页面元素的属性中将“class=XXX”删除。 7.2.3 交替样式类 jQuery还提供了一种更为方便的在两种相反的操作之间切换的方式，那就是交替操作。交替样式类的函数是toggleClass(class)，该函数实现的原理就是首先检查匹配元素是否已经存在要设置的class样式类。如果存在，则去除；如果不存在，则增加该样式类。 7.3 操作CSS 使用addClass(class)和removeClass(class)函数可以方便地对页面元素应用设定好的样式类。但是，这种需求改变了页面元素的class属性。而且其局限性在于必须事先定义好将要使用的CSS样式类，这样一来其灵活性就不是很好。本节将介绍jQuery中直接操作CSS样式的方法。jQuery不但可以得到指定元素的某个CSS属性的值，还可以随意地对指定元素进行CSS样式的设定，并且jQuery还提供了操作高度、宽度以及偏移的函数。 7.3.1 读取CSS样式 对于一个给定的页面元素，其在页面上显示都会有对应的一些CSS属性来控制显示效果，如字体、字体颜色、背景颜色等。jQuery中使用css(name)函数来获得指定页面元素的某项CSS属性的值，其只作用于第一个匹配元素上。 7.3.2 设置CSS样式 jQuery提供了两种设置CSS样式的方式，即css(name,value)函数和css(properties)函数，这两个函数和上一小节中获取CSS样式的css(name)函数使用同样的函数名，可以看作是jQuery中函数的重载。 css(name,value)函数将对所有匹配的元素进行操作，给所有匹配元素设置一个CSS样式属性。 7.3.3 获得元素偏移信息 页面上每个元素都有自己的位置，有时候需要得到某元素在页面上确切的位置，然后对其进行一些设置或者动画操作。这里提到的位置其实是一个相对位置。在jQuery中，对元素偏移操作的函数是offset()。该函数中使用的相对位置的参考点当前窗口的左上角，其返回值为top和left两个值。 7.3.4 获得和设置高度 jQuery中可以使用offset()函数来得到页面上元素相对于页面窗口左上角的偏移。同样，jQuery也提供了获取