標籤：prope ref ext inpu style addclass 渲染 ... happy
jquery的屬性操作模組分為四個部分：html屬性操作，dom屬性操作，類樣式操作和值操作
html屬性操作：是對html文檔中的屬性進行讀取，設定和移除操作。比如attr()、removeAttr()DOM屬性操作：對DOM元素的屬性進行讀取，設定和移除操作。比如prop()、removeProp()類樣式操作：是指對DOM屬性className進行添加，移除操作。比如addClass()、removeClass()、toggleClass()值操作：是對DOM屬性value進行讀取和設定作業。比如html()、text()、val()設定屬性值或者 返回被選元素的屬性值
//擷取值：attr()設定一個屬性值的時候 只是擷取值 var id = $(‘div‘).attr(‘id‘) console.log(id) var cla = $(‘div‘).attr(‘class‘) console.log(cla) //設定值 //1.設定一個值 設定div的class為box $(‘div‘).attr(‘class‘,‘box‘) //2.設定多個值，參數為對象，索引值對儲存 $(‘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()的區別
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> 男<input type="radio" id=‘test‘ name="sex" checked/> 女<input type="radio" id=‘test2‘ name="sex" /> <button>提交</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //擷取第一個input var el = $(‘input‘).first(); //undefined 因為attr是擷取的這個對象屬性節點的值，很顯然此時沒有這個屬性節點，自然輸出undefined console.log(el.attr(‘style‘)); // 輸出CSSStyleDeclaration對象，對於一個DOM對象，是具有原生的style對象屬性的，所以輸出了style對象 console.log(el.prop(‘style‘)); console.log(document.getElementById(‘test‘).style); $(‘button‘).click(function(){ alert(el.prop("checked") ? "男":"女"); }) }) </script> </body></html>
什麼時候使用attr()，什麼時候使用prop()？
1.是有true,false兩個屬性使用prop();
2.其他則使用attr();
addClass（添加多個類名）
為每個匹配的元素添加指定的類名。
$(‘div‘).addClass("box");//追加一個類名到原有的類名
還可以為匹配的元素添加多個類名
$(‘div‘).addClass("box box2");//追加多個類名removeClass
從所有匹配的元素中刪除全部或者指定的類。
移除指定的類（一個或多個）
$(‘div‘).removeClass(‘box‘)；
移除全部的類
$(‘div‘).removeClass();
可以通過添加刪除類名，來實現元素的顯示隱藏
代碼如下：
var tag = false; $(‘span‘).click(function(){ if(tag){ $(‘span‘).removeClass(‘active‘) tag=false; }else{ $(‘span‘).addClass(‘active‘) tag=true; } })案例：
代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .active{ color: red; } </style></head><body> <ul> <li class="item">張三</li> <li class="item">李四</li> <li class="item">王五</li> </ul> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $(‘ul li‘).click(function(){ // this指的是當前點擊的DOM對象 ,使用$(this)轉化jquery對象 $(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘); }) }) </script> </body></html>
toggleClass
如果存在（不存在）就刪除（添加）一個類。
文法：toggleClass(‘box‘)
$(‘span‘).click(function(){ //動態切換class類名為active $(this).toggleClass(‘active‘)})html
擷取值：
文法;
html() 是擷取選中標籤元素中所有的內容
$(‘#box‘).html();
設定值：設定該元素的所有內容 會替換掉 標籤中原來的內容
$(‘#box‘).html(‘<a href="https://www.baidu.com">百度一下</a>‘);
text
擷取值：
text() 擷取匹配元素包含的常值內容
文法：
$(‘#box‘).text();
設定值：
設定該所有的常值內容
$(‘#box‘).text(‘<a href="https://www.baidu.com">百度一下</a>‘);
注意：值為標籤的時候 不會被渲染為標籤元素 只會被當做值渲染到瀏覽器中
val
擷取值：
val()用於表單控制項中擷取值，比如input textarea select等等
設定值：
$(‘input‘).val(‘設定了表單控制項中的值‘)；
04-jQuery的屬性操作
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
