JQuery操作对象的属性

最新推荐文章于 2022-10-07 10:59:00 发布

Zealoter1993

最新推荐文章于 2022-10-07 10:59:00 发布

阅读量789

点赞数

分类专栏： Javascript 文章标签： jquery

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

通过JQuery去操作前台对象（div,span...）的属性是很常见的事情，本文就简单的介绍几种操作情形。

1）：通过属性值去获取对象

2）：用JQuery去修改对象的属性值

3）：获取并修改对象的Style的属性值

这里提供一个简单的前台Html代码，后续操作都是对此段Html代码进行的。

<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){......});

Zealoter1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery操作对象的属性

通过JQuery去操作前台对象（div,span...）的属性是很常见的事情，本文就简单的介绍几种操作情形。1）：通过属性值去获取对象2）：用JQuery去修改对象的属性值3）：获取并修改对象的Style的属性值这里提供一个简单的前台Html代码，后续操作都是对此段Html代码进行的。html xmlns="http://www.w3.org/
复制链接

扫一扫