1. jQuery的屬性操作
jquery的屬性操作模塊分為四個部分：html屬性操作，dom屬性操作，類樣式操作和值操作
html屬性操作：是對html檔案中的屬性進行讀取，設定和移除操作，比如attr()、removeAttr()
DOM屬性操作：對DOM元素的屬性進行讀取，設定和移除操作，比如prop()、removeProp()
類樣式操作：是指對DOM屬性className進行添加，移除操作，比如addClass()、removeClass()、toggleClass()
值操作：是對DOM屬性value進行讀取和設定操作，比如html()、text()、val()
1.1 html屬性操作
1.1.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'})
1.1.2 removeAttr()
移除屬性
//洗掉單個屬性 $('#box').removeAttr('name'); $('#box').removeAttr('class'); //洗掉多個屬性 $('#box').removeAttr('name class');
1.2 DOM屬性操作
1.2.1 prop()
prop() 方法設定或回傳被選元素的屬性和值，
當該方法用于回傳屬性值時，則回傳第一個匹配元素的值，
當該方法用于設定屬性值時，則為匹配元素集合設定一個或多個屬性/值對，
回傳屬性的值：
$(selector).prop(property)
設定屬性和值：
$(selector).prop(property,value)
設定多個屬性和值：
$(selector).prop({property:value, property:value,...})
1.2.2 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="https://www.cnblogs.com/liuhui0308/p/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()，
1.3 類樣式操作
1.3.1 addClass
為每個匹配的元素添加指定的類名，
$('div').addClass("box");//追加一個類名到原有的類名
還可以為匹配的元素添加多個類名，
$('div').addClass("box box2");//追加多個類名
1.3.2 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 >張三</li>
<li >李四</li>
<li >王五</li>
</ul>
<script type="text/javascript" src="https://www.cnblogs.com/liuhui0308/p/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>
1.3.3 toggleClass
如果存在（不存在）就洗掉（添加）一個類，
語法：toggleClass('box')
$('span').click(function(){
//動態的切換class類名為active
$(this).toggleClass('active')
})
1.4 值操作
1.4.1 html
html()：是獲取選中標簽元素中所有的內容
$('#box').html();
設定值：設定該元素的所有內容會替換掉標簽中原來的內容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
1.4.2 text
text()：獲取匹配元素包含的文本內容
$('#box').text();
設定該所有的文本內容
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');
值為標簽的時候，不會被渲染為標簽元素，只會被當做值渲染到瀏覽器中，
1.4.3 val
val()用于表單控制元件中獲取值，比如input textarea select等等
$('input').val();
val()用于表單控制元件中獲取值，比如input textarea select等等
$('input').val('設定了表單控制元件中的值')；
2. 操作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="https://www.cnblogs.com/liuhui0308/p/112" />男
<!-- 設定cheked屬性表示選中當前選項 -->
<input type="radio" name="sex" value="https://www.cnblogs.com/liuhui0308/p/11" checked="" />女
<input type="radio" name="sex" value="https://www.cnblogs.com/liuhui0308/p/11" />gay
<input type="checkbox" vhttps://www.cnblogs.com/liuhui0308/p/alue="a" checked=""/>吃飯
<input type="checkbox" value="https://www.cnblogs.com/liuhui0308/p/b" />睡覺
<input type="checkbox" value="https://www.cnblogs.com/liuhui0308/p/c" checked=""/>打豆豆
<!-- 下拉串列 option標簽內設定selected屬性 表示選中當前 -->
<select name="timespan" id="timespan" >
<option value="https://www.cnblogs.com/liuhui0308/p/1">8:00-8:30</option>
<option value="https://www.cnblogs.com/liuhui0308/p/2" selected="">8:30-9:00</option>
<option value="https://www.cnblogs.com/liuhui0308/p/3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="https://www.cnblogs.com/liuhui0308/p/111" />
</form>
</body>
</html>
操作表單控制元件代碼如下：
<script type="text/javascript" src="https://www.cnblogs.com/liuhui0308/p/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>
3. 檔案操作
之前js中咱們學習了js的DOM操作,也就是所謂的增刪改查DOM操作，通過js的DOM的操作，大家也能發現，大量的繁瑣代碼實作我們想要的效果，那么jQuery的檔案操作的API提供了便利的方法供我們操作我們的檔案，
看一個之前我們js操作DOM的例子：
var oUl = document.getElementsByTagName('ul')[0]; var oLi = document.createElement('li'); oLi.innerHTML = '趙云'; oUl.appendChild(oLi);
3.1 插入操作
(1) append
語法：
父元素.append(子元素)
追加某元素，在父元素中添加新的子元素，子元素可以為：stirng | element（js物件） | jquery元素，
代碼如下：
var oli = document.createElement('li'); oli.innerHTML = '哈哈哈'; $('ul').append('<li>1233</li>'); $('ul').append(oli); $('ul').append($('#app'));
如果追加的是jquery物件，那么這些元素將從原位置上消失，簡言之，就是一個移動操作，
(2) appendTo
語法：
父元素.prepend(子元素)；
追加到某元素，子元素添加到父元素
$('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('active')
要添加的元素同樣既可以是stirng 、element(js物件) 、 jquery元素，
(3) prepend
語法：
父元素.prepend(子元素)；
前置添加， 添加到父元素的第一個位置，
$('ul').prepend('<li>我是第一個</li>')
(4) prependTo
語法：
子元素.prependTo(父元素)；
前置添加， 添加到父元素的第一個位置
$('<a href="https://www.cnblogs.com/liuhui0308/p/#">小灰灰</a>').prependTo('ul')
(5) after和insertAfter
語法：
兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.insertAfter(兄弟元素)；
在匹配的元素之后插入內容
$('ul').after('<h4>我是一個h3標題</h4>')
$('<h5>我是一個h2標題</h5>').insertAfter('ul')
(6) before和insertBefore
語法：
兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.insertBefore(兄弟元素)；
在匹配的元素之后插入內容
$('ul').before('<h3>我是一個h3標題</h3>')
$('<h2>我是一個h2標題</h2>').insertBefore('ul')
3.2 克隆操作
語法：
$(選擇器).clone();
克隆匹配的DOM元素
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素
// 2.clone(true)：元素以及其所有的事件處理并且選中這些克隆的副本(簡言之，副本具有與真身一樣的事件處理能力)
$(this).clone(true).insertAfter(this);
})
3.3 修改操作
(1) replaceWith
語法：
$(selector).replaceWith(content);
將所有匹配的元素替換成指定的string、js物件、jquery物件，
//將所有的h5標題替換為a標簽 $('h5').replaceWith('<a href="https://www.cnblogs.com/liuhui0308/p/#">hello world</a>') //將所有h5標題標簽替換成id為app的dom元素 $('h5').replaceWith($('#app'));
(2) replaceAll
語法：
$('<p>哈哈哈</p>')replaceAll('h2');
替換所有，將所有的h2標簽替換成p標簽，
$('<br/><hr/><button>按鈕</button>').replaceAll('h4')
3.4 洗掉操作
(1) remove
語法：
$(selector).remove();
洗掉節點后，事件也會洗掉（簡言之，洗掉了整個標簽）
$('ul').remove();
(2) detach
語法：
$(selector).detach();
洗掉節點后，事件會保留
var $btn = $('button').detach() //此時按鈕能追加到ul中 $('ul').append($btn)
(3) empty
語法：
$(selector).empty();
清空選中元素中的所有后代節點
//清空掉ul中的子元素，保留ul $('ul').empty()
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31448.html
標籤：jQuery