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();

巴特西

jQuery对象的属性操作

attr()

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

removeAttr()

移除属性

prop()

attr和prop的运用场景

addClass（添加多个类名）

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

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

html()

text

val

jquery的文档操作

1插入

2修改

3删除

最新文章

热门文章

巴特西

jQuery对象的属性操作

attr()

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

removeAttr()

移除属性

prop()

attr和prop的运用场景

addClass（添加多个类名）

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

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

html()

text

val

jquery的文档操作

1插入

2修改

3删除

最新文章

热门文章

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