码迷,mamicode.com
首页 > Web开发 > 详细

JQuery 操作对象的属性值

时间:2017-03-08 00:41:41      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:java   1.7   put   node   介绍   input   代码   for   val   

通过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 操作对象的属性值

标签:java   1.7   put   node   介绍   input   代码   for   val   

原文地址:http://www.cnblogs.com/gev-1016/p/6517317.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!