jQuery对象的属性操作

jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr()

设置属性值或者返回被选元素的属性值

获取：
$('div').attr('id')
设置
$('div').attr('class','box')
设置多个值，键值对存储
$('div').attr({name:'hahaha',class:'happy'})

removeAttr()

移除属性

//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');
 
//删除多个属性
$('#box').removeAttr('name class');

prop()

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

返回属性的值
$(selector).prop(property)

设置属性和值
$(selector).prop(property,value)

设置多个属性和值
$(selector).prop({property:value, property:value,...})

attr和prop的运用场景

在使用单双选框的时候
//使用attr获取checked的值
           console.log($('input').eq(0).attr('checked'));
-----》返回 checked
 //使用prop获取checked的值
            console.log($('input').eq(0).prop('checked'));
-----》返回true

可以根据不同结果去运用

addClass（添加多个类名）

removeClass从所有匹配的元素中删除全部或者指定的类。

$('div').addClass("box");//追加一个类名到原有的类名

$('div').addClass("box box2");//追加多个类名

$('div').removeClass('box')；移除指定的类（一个或多个）

$('div').removeClass();   移除全部的类

toggleClass如果存在（不存在）就删除（添加）一个类。

$(this).toggleClass('active')

html()

设置值：设置该元素的所有内容会替换掉标签中原来的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*.box{*/
            /*color: red;*/
        /*}*/
    </style>
</head>
<body>
<div class="box">
    1111
</div>
<div class=".box1">123</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        //设置值
        var name = '张韶涵';
        // 模板字符串 tab键上面的反引号 插入变量使用${变量名}
        $('.box').html(`<p style="color: red;">${name}</p>`);
        //使用加号比较麻烦
        // $('.box').html('<p style="color: red;">'+name+'</p>');
        //获取值
        console.log($('.box').html());
    })
</script>

</body>
</html>

View Code

text

text() 获取匹配元素包含的文本内容,一般配合trim使用

console.log($('.box').text().trim());  //去除左右空格

val

val()用于表单控件中获取值，比如input textarea select等等

$('input').val('设置了表单控件中的值')；

jquery的文档操作

1插入

父元素.append(子元素)

$('ul').append('<li class="item1">苏东坡</li>');

如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作

<body>
    <ul></ul>
    <ol>
        <li class="li1">张碧晨</li>
        <li></li>
    </ol>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //将.li1元素移动到ul里面
        $('ul').append($('.li1'));
    })
</script>
</body>

View Code

子元素.appendTo(父元素)

父元素.prepend(子元素)；前置添加，添加到父元素的第一个位置

$('ul').prepend('<li>我是第一个</li>')

子元素.prependTo(父元素)；前置添加，添加到父元素的第一个位置

$('<li>我是第一个</li>').prependTo(‘ul’)

父元素.before(子元素)；

子元素.inserBefore(父元素)；在匹配的元素之前插入内容

2修改

replaceWith():替换

replaceAll() :替换所有

$('<p>哈哈哈</p>').replaceAll('h2');

3删除

remove() 删除节点后，事件也会删除（简言之，删除了整个标签）

detach() 删除节点后，事件会保留

$('ul').remove();

$('button').detach();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>操作</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('button').click(function () {
            var btn = $('button').eq(0).detach();   //删除节点后，事件会保留
            $('body').append(btn);  //将删除的标签添加到body中
            //克隆匹配的DOM元素
            $(this).clone(true).insertAfter(this); //true表示克隆自己，副本具有与真身一样的事件处理能力
        })
    })
</script>
</body>
</html>

View Code

empty() 清空选中元素中的所有后代节点

//清空掉ul中的子元素，保留ul
$('ul').empty();