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