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

JQuery 操作对象的属性值的更多相关文章

  1. JQuery修改对象的属性值

    JQuery修改对象的属性值 用到的便是JQuery提供的attr方法,获取属性值的基本结构为:$(obj).attr("属性名"):修改属性值的结构为:$(obj).attr(& ...

  2. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  3. jquery attr()方法 添加，修改，获取对象的属性值。

    jquery attr()方法 添加,修改,获取对象的属性值. jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到 ...

  4. 【java】【反射】反射实现判断发生了修改操作，判断两个对象是否发生属性值的变更，判断两个List集合内对象的属性值是否发生变更

    java的反射实现: 判断发生了修改操作,判断两个对象是否发生属性值的变更,判断两个List集合内对象的属性值是否发生变更 今日份代码: package com.sxd.streamTest; imp ...

  5. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  6. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  7. webdriver高级应用- 改变一个页面对象的属性值

    适用于一些无法操作的元素,可以直接改他的属性从而操作,代码如下: #encoding=utf-8 from selenium import webdriver import unittest impo ...

  8. 读匿名object对象的属性值

    读匿名object对象的属性值 1.定义读object对象值的功能方法 public static class StaticClass { public static string ValueByKe ...

  9. jquery得到iframe src属性值的方法

    这篇文章主要介绍了jquery得到iframe src属性值的方法,很简单,很实用,需要的朋友可以参考下 取得iframe src属性的的值: Html代码 <!DOCTYPE HTML> ...

随机推荐

  1. 套接字IO超时设置和使用select实现超时管理

    在涉及套接字IO超时的设置上有一下3种方法: 1.调用alarm,它在指定的时期满时产生SIGALRM信号.这个方法涉及信号的处理,而信号处理在不同的实现上存在差异,而且可能干扰进程中现有的alarm ...

  2. HTML5之sessionStorage

    http://www.css88.com/archives/tag/sessionstorage http://blog.csdn.net/qxs965266509/article/details/1 ...

  3. jenkins集成ansible注意事项Failed to connect to the host via ssh.

    在集成jenkins和ansible实现自动化部署时,root用户下执行ansible命令时可以正常运行.由于是通过jenkins用户去执行ansible命令,而jenkins用户却报如下异常: XX ...

  4. NGUI 不写一行代码实现翻拍效果

    正面UI添加一个TweenRotation组件,取消掉Active状态 ,To参数改成0,90,0) 背面UI添加一个TweenRotation组件,取消掉Active状态, From参数改成0,27 ...

  5. java web 学习 --第五天（Java三级考试）

    第四天的学习内容:http://www.cnblogs.com/tobecrazy/p/3454860.html Response对象 response对象主要是向客户端浏览器发送二进制数据,如输出C ...

  6. effective OC2.0 52阅读笔记（二 对象、消息、运行期）

    第二章:对象.消息.运行期 6 理解属性这一概念 总结:OC解决硬编码偏移量问题的做法,一种方案是把实例变量当做一种存储偏移量所用的特殊变量,交由类对象保管,偏移量会在运行期查找,叫做稳固的“应用程序 ...

  7. Python 开发轻量级爬虫02

    Python 开发轻量级爬虫 (imooc总结02--爬虫简介) 爬虫简介 首先爬虫是什么?它是一段自动抓取互联网信息的程序. 什么意思呢? 互联网由各种各样的的网页组成,每一个网页都有对应的url, ...

  8. 把图标改成web字体

    一.下载自己想要的矢量图标,然后在AI中打开二.在AI中将有瑕疵的图标修改一下,再分别另存为svg格式的图标三.打开IcoMoon Web app网页,然后点击左上角的+Import Icons添加你 ...

  9. 如何查看设备的 UDID

    手机连接上电脑,打开 Xcode,确认手机已连上: command+shift+2,就可以查看到 UDID 了:

  10. ！struct operator reload

    struct t3DObject //对象信息结构体{ int numOfVerts; // 模型中顶点的数目 int numOfFaces; // 模型中面的数目 int numTexVertex; ...