从头开始学习jQuery中操作元素的属性和样式(4)

1.摘要本文解释了如何使用jQuery来获取和操作元素的属性和CSS样式。DOM属性和元素属性的区别值得学习。2.前言通过前面的章节，我们已经能够完全控制jQuery的打包集，无论是通过选择器选择对象还是从打包集中删除对象。过滤元件。本章将解释如何使用jQuery来获取和修改元素属性和样式。3.区分DOM属性和元素属性，一个img标签: img src=' http : images/image . 1 . jpg ' id='芙蓉花' alt='芙蓉花' a'/一般来说，开发人员习惯于调用id，src，alt等。此元素的“属性”。我称之为“元素属性”。但是当解析成DOM对象时，实际的浏览器最终会将标签元素解析成DOM对象。并且该元素的“元素属性”被存储为“DOM属性”。这两者是有区别的。虽然我们将元素的src设置为：images/image.1.jpg的相对路径，但它将在DOM属性’中转换为：http://localhost/images/的绝对路径。Image.1.jpg。甚至有些‘元素属性’和‘DOM属性’的名字也不一样，比如上面的元素属性类，转换成DOM属性后就对应了className。记住，在javascript中，我们可以直接获取或设置DOM属性’:复制代码，如下所示： Script Type=‘text/JavaScript’$(function(){ vari mg1=document . getelementbyid(‘芙蓉’))；alert(im G1 . alt)；img1.alt='更改alt元素属性'；alert(im G1 . alt)；}) /script因此，如果要设置元素的CSS样式类，应该使用“DOM attribute‘class name’”而不是“element attribute‘class : img 1 . class name=' class b '；操作“DOM属性”在jQuery中没有包装操作“DOM属性”的功能，因为用javascript获取和设置“DOM属性”非常简单。在jQuery中，提供了每个()函数来遍历jQuery包装器集，其中这个指针是一个DOM对象。因此，我们可以应用这一点来配合原生javascript来操作元素的DOM属性：复制代码如下： $ ('img ')。每个(函数(索引){alert ('index :' index，id :' this。id ,' alt : '这个。alt)；this.alt='已更改'；alert('index:' index '，id:' this.id '，alt : ' this . alt)；});下面是每个函数的描述：每个(回调)返回： jquery包装器集合为包装器集合中的每个元素执行回调方法，其中回调方法接受一个指示当前遍历的索引值的参数。从0开始。5.操作“元素属性”我们可以在javascript中使用getAttribute和setAttribute来操作元素的“元素属性”。在jQuery中，我们为您提供了attr()包装器集函数，它可以同时操作包装器集中所有元素的属性。这个方法可以很容易地从第一个匹配的元素中获取属性值。如果元素没有相应的属性，它将返回undefined。返回文档： $('img ')中第一个图像的src属性值。attr(' src ')；Attr(properties)以“name/value”的形式设置一个对象作为所有匹配元素的属性。这是在所有匹配元素中批量设置许多属性的最佳方式。请注意，如果要设置对象的类属性，必须使用“类名”作为属性名。或者可以直接使用。addClass(类)和。removeClass(类)。设置src和alt属性： $(“img”)。所有图像的attr ({src:' test.jpg '，alt : ' test image ' })；Attr(键，值)为所有匹配的元素设置属性值。设置src属性： $(“img”)。所有图像的attr ('src '，' test . jpg ')；Attr(key，fn)设置所有匹配元素的计算属性值。不是提供一个值，而是提供一个函数，由这个函数计算的值被用作属性值。

