除了对元素内容进行设置和获取，通过jQuery 也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
        //alert($('#box').attr('title'));  //获取属性的属性值

        //$('#box').attr('title', '我是'); //设置属性及属性值

        $('#box').attr({
            'title':'我发顺丰',
            'class':'red',
            'lang':    'sdafsadfadsfas'
        });//设置多个属性及属性值
   });
</script>
</head>
<body>
    <div id="box" title="我是域名"></div>
</body>

我们也可以使用attr()来创建id 属性，但我们强烈不建议这么做。

这样会导致整个页面结构的混乱。当然也可以创建class 属性，但后面会有一个语义更好的方法来代替attr()方法，所以也不建议使用。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
       /*$('#box').attr('title', function () { //通过匿名函数返回属性值，还是可以设置
            return '我是域名';
        });*/

        $('div').attr('title', function (index, value) { //可以接受两个参数   value是原来的title属性值，如果没有那么就是undefined
            return value + (index+1) + '，我是域名';
        });
   });
</script>
</head>
<body>
    <div id="box" title="我是域名"></div>
    <div id="box" title="我是域名"></div>
</body>

注意：attr()方法里的function() {}，可以不传参数。可以只传一个参数index，表示当前元素的索引(从0 开始)。也可以传递两个参数index、value，第二个参数表示属性原本的值。

注意：jQuery 中很多方法都可以使用function() {}来返回出字符串，比如html()、text()、val()

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
       $('div').html(function (index,value) {
            return value+"dasfasd"
        });

   });
</script>
</head>
<body>
    <div id="box" title="我是域名">发生</div>
    <div id="box" title="我是域名">发生</div>
</body>

删除指定的属性，这个方法就不可以使用匿名函数，传递index 和value 均无效。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
      $('div').removeAttr('title'); //删除指定的属性
   });
</script>
</head>
<body>
    <div id="box" title="我是域名">发生</div>
    <div id="box" title="我是域名">发生</div>
</body>

JQuery_元素属性操作的更多相关文章

  1. JQuery处理DOM元素-属性操作

    JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...

  2. JQuery_元素样式操作

    元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握.  一.css()方法 ...

  3. jQuery元素属性操作

    在jQuery中,用attr()方法来获取或者设置元素属性,removeAttr()方法用来删除元素属性. attr() 实例: var $para=$('p');//获取<p>节点 va ...

  4. jQuery-对标签元素 文本操作-属性操作-文档的操作

    一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...

  5. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  6. Javascript操作元素属性方法总结

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. javascript 操作元素属性的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 使用jQuery操作元素属性

    在jQuery中,提供了attr函数来操作元素属性,具体如下: 函数名 说明 例子 attr(name) 取得第一个匹配元素的属性值. $("input").attr(" ...

  9. 3 、操作元素 (属性 CSS 和 文档处理)

    3   操作元素-属性 CSS 和 文档处理  3.1 属性操作 $("p").text()    $("p").html()   $(":check ...

随机推荐

  1. PeopleSoft Home Subdirectories

    PeopleSoft Home Subdirectories appserv — home to the Application Server and Process Scheduler Server ...

  2. java_Excel 导出

    package Demo; import java.io.IOException; import java.io.OutputStream; import java.io.PrintWriter; i ...

  3. Linux搭建nfs服务器

    使用linux进行嵌入式开发的时候,为了方便开发,通常是将开发板挂载到宿主机的文件系统上,然后将代码放到共享给开发板的目录中,再通过开发板运行. 首先查看是否安装了 nfs 软件包,yum list ...

  4. python for MSSQLserver

    # -*- coding: utf-8 -*- '''python coded by written in 2016/8/31 Used for get win os log for each win ...

  5. 【原创】我所理解的自动更新-外网web服务器配置

    ClientDownload和ClientUpdate共享渠道配置信息: channel-0.php //以appstore的渠道为例 <?php define('APPNAME', 'TOKE ...

  6. 浅述WinForm多线程编程与Control.Invoke的应用

    VS2008.C#3.0在WinForm开发中,我们通常不希望当窗体上点了某个按钮执行某个业务的时候,窗体就被卡死了,直到该业务执行完毕后才缓过来.一个最直接的方法便是使用多线程.多线程编程的方式在W ...

  7. TCP/IP协议与UDP协议的区别

    TCP(Transmission Control Protocol,传输控制协议)是面向连接的协议,也就是说,在收发数据前,必须和对方建立可靠的连接.一个TCP连接必须要经过三次“对话”才能建立起来, ...

  8. String.Join的巧用

    String.Join大大的方便了我们拼接字符串的处理. 1.普通用法:指定元素间的拼接符号 var ids = new List<int>(); for (int i = 0; i &l ...

  9. Apache JMeter安装

    Apache JMeter安装说明 1.       安装环境要求: Java版本 JMeter要求充分满足JVM1.3或更高. 操作系统 JMeter可以在当前任何一个已经部署了Java的操作系统上 ...

  10. wex5 实战 wex5与js的组件关系与执行顺序（父子与先后）

    初学wex5,先理理让人容易混淆的三个概念: 一 基本概念: 1 wex5组件,顾名思义,在编辑窗口右侧的组件集合里的,都是wex5基于开源自创的组件,并封装了一套自已的方法.目的是为了方便.相关方法 ...