zoukankan      html  css  js  c++  java
  • JQuery 操作对象的属性值

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

  • 相关阅读:
    iOS开发常见错误(转)
    SVN各种错误提示产生原因及处理方法大全(转)
    SVN常见问题(转)
    iPhone6 Plus、iPhone6、iPhone5S和之前版本真实分辨率
    各类 HTTP 返回状态代码详解(转)
    js:全局作用域和调整浏览器窗口大小
    python之制作模块
    python之模块time | strftime || 模块datetime | timedelta | 计算3天前的日期
    python之模块 sys | os
    python之正则表达式 | match | split | findall | sub替换 |
  • 原文地址:https://www.cnblogs.com/mingmingruyuedlut/p/2958690.html
Copyright © 2011-2022 走看看