JQuery 操作对象的属性值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 操作对象的属性值相关的知识，希望对你有一定的参考价值。
通过JQuery去操作前台对象（div,span...）的属性是很常见的事情，本文就简单的介绍几种操作情形。
1）：通过属性值去获取对象
2）：用JQuery去修改对象的属性值
3）：获取并修改对象的Style的属性值
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.7.1.min.js"></script> <style type="text/css"> .mySpan { color:red; } </style> </head> <body> <form id="form1" runat="server"> <div> <div id="first_div"> <span class="mySpan" title="first_span" nodeUrl="http://google.com/">first</span> <br /> <span class="mySpan" title="second_span" nodeUrl="http://baidu.com/">second</span> <br /> <span class="mySpan" title="third_span" nodeUrl="http://sina.com/">third</span> </div> <input type="button" name="button" value="Button" onclick="GetObjValueByTitle();" /> </div> </form> </body> </html>
1：通过属性值获取对象
基本结构为：对象类别[属性名=‘属性值‘] 。 例如: span[title=‘first_span‘]
<script type="text/javascript"> function GetObjValueByTitle() { var obj = $("#first_div span[title=‘first_span‘]"); alert(obj.text()); } </script>
2：修改对象的属性值
用到的便是JQuery提供的attr方法，获取属性值的基本结构为：$(obj).attr("属性名")；修改属性值的结构为：$(obj).attr("属性名", "属性值")；
<script type="text/javascript">
function ChangeObjAttrValue() {
var objs = $("#first_div .mySpan");
$.each(objs, function (index, item) {
$(item).attr("title", "haha");
alert($(this).attr("nodeUrl")); // $(this) == $(item)
});
}
</script>
【注：对于具体的对象我们可以随意添加我们自定义的属性，并且我们可以通过自定义的属性名获取对应的属性值，例如此文中的nodeUrl。】
3：获取并修改对象的Style属性值
用到的便是JQuery提供的css方法，获取style中某个属性的结构为：$(obj).css("属性名")；修改属性值的结构为：$(obj).css("属性名", "属性值")；
<script type="text/javascript">
function ChangeObjStyleValue() {
var objs = $("#first_div span");
objs.each(function (index, item) {
$(item).css("color", "blue");
});
}
</script>
由第二条和第三条的对比我们可以简单的总结：操作对象的属性值（id, name, title......）我们可以用JQuery的attr方法；操作对象的style属性（css中的background，color，width，height......）我们可以用JQuery的css方法。
当我们用JQuery去便利集合时，可以用each方法，each的变现形式有两种：
1）：$.each(objs, function(index, item){......});
2）：objs.each(function(index, item){......});
以上是关于JQuery 操作对象的属性值的主要内容，如果未能解决你的问题，请参考以下文章