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