jquery设置属性值-使用 jQuery 操作元素属性和样式

第三章使用jQuery 操作元素的属性和样式 1. 总结 本文介绍了如何使用jQuery 来获取和操作元素属性和CSS 样式。 DOM 属性和元素属性之间的区别值得学习。 2.前言通过接下来的几章我们已经能够完全控制jQuery的包装集，无论是通过选择器选择对象，还是从包装集中删除它们，以及过滤元素。 本章将讲解如何使用 jQuery 来获取和更改元素属性和样式。 三。 区分 DOM 属性和 Element 属性的 img 标签：✓•〃•/••I•〃"IjZ^TT•[•〃

一般开发者习惯将id、src、alt等称为该元素的“属性”。 我称它们为“元素属性”。 而在解析成DOM对象时，实际的浏览器最终会将标签元素解析成“DOM对象”，并将元素的“元素属性”存储为“DOM属性”。 会被转换成绝对路径：·l·jpg·甚至有些“元素属性”和“DOM属性”的名字不同，比如之前的元素属性class，转换成DOM属性后对应的是className。 我们可以直接获取或设置“DOM属性”： Vscripttype="text/javascript">$(function(){varimgl=document.getElementById("hibiscus");alert(img1.alt);img1・alt="Changethealtelementattribute" ;alert(img1.alt);}) 所以如果要设置元素的CSS样式类jquery设置属性值，应该使用“DOM属性”className”而不是“元素属性”class:img1・className="classB"; 4 . 操作“DOM属性” jQuery中没有封装“DOM属性”操作函数，因为使用javascript获取和设置“DOM属性”非常简单。jQuery中提供了each()函数来遍历jQuery包集合，而 this 指针是一个 DOM 对象，因此我们可以使用它与原生 javascript 一起操作元素的 DOM 属性： $("img")・each(function(index){alert("index:" +index+",id:"+这个・id+",alt:"+这个・alt);this.alt="已更改";alert("index:"+index+",id:"+这个・id+",alt :"+this・alt);}) ;下面是各个函数的说明：each(callback) 返回：jQuery 包装集对包装集中的每个元素执行回调方法。 回调方法接受一个参数，表示当前遍历的索引值，从0开始。 五。 操作“元素属性” 我们可以在javascript中使用getAttribute和setAttribute来操作元素的“元素属性”。 在 jQuery 中，我们为您提供了 attr() 包装集合函数，您可以同时操作包装集合中所有元素的属性： 名称 说明 示例 attr (name) 获取第一个匹配元素的属性值。

