使用jQuery操作元素的属性与样式.doc

使用jQuery操作元素的属性与样式2011-08-13 14:25本文学习如何使用jQuery获取和操作元素的属性和CSS样式.元素属性和Dom属性 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性.元素属性和Dom属性只是在我们对其进行不同解析时的不同称呼.值得注意的是:1.元素被解析成Dom时,元素属性和Dom属性并不一定是原来的名称.例如,img的class属性,在表现为元素属性时是class;在表现为Dom属性时,属性名为className2.在JavaScript中,我们可以直接获取或设置Dom属性使用jQuery操作元素属性 在jQuery中,提供了attr函数来操作元素属性,具体如下:函数名说明例子attr(name)取得第一个匹配元素的属性值.$(input).attr(value)attr(property)将一个名/值形式的对象设置为所有匹配元素的属性$(input).attr( value: txt, title: text );attr(key,value)为所有匹配的元素设置一个属性值$(input).attr(value,txt);attr(key,fn)为所有匹配的元素设置一个计算的属性值$(input).attr(title, function () return this.value );removeAttr(name)从所有匹配的元素中删除一个属性$(input).removeAttr(value);注意:1.如果要设置对象的class属性时,必须使用className作为属性名.2.我们可以使用removeAttr删除元素属性,但其对应的Dom属性是不会被删除掉的,只是被改变其值而已根据上面的几个函数,我们可以这样使用来获取dom的value值和innerHTML值:$(#txt1).attr(value)$(#txt1).attr(value, 1234);$(#dv1).attr(innerHTML, this is a div);$(#dv1).attr(innerHTML);实际上,jQuery提供了更简单的方法来访问value,innerHTML,具体函数如下:函数名说明例子val()获取第一个匹配元素的value值$(#txt1).val()val(val)为匹配的元素设置value值$(#txt1).val(txt1)html()获取第一个匹配元素的html内容$(#dv1).html()html(val)设置每一个匹配的元素的html内容$(#dv1).html(this is a div)text()取得所有匹配文本节点的内容,并将其连接起来$(div).text()text(val)将所有匹配元素的置为val$(div).text(divs)使用jQuery操作CSS 1.修改CSS类函数名说明例子addClass(classes)为每个匹配的元素添加指定的类名$(input).addClass(colorRed borderBlack);hasClass(class)判断匹配元素集合中是否至少有一个包含了指定的css类,如果有一个含有指定css类,则返回truealert($(input).hasClass(borderBlack);removeClass(classes)从匹配元素中移除所有或指定的css类$(input).removeClass(colorRed borderBlack);toggleClass(classes)如果存在(不存在)就删除(添加)指定类$(input).toggleClass(colorRed borderBlack);toggleClass(classes,switch)当switch是true时,添加类,switch为false时,删除类$(input).toggleClass(colorRed borderBlack, true);注意:1.addClass、removeClass、toggleClass均可添加多个类,多个类之间用空格隔开2.removeClass方法的参数可选,如果有参数,则删除指定class,如果无参数,则删除匹配元素的所有class3.在调用toggleClass(classes,switch)时,我们可以有更多的用法,例如:/每当按钮被点击三次时,添加样式var i = 0;$(#btn).click(function () $(input).toggleClass(colorRed borderBlack, true););2.修改CSS样式函数名说明例子css(name)访问第一个匹配元素的样式属性$(input).css(color)css(properties)把一个名/值对设置给所有匹配元素的样式属性$(input).css(border:solid 3px silver,color:red)css(name,value)为匹配的元素设置同一个样式属性如果是数字,将自动转换为像素值$(input).css(border-width,5);注意:对于样式值为数字的代码示例及结果:示例生成的源码$(input).css(border-width,5);注意:对于一些常用的属性,例如width,height之类,使用attr(width)和css(width)是无法正常获取其值的,现在,我们来介绍一些常用的属性.获取常用的属性 1.宽、高相关函数名说明例子width()获取第一个匹配元素的宽度,默认为px$(#txt1).width()width(val)为匹配的元素设置宽度值,默认为px$(#txt1).width(200)height()获取第一个匹配元素的高度,默认为px$(#txt1).height()height(val)为匹配的元素设置宽度值,默认为px$(#txt1).height(20)innerWidth()获取第一个匹配元素内部区域宽度(包括padding,不包括border)$(#txt1).innerWidth()innerHeight()获取第一个匹配元素内部区域高度(包括padding,不包括border)$(#txt1).innerHeight()outerWidth(margin)获取第一个匹配元素外部区域宽度(包括padding,border)margin为true则包括margin,否则不包括$(#txt1).outerWidth()outerHeight(margin)获取第一个匹配元素外部区域高度(包括padding,border)margin为true则包括margin,否则不包括$(#txt1).outerHeight(true)注意:返回的高度、宽度均为数字,不带px参照一张图,会更容易理解些.2.位置相关在设计一些弹出对象的脚本中,经常需要动态获取弹出坐标并且设置元素的位置.jQuery为我们提供了位置相关的各个函数.函数名说明例子offset()获取匹配元素在当前窗口的相对偏移只对可见元素有效$(#btn).offset().top$(#btn).offset().leftposition()获取匹配元素相对父元素的偏移只对可见元素有效$(#btn).position().top$(#btn).position().leftscrollTop()获取匹配元素相对滚动条顶部的偏移对可见元素和隐藏元素均有效$(div).scrollTop()scrollTop(val)设置垂直滚动条顶部偏移为该值对可见元素和隐藏元素均有效$(div).scrollTop(200)scrollLeft()