前端 ----jQuery的屬性操作
阿新 • • 發佈：2018-08-23
css ogg 集合 siblings ava classname style 對象屬性 define
jquery的屬性操作模塊分為四個部分：html屬性操作，dom屬性操作，類樣式操作和值操作
html屬性操作：是對html文檔中的屬性進行讀取，設置和移除操作。比如attr()、removeAttr()DOM屬性操作：對DOM元素的屬性進行讀取，設置和移除操作。比如prop()、removeProp()類樣式操作：是指對DOM屬性className進行添加，移除操作。比如addClass()、removeClass()、toggleClass()值操作：是對DOM屬性value進行讀取和設置操作。比如html()、text()、val()
attr()
設置屬性值或者 返回被選元素的屬性值
//獲取值：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(‘設置了表單控件中的值‘)；
前端 ----jQuery的屬性操作