除了对元素内容进行设置和获取，通过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. centos查看实时网络带宽占用情况方法

    Linux中查看网卡流量工具有iptraf.iftop以及nethogs等,iftop可以用来监控网卡的实时流量(可以指定网段).反向解析IP.显示端口信息等. centos安装iftop的命令如下: ...

  2. 安装hive+mysql

    1.源码安装mysql 以root用户首先安装libaio-0.3.104.tar.gz tar zxvf libaio-0.3.104.tar.gz cd libaio-0.3.104 make p ...

  3. Material Design Lite，简洁惊艳的前端工具箱。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  4. 项目中如何GB2312转UTF-8

    $str = mb_convert_encoding($str, "gb2312", "UTF-8"); // 这是一个PHP 自带函数 参数1 是要转的字符, ...

  5. EF 数据初始化

    数据库不存在时重新创建数据库: Database.SetInitializer<testContext>(new DropCreateDatabaseAlways<testConte ...

  6. 程序员面试大揭秘——应聘微软、亚马逊、谷歌、苹果等IT公司你都要做什么准备？

    对于多数求职者而言,面试好似一个迷局.你去了,见了几个面试官,答了一堆问题,然后,或两手空空离开,或幸运地拿到录用通知. 你有没有想过: 面试结果是怎么得出的? 面试官会不会互相交流? 公司最看重哪些 ...

  7. asp.net页面生命周期请求管道19个事件

    HttpContext: ecb→ HttpWorkerRequest→HttpContext HttpApplicationFactory.获取了HttpApplication实例之后. (1)Be ...

  8. U-Boot移植

    基于天翔的老师的课程, 他的博客在这儿: http://blog.csdn.net/johnmcu/article/details/6561311 注明不能转载, 就重新写一下吧: 1. 安装韦东山的 ...

  9. Android Fragment替换View

    在BaseActivity 中添加替换方法 public void replace(int id, Fragment fragment) { getSupportFragmentManager() . ...

  10. [转] 将DOS格式文本文件转换成UNIX格式

    点击此处阅读原文 用途说明 dos2unix命令用来将DOS格式的文本文件转换成UNIX格式的(DOS/MAC to UNIX text file format converter).DOS下的文本文 ...