除了对元素内容进行设置和获取,通过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. Win下,通过Jstack截取Java进程中的堆栈信息

    在Java软件的使用过程中,有时会莫名的出现奇怪的问题.而这些问题常常无法使用日志信息定位,这时我们就需要通过查看进程内部线程的堆栈调用关系来分析问题出在哪里. 举个例子,当我们在做某个操作时,莫名的 ...

  2. 通过代码获取res里生成R.java中的值

    引用:http://my.eoe.cn/blue_rain/archive/552.html 有的时候我们生成库文件,需要在里面加入一些UI,并提供出一些xml的资源,那如何在其他项目中使用呢? 我们 ...

  3. sqlserver 锁与阻塞

    DDL/索引重建 会申请 Sch-M锁 with (nolock) 会申请 Sch-S锁 with (nolock)会阻塞 sch-M, 同样Sch-M也会 阻塞with (nolock) 索引重建2 ...

  4. javascript的类型、值和变量

    js的类型有多种分类,原始类型(数值,字符串,布尔值,null,undefined)和对象类型(object,String,Number,RgbExp等),或者是拥有方法的类型(object,Stri ...

  5. 图说js中的this——深入理解javascript中this指针

    没搞错吧!js写了那么多年,this还是会搞错!没搞错,javascript就是回搞错! ………… 文章来源自——周陆军的个人网站:http://zhoulujun.cn/zhoulujun/html ...

  6. MessageReceiver

    class MessageReceiver { private RelayEngine<MessageCollection> _MessageRelayEngine; private st ...

  7. 利用Maven打包时,如何包含更多的资源文件

    首先,来看下MAVENx项目标准的目录结构: 一般情况下,我们用到的资源文件(各种xml,properites,xsd文件等)都放在src/main/resources下面,利用maven打包时,ma ...

  8. IOS UITableview代理方法总结

    tableview的datasource代理 @required的两个数据源方法 1.返回每个 session 中 cell 的个数 - (NSInteger)tableView:(UITableVi ...

  9. java.sql.SQLException: null, message from server: "Host '192.168.xxx.xxx' is not allowed to connect to this MySQL server"

    当你连接自己的电脑上的MySQL时,报这样的错,你可以把ip换成 127.0.0.1或者localhost  ,当然前提是用户名和密码正确

  10. Js控制Div在浏览器中的高度

    //需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...