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