一.jQuery的屬性操作
jQuery的屬性操作模塊分成四個部分: HTML屬性操作, DOM屬性操作, 類樣式操作和值操作
HTML屬性操作: 是對HTML文檔中的屬性讀取,設置和移除操作; 比如:attr(), removeAttr()
DOM屬性操作: 對DOM元素的屬性進行讀取, 設置和移除操作; 比如prop(), removeProp()
類樣式操作: 是指對DOM屬性className進行添加, 移除操作; 比如addClass(), removeClass(), toggleClass()
值操作: 是對DOM屬性value進行讀取和設置操作; 比如html(), text(), val
1.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'})
2.removeAttr()
移除屬性
//刪除單個屬性 $('#box').removeAttr('name'); $('#box').removeAttr('class'); //刪除多個屬性 $('#box').removeAttr('name class');
3.prop()
prop() 方法設置或返回被選元素的屬性和值
當該方法用於返回屬性值時, 則返回第一個匹配元素的值
當該方法用於設置屬性值時, 則為匹配元素集合設置一個或者多個屬性/值對
語法:
(1).返回屬性的值
$(selector).prop(property)
(2).設置屬性和值:
$(selector).prop(property,value)
(3).設置多個屬性和值
$(selector).prop({property:value, property:value,...})
4.關於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>
5.什么時候使用attr(), 什么時候使用prop()?
(1).是由true,false兩個屬性使用prop()
(2).其他則使用attr()
6.addClass(添加多個類名)
(1).為每個匹配的元素添加指定的類名
$('div').addClass("box");//追加一個類名到原有的類名
(2).還可以為匹配的元素添加多個類名
$('div').addClass("box box2");//追加多個類名
7.removeClass
從所有匹配的元素中刪除全部或者指定的類
(1).移除指定的類(一個或多個)
$('div').removeClass('box')；
(2).移除全部的類
$('div').removeClass();
(3).可以通過添加刪除類名，來實現元素的顯示隱藏
var tag = false; $('span').click(function(){ if(tag){ $('span').removeClass('active') tag=false; }else{ $('span').addClass('active') tag=true; } })
(4).案例
<!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>
8.toggleClass
如果存在(不存在)就刪除(添加)一個類
語法: toggleClass("box")
$('span').click(function(){
//動態的切換class類名為active
$(this).toggleClass('active')
})
9.html
獲取值:
語法:
html()是獲取選中標簽元素中所有的內容
$('#box').html();
設置值:設置該元素的所有內容會替換掉標簽中原來的內容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
10.text
獲取值: text()獲取匹配元素包含的文本內容
語法:
$('#box').text();
設置值: 設置該所有的文本內容
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');
注意: 值為標簽的時候不會被渲染為標簽元素只會被當做值渲染到瀏覽器中
11.val
獲取值: val()用於表單控件中獲取值, 比如input, textarea, select等等
設置值:
$('input').val('設置了表單控件中的值')；
二. 使用jQuery操作input的value值
表單控件是我們的重中之重,因為一旦牽扯到數據交互,離不開form表單的使用,比如用戶的注冊登錄功能等
那么通過上節知識點我們了解到, 我們在使用jQuery方法操作表單控件的方法:
$(selector).val()//設置值和獲取值
看如下HTML結構:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""> <input type="radio" name="sex" value="112" />男 <!-- 設置cheked屬性表示選中當前選項 --> <input type="radio" name="sex" value="11" checked="" />女 <input type="radio" name="sex" value="11" />gay <input type="checkbox" value="a" checked=""/>吃飯 <input type="checkbox" value="b" />睡覺 <input type="checkbox" value="c" checked=""/>打豆豆 <!-- 下拉列表 option標簽內設置selected屬性 表示選中當前 --> <select name="timespan" id="timespan" class="Wdate" > <option value="1">8:00-8:30</option> <option value="2" selected="">8:30-9:00</option> <option value="3">9:00-9:30</option> </select> <input type="text" name="" id="" value="111" /> </form> </body> </html>
操作表單控件代碼如下:
<script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 一、獲取值 //1.獲取單選框被選中的value值 console.log($('input[type=radio]:checked').val()) //2.復選框被選中的value,獲取的是第一個被選中的值 console.log($('input[type=checkbox]:checked').val()) //3.下拉列表被選中的值 var obj = $("#timespan option:selected"); // 獲取被選中的值 var time = obj.val(); console.log(time); // 獲取文本 var time_text = obj.text(); console.log("val:"+time+" text"+ time_text ); //4.獲取文本框的value值 console.log($("input[type=text]").val())//獲取文本框中的值 // 二.設置值 //1.設置單選按鈕和多選按鈕被選中項 $('input[type=radio]').val(['112']); $('input[type=checkbox]').val(['a','b']); //2.設置下拉列表框的選中值，必須使用select /*因為option只能設置單個值，當給select標簽設置multiple。 那么我們設置多個值,就沒有辦法了，但是使用select設置單個值和多個值都可以 */ $('select').val(['3','2']) //3.設置文本框的value值 $('input[type=text]').val('試試就試試') }) </script>