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>

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>

子元素.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>

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

//清空掉ul中的子元素，保留ul

$('ul').empty();