除了对元素内容进行设置和获取，通过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. Ref和Out参数的区别(转帖）

    首先,如果不使用这两个关键字,那是什么样 呢? 看下面的例子: using System;   class Test   {   static void Swap(ref int x, ref int ...

  2. peoplesoft SQR language

    Understanding SQR Data Elements !Variables!Variables are storage places for text or numbers that you ...

  3. 1.NoSql简介

    NoSQL,指的是非关系型的数据库.随着互联网web2.0网站的兴起,传统的关系数据库在应付web2.0网站,特别是超大规模和高并发的SNS类型的web2.0纯动态网站已经显得力不从心,暴露了很多难以 ...

  4. LINQ使用细节之.AsEnumerable()和.ToList()的区别

    先看看下面的代码,用了 .AsEnumerable(): 1 var query = (from a in db.Table2 where a = SomeCondition3 select a.So ...

  5. Vim命令合集大全

    命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filename 打开vim ...

  6. 30分钟学会如何使用Shiro

    本篇内容大多总结自张开涛的<跟我学Shiro>原文地址:http://jinnianshilongnian.iteye.com/blog/2018936 我并没有全部看完,只是选择了一部分 ...

  7. Js 拖动效果

    <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>j ...

  8. MySQL Group Replication 技术点

    mysql group replication,组复制,提供了多写(multi-master update)的特性,增强了原有的mysql的高可用架构.mysql group replication基 ...

  9. 主机和虚拟机不能ping通问题

    VMware的三种网络模式附上: 在vmw中,默认有3个虚拟交换机 分别是VMnet0(桥接).VMnet1(主机网络)以及VMnet8(NAT) 还可以根据需要添加VMnet2~VMnet7和VMn ...

  10. 【转】Tomcat版本是32位、64位问题

    转载地址:http://www.cnblogs.com/greensleeves/p/3168541.html 最近遇到一个Tomcat windows安装版本是32位还是64位问题.由于一系列原因, ...