手机版

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

时间:2021-10-21 来源:互联网 编辑:宝哥软件园 浏览:

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([边距]),以获取第一个匹配元素的外部宽度(默认情况下包括填充和边框)。此方法对可见元素和隐藏元素都有效。关于“内”、“外”和高度/宽度在获取长度和宽度的函数中的区别,见最后一个例子image

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属性的区别。下一篇文章将解释最重要的事件,并介绍如何绑定事件和操作事件对象。作者:张来源:

版权声明:从头开始学习jQuery中操作元素的属性和样式(4)是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。