JQuery 操做對象的屬性值

時間 2019-11-30

標籤 jquery 對象屬性欄目 JQuery 简体版

原文原文鏈接

經過JQuery去操做前臺對象（div,span...）的屬性是很常見的事情，本文就簡單的介紹幾種操做情形。javascript

1）：經過屬性值去獲取對象css

2）：用JQuery去修改對象的屬性值html

3）：獲取並修改對象的Style的屬性值java





<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：經過屬性值獲取對象node

基本結構爲：對象類別[屬性名='屬性值'] 。例如: span[title='first_span']jquery

<script type="text/javascript">
    function GetObjValueByTitle() {
        var obj = $("#first_div span[title='first_span']");
        alert(obj.text());
    }
</script>

2：修改對象的屬性值this

用到的即是JQuery提供的attr方法，獲取屬性值的基本結構爲：$(obj).attr("屬性名")；修改屬性值的結構爲：$(obj).attr("屬性名", "屬性值")；google

<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。】 spa

3：獲取並修改對象的Style屬性值code

用到的即是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){......});