JQuery_元素属性操作

除了对元素内容进行设置和获取,通过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>
时间: 2024-08-10 04:47:06

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

JQuery_元素样式操作

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

JQuery处理DOM元素-属性操作

1 //操作元素的属性: 2 $('*').each(function(n){ 3 this.id = this.tagName + n; 4 }) 5 6 //获取属性值: 7 $('').attr(''); 8 9 //设置属性值: 10 //为一个属性设置值 11 $('*').attr('title', function(index, previousValue){ 12 return previousValue + ' I am element ' + index + ' and my

jquery源码解析:jQuery对元素属性的操作2

这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2");     //给元素div的class属性添加box1和box2 $("#div1").removeClass("box1");     //删除元素div的class属性值box1 $("#div1").toggleClass("

JQuery元素属性和样式操作、以及设置元素和内容

一.JQury元素属性操作通过JQuery可以对元素本身的属性进行操作,包括获取属性的属性值,设置属性的属性值,并且可以删除属性值(attr()和removeAttr()).二.JQuery样式操作元素样式操作包括了:直接设置css样式.增加css样式.类别切换.删除类别.例如:$('div').css('color');//获取元素行内的css样式颜色.$('div').css('color'. 'pink');//设置我最喜欢的粉色.var box = $('div').css(['colo

DOM操作HTML元素属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作HTML元素属性</title> </head> <body> <ul> <li></li> <li></li> <li></li> <

jquery源码解析:jQuery对元素属性的操作1

我们先来看一下jQuery中有多少个方法是用来操作元素属性的. 首先,看一下实例方法: 然后,看下静态方法(工具方法): 静态方法是内部使用的,我们外面使用的很少,实例方法才是对外的. 接下来,我们来看下一些方法是如何使用的? $("#div1").attr("title","hello") ,设置属性,两个参数时. $("#div1").attr("title") , 获取属性值,一个参数时. $(&qu

js对元素属性.内容的操作。定时器。元素的平级,父级,子集关系。

JS对元素内容的操作: 1.操作样式(style) 2.操作属性(Attribute) 3.操作内容(innerHtml/Text) 一.操作元素属性 常见属性:class.id.style.disabled. 自定义属性:可以自定义一个任意属性名称,可以任意放值,不会对所在元素本身有任何作用. this:代表所在最近的一个方法. 设置一个属性:a.setAttribute("属性名称","属性值");[不存在该属性名称时,创建这个属性,并赋值.当存在该属性名称时,

JS-002-JavaScript 操作常见 web 元素之二-修改元素属性(以按钮示例)

此文以修改 button 元素属性(例如:添加属性.修改属性.修改颜色样式.边框样式等)为简单示例,演示 js 修改 HTML 元素属性的基本方法,敬请参阅.若有不足之处敬请指正,不胜感激! 多不闲述,就此上码. HTML 源码如下所示: 1 <html> 2 <head> 3 <meta charset='utf-8'> 4 5 <title>JS-002-JavaScript 操作常见 web 元素之二-修改元素属性(以按钮示例)</title&g

2017-3-31 js对元素属性.内容的操作。定时器。元素的平级,父级,子集关系。

JS对元素内容的操作: 1.操作样式(style) 2.操作属性(Attribute) 3.操作内容(innerHtml/Text) 一.操作元素属性 常见属性:class.id.style.disabled. 自定义属性:可以自定义一个任意属性名称,可以任意放值,不会对所在元素本身有任何作用. this:代表所在最近的一个方法. 设置一个属性:a.setAttribute("属性名称","属性值");[不存在该属性名称时,创建这个属性,并赋值.当存在该属性名称时,