将src属性值设置为title属性值： $(“img”)。attr ('title '，function () {return this。src })；RemoveAttr(name)从每个匹配的元素中删除一个属性，并将文档中图像的src属性删除： $('img ')。removeAttr(' src ')；使用id选择器时，通常只返回一个对象的jQuery包装器集。此时，经常使用attr(name)函数来获取其元素属性：复制代码如下：功能测试attr1(事件){alert ($ ('#芙蓉')。attr(' class ')；}请注意，attr(name)函数只返回第一个匹配元素的特定元素属性值。attr(key，name)将在所有打包集中设置元素属性。复制代码如下： //修改所有img元素$('img ')的alt属性。attr('alt '，'修改后的alt属性')；Attr(properties)可以一次修改多个元素属性：复制代码如下： $('img ')。attr({title: '修改了title '，alt: '同时修改了alt属性' })；另外，虽然我们可以使用removeAttr(name)删除元素属性，但是对应的DOM属性不会被删除，只会影响DOM属性的值。例如，删除输入元素的只读元素属性将导致相应的DOM属性变为假(即输入变为可编辑)。不及物动词修改css样式修改元素的样式，我们可以修改元素的CSS类，也可以直接修改元素的样式。一个元素可以应用多个CSS类，但不幸的是，DOM属性是用空格而不是数组分隔的字符串存储的。因此，如果我们想在原始javascript时代给元素添加或删除多个属性，每个人都必须自己操作字符串。jQuery使它变得极其简单。我们再也不用做任何无聊的工作了。1.修改CSS类。下表显示了与修改CSS类相关的jQuery方法。名称描述示例addClass(类)为每个匹配的元素添加指定的类名。添加“选定”类： $(“p”)。向匹配的元素添加类(“选定的”)；HasClass(class)确定指定的CSS类$('p ')是否。hasClass('selected ')应用于包装集中的至少一个元素；remove class([class])从所有匹配的元素中移除所有或指定的类。移除“选定”类： $(“p”)。从匹配的元素中移除类(“选定的”)；ToggleClass(类)如果它存在(不存在)，删除(添加)一个类。开关“选定”类： $(“p”)。匹配元素的toggle class(' selected ')；ToggleClass(class，switch)当switch为真时添加一个类，当switch为假时删除一个类。每三次点击切换高亮样式： var count=0；$('p ')。单击(function(){ $(this))。toggleClass('highlight '，计数% 3==0)；});使用上面的方法，我们可以修改像集合这样的元素的css类，并且不再需要手动解析字符串。请注意，addClass(class)和remove class([class])的参数可以一次传递到多个CSS类中，这些类之间用空格分隔，例如：$('#btnAdd ')。bind('click '，function(event) { $('p ')。add class(' colored border blue ')；});removeClass方法的参数是可选的。如果没有传入参数，所有的CSS类将被： $ ('p ')移除。Removeclass ()

2. 修改CSS样式

。同样，当我们想要修改一个元素的特定CSS样式，即修改元素属性‘style’时，jQuery也提供了相应的方法： Name Description Instance CSS(Name)访问第一个匹配元素的style属性。获取第一段： $('p ')的颜色样式属性的值。CSS(' color ')；Css(properties)将名称/值对对象设置为所有匹配元素的样式属性。这是在所有匹配的元素上设置大量样式属性的最佳方式。将所有段落的字体颜色设置为红色，背景设置为蓝色。CSS ({color:' # ff0011 '，background 3360 ' blue ' })；Css(name，value)设置所有匹配元素中样式属性的值。

自动将数字转换为像素值，并将所有段落字体设置为红色： $('p ')。css('color '，' red ')；00-1010虽然我们可以通过获取属性、特征和CSS样式来获取元素的几乎所有信息，但是请注意下面的实验3360！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head title获取对象宽度/title script type=' text/JavaScript ' src=' scripts/jquery-1 . 3 . 2-vs doc2 . js '/script type{ alert(' attr(\ ' width \ '): ' $(' # TestDiv ')。attr(' width ')；//未定义的警报(' CSS(\ ' width \ '): ' $(' # TestDiv ')。CSS(' width ')；//auto(ie6)或1264px (ff)警报(' width()' : ' $(' # testdiv ')。width())；//正确的值是1264 alert(' style . width : ' $(' # testdiv ')[0]。style . width)；//null值})/script/head body div id=' test div ' test text/div/body/html我们想得到测试层的宽度，用attr方法得到' element property '是未定义的，因为宽度没有加到div，css()方法可以得到style属性值。但是，不同浏览器返回的结果是不同的。在IE6下，返回auto，而在FF下，虽然返回了正确的值，但后面是' px '。因此，jQuery提供了width()方法，该方法返回正确的值，而不使用px。针对以上问题，jQuery提供了获取和设置常用属性的方法，如width()供用户获取元素的宽度。而width(val)用于设置元素的宽度。以下方法可用于获取元素：

七.获取常用属性

的公共属性值。name description示例height()获取第一个匹配元素的当前计算高度值(px)。获取： $('p ')第一段的高度。高度()；高度(val)为每个匹配的元素设置CSS高度(hidth)属性的值。如果单位(例如em或%)没有明确指定，请使用px。将所有段落的高度设置为20: $('p ')。身高(20)；Width()获取第一个匹配元素的当前计算宽度值(px)。获取第一段的宽度： $('p ')。宽度()；宽度(val)为每个匹配的元素设置CSS宽度属性的值。如果单位(例如em或%)没有明确指定，请使用px。将所有段落的宽度设置为20: $('p ')。宽度(20)；InnerHeight()获取第一个匹配元素内部区域的高度(包括填充和不包括边框)。此方法对可见元素和隐藏元素都有效。请参见最后一个示例innerWidth()以获取第一个匹配元素内部区域的宽度(包括填充和排除边框)。此方法对可见元素和隐藏元素都有效。请参见最后一个示例外部高度([边距])以获取第一个匹配元素的外部高度(默认情况下包括填充和边框)。此方法对可见元素和隐藏元素都有效。请参见最后一个示例outwidth([边距])，以获取第一个匹配元素的外部宽度(默认情况下包括填充和边框)。此方法对可见元素和隐藏元素都有效。关于“内”、“外”和高度/宽度在获取长度和宽度的函数中的区别，见最后一个例子。

OuterWith可以接受布尔值参数来指示是否计算边距值。相信这个图可以清晰的看到各个功能所要求的范围。图片以宽度为例，高度的作用是一样的。

1.宽和高相关 Height and Width

另外，在一些设计弹出对象的脚本中，往往需要动态获取弹出坐标，设置元素的位置。然而，许多计算位置的方法存在浏览器兼容性问题。jQuery为我们提供了一个与position: offset()相关的每个函数：的名称描述示例，以获取当前窗口中匹配元素的相对偏移量。返回的对象包含两个形状属性：顶部和左侧。此方法仅对可见元素有效。获取第二段的偏移量： var p=$(' p : last ')；var offset=p . offset()；p.html('left: ' offset.left '，top : ' offset . top)；Position()获取匹配元素相对于父元素的偏移量。返回的对象包含两个形状属性：顶部和左侧。要精确计算结果，请在填充、边框和填充属性上使用像素单位。此方法仅对可见元素有效。获取第一段的偏移量： var p=$(' p : first ')；var位置=p . position()；$('p:last ')。html('left: ' position.left '，top : ' position . top)；ScrollTop()获取匹配元素相对于滚动条顶部的偏移量。此方法对可见元素和隐藏元素都有效。获取第一段相对于滚动条顶部的偏移量： var p=$(' p : first ')；$('p:last ')。文本(' scroll top : ' p . scroll top())；ScrollTop(val)在传递参数值时，将垂直滚动条顶部的偏移量设置为该值。此方法对可见元素和隐藏元素都有效。设置垂直滚动条值： $ ('div。演示')。scroll top(300)；ScrollLeft()获取匹配元素相对于滚动条左侧的偏移量。此方法对可见元素和隐藏元素都有效。获取第一段相对于滚动条左侧的偏移量： var p=$(' p : first ')；$('p:last ')。文本(' scrolleft : ' p . scrolleft())；scrolleft(val)在传递参数值时，将水平滚动条的左偏移量设置为该值。此方法对可见元素和隐藏元素都有效。设置： $ ('div.demo ')的偏移量。相对于滚动条的左侧滚动(300 );00-1010本文主要讲解如何使用jQuery来操作元素的属性和修改样式。请注意元素属性和DOM属性的区别。下一篇文章将解释最重要的事件，并介绍如何绑定事件和操作事件对象。作者：张来源：