这是从第一个匹配元素获取属性值的便捷​​方法。 如果元素没有相应的属性，则返回 undefined。 返回文档中第一个图像的 src 属性的值： $("img").attr("src");attr(properties - 将“名称/值”对象设置为所有匹配元素的属性。这这是在所有匹配元素中批量设置多个属性的最佳方式，注意如果要设置对象的class属性，必须使用'className'作为属性名称，或者直接使用.addClass(class)和 .removeClass(class). 为所有图像设置 src 和 alt 属性： $("img").attr({src:"test.jpg",alt:"TestImage"}); attr(key, for all matches Element)设置 1 为所有图像设置 src 属性： value) 属性值 $("img").attr("src","test.jpg"); attr(key, fn) 为所有匹配元素设置 1 估计属性值. 不提供值，而是提供一个函数，通过这个函数估计的值作为属性值，将src属性的值设置为title属性的值：$("img").attr("标题", function(){returnthis.src}); removeAttr(name - 从每个匹配元素中删除一个属性 删除文档中图像的 src 属性： $("img").removeAttr("src"); 使用 id 选择器时，只设置一个对象的 jQuery 包经常会返回，此时常使用attr(name)函数来获取其元素属性： functiontestAttrl(event){alert($("#hibiscus")・attr("class "));}注意attr(name)函数只返回第一个匹配元素的具体元素属性值，而attr(key,name)会设置所有包装集合中的元素属性：“修改所有img元素的alt属性$(“img”)・attr("alt", "更改了 alt 属性"); 而 attr(properties) 可以一次更改多个元素属性： $("img")・attr({title:"更改了标题",alt:"更改了alt属性同时"}); 另外，即使我们可以使用removeAttr(name)删除元素属性，对应的D0M属性也不会被删除，只会影响D0M属性的值。 例如，删除一个input元素的readonly元素属性会导致对应的D0M属性变为false（即input变为可编辑）： $("#inputTest")·removeAttr("readonly"); 六、改变CSS样式要改变元素样式，我们可以改变元素的CSS类或者直接改变元素的样式。 一个元素可以应用多个 CSS 类，不幸的是它在 DOM 属性中存储为空格分隔的字符串，而不是链接列表。 所以在原来的javascript时代如果我们想要给元素添加或者删除多个属性jquery设置属性值，我们就得自己操作字符串了。 jQuery 使这一切变得非常简单。 我们不再需要做这些无聊的工作。 1. 更改 CSS 类 该表是与更改 CSS 类相关的 jQuery 方法： 名称 说明 实例 addClass(classes) 为每个匹配元素添加指定的类名称。

将选定的类添加到匹配元素中： $("p").addClass("selected");hasClass(class) 确定包装集中是否至少有一个元素应用指定的 CSS 类 $("p").hasClass （“选定”）； removeClass([classes]) 从所有匹配元素中删除所有或指定的类。 从匹配元素中删除选定的类： $("p").removeClass("selected"); 如果类存在（不存在），toggleClass(class) 会删除（添加）该类。 切换匹配元素的选定类： $("p").toggleClass("selected");toggleClass(class, switch) 当 switch 为 true 时添加一个类，当 switch 为 false 时删除该类点击切换Bright风格： varcount 20;$("p").click(function(){$(this).toggleClass("highlight",count++%3==0);}); 使用前面的方法，我们可以像集合一样更改元素的CSS类，而不需要手动解析字符串。 注意addClass(class)和removeClass([classes])的参数可以一次传入多个CSS类，用空格分隔，例如：$(" #btnAdd")・bind("click", function(事件){$("p")・addClass("colorRedborderBlue");}); removeClass 方法的参数是可选的，如果不传入参数，则会移除所有 CSS 类： $("p")・removeClass() 2. 更改 CSS 样式 同样，当我们要更改某个特定的 CSS 样式时一个元素，即改变元素属性“style”，jQuery也提供了相应的方法： name description Instance css(name) 访问第一个匹配元素的style属性。

获取第一段的颜色样式属性值：$(〃p〃).css(〃color〃); css(properties) 设置一个“名称/值对”对象作为所有匹配元素的样式属性。 这是在所有匹配元素上设置大量样式属性的最佳方法。 将所有段落的字体颜色设置为白色，背景设置为红色：$(〃p〃).css({color:〃#ffOOll〃,background:"blue"}); 所有匹配元素上的 css(name,value) ，设置样式属性的值。数字将手动转换为像素值，所有段落字体将设置为黄色：$(〃p〃).css(〃color 〃,"red〃); 七、获取常用属性 看来我们可以通过获取属性、特性、CSS样式来获取元素的几乎所有信息，注意下面的实验： Vdivid="testDiv"> 测试文本

我们想要得到测试视口的长度，使用attr方法得到的“元素特征”为未定义，因为宽度没有添加到div中。 css()方法实际上可以获取style属性的值，在不同的浏览器中返回的结果是不同的。 IE6 返回 auto，但 FF 返回正确的值，旁边带有“px”。 所以jQuery提供了width()方法，它返回正确的值，不带px。 对于里面的问题，jQuery提供了获取和设置常用属性的方法，比如width()，用户获取元素的长度，width(val)用于设置元素之间的间距。 该方法可用于获取元素的公共属性值：1. 宽度和高度相关 高度和宽度名称 说明 示例 height() 获取第一个匹配元素的当前估计高度值（px）。 获取第一段的咼：$("p").height(); height(val) 设置每个匹配元素的 CSS height (hidth) 属性值。 如果没有明确指定单位（例如：em 或 %），请使用 px。 将所有段落的高度设置为 20： $("p").height(20);width() 获取第一个匹配元素的当前估计长度值（px）。 获取第一段的宽度：$("p").width(); width(val) 设置每个匹配元素的 CSS 长度（宽度）属性的值。

如果没有明确指定单位（例如：em 或 %），请使用 px。 将所有段落的宽度设置为20：$("p").width(20); innerHeight() 获取第一个匹配元素的内部区域的高度（包括内边距，不包括边框）。 此方法适用于可见元素和隐藏元素。 请参阅最后一个示例。 innerWidth() 获取第一个匹配元素的内部区域的长度（包括内边距，不包括边框）。 此方法适用于可见元素和隐藏元素。 请参阅最后一个示例 externalHeight([margin]) 获取第一个匹配元素的外部高度（默认包括内边距和边框）。 此方法适用于可见元素和隐藏元素。 请参阅最后一个示例。 outerWidth([margin]) 获取第一个匹配元素的外部宽度（默认包括内边距和边框）。 此方法适用于可见元素和隐藏元素。 关于获取长宽的函数，需要区分“inner”、“outer”和高/宽的区别：outerWidth(true)测试文本paddingbordermarginVinnerWidth和outerWith可以接受一个bool值参数，表示是否估计margin价值。 相信这张图一目了然每个函数所需要的范围。 图中以宽度为例进行说明，高度的作用是一样的。 设置元素的位置。 而且很多估算位置的方式都存在浏览器兼容性问题。 jQuery 为我们提供了与位置相关的函数： 名称 说明 示例 offset() 获取当前窗口中匹配元素的相对倾斜度。

返回的对象包含两个整数属性：top 和 left。 该方法仅对可见元素有效。 获取第二段的倾斜： varp=$("p:last"); varoffset 两个 p.offset(); p.html("left:"+offset.left+"top:"+offset.top);position() 获取匹配元素相对于父元素的倾斜度。 返回的对象包含两个整数属性：top 和 left。 为了准确估计结果，请在填充、边框和填充属性上使用像素单位。 该方法仅对可见元素有效。 获取第一段的倾斜： varp=$("p:first");varposition2p.position();$("p:last").html("left:"+position.left+",top: "+位置.顶部); scrollTop() 获取匹配元素相对于滚动条底部的偏移量。 此方法适用于可见元素和隐藏元素。 获取第一段相对于滚动条底部的偏转： varp=$("p:first");$("p:last").text("scrollTop:"+p.scrollTop()); scrollTop(val) 传递参数值时，将垂直滚动条底部偏置设置为该值。 该方法对于设置垂直滚动条值有效：$("div.demo").scrollTop(300); 和隐藏元素。

scrollLeft() 获取匹配元素相对于滚动条两侧的偏移量。 此方法适用于可见元素和隐藏元素。 获取第一段相对于滚动条两侧的偏转： varp=$("p:first");$("p:last").text("scrollLeft:"+p.scrollLeft()); scrollLeft(val ) 传递参数值时，将水平滚动条设置为该值。 此方法适用于可见元素和隐藏元素。 设置相对滚动条两侧的倾斜：$("div.demo").scrollLeft(300);