一.jQuery的選擇器
css 的選擇器
| css選擇器 | ||
| 符號 | 說明 | 用法 |
| #id | Id選擇器 | #id{ color:red;} |
| .class | 類選擇器 | .class{//} |
| Element | 標簽選擇器 | p{//} |
| * | 通配符選擇器 | 配合其他選擇器來使用 |
| ， | 並集選擇器 | div,p{} |
| 空格 | 后代選擇器 | div span{} |
| > | 子代選擇器 | div>span{} |
| + | 緊鄰選擇器 | div+p 選擇div緊挨着的下一個p元素 |
1.jQuery的基本選擇器
作用： 選中標簽對應的JQ對象
| jQuery的基本選擇器 | ||
| 符號 | 說明 | 用法 |
| $("#demo":) | 選擇id為demo的第一個元素 | $("#demo").css("background","red") |
| $(".liItem") | 選擇所有類名(樣式名)為liTtem的元素 | $(".liItem").css("background","red") |
| $("div1") | 選擇所有標簽名字為div的元素 | $(".div").css("background","red") |
| $("*") | 選擇所有元素(少用或配合其他選擇器來使用) | $("*").css("background","red") |
| $(".liItem,div") | 選擇多個指定的元素,這個地方是選擇出了.liItem元素和div元素 | $(".liItem,div").css("background","red") |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div></div>
<div id="box"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//入口函數
$(function(){
//三種方式獲取jquery對象
var jqBox1 = $("#box");
var jqBox2 = $(".box");
var jqBox3 = $('div');
//操作標簽選擇器
jqBox3.css('width', '100');
jqBox3.css('height', 100);
jqBox3.css('background-color', 'red');
jqBox3.css('margin-top', 10);
//操作類選擇器(隱式迭代，不用一個一個設置)
jqBox2.css("background", "green");
jqBox2.text('哈哈哈')
//操作id選擇器
jqBox1.css("background", "yellow");
})
</script>
</body>
</html>
2.層級選擇器
| 層級選擇器 | ||
| 符號 | 說明 | 用法 |
| 空格 | 后代選擇器 選擇所有的后代元素 | $("div span").css("background","red") |
| > | 子代選擇器 選擇所有的子代元素 | $("div>span").css("background","red") |
| + | 緊鄰選擇器 選擇緊挨着的下一個元素 | $("div+span").css("background","red") |
| ~ | 兄弟選擇器 選擇后面的所有的兄弟元素 | $("div~span").css("background","red") |
層級選擇器選擇了選擇符后面那個元素, 比如 : div>p, 是選擇>后面的p元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//獲取ul中的li設置為粉色
//后代：兒孫重孫曾孫玄孫....
var jqLi = $("ul li");
jqLi.css("margin", 5);
jqLi.css("background", "pink");
//子代：親兒子
var jqOtherLi = $("ul>li");
jqOtherLi.css("background", "red");
});
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</ul>
</body>
</html>
3.基本過濾選擇器
| 基本過濾選擇器 | ||
| 符號 | 說明 | 用法 |
| :eq(index) | index是從0開始的下一個數字,選擇序號為index的元素.(選擇第一個匹配的元素) | $("li:eq(1)").css("background","red") |
| :gt(index) | index是從0開始的一個數字,選擇序號大於index的元素 | $("li:gt(2)").css("background","red") |
| :lt(index) | index是從0開始的一個數字,選擇序號小於index的元素 | $("li:lt(2)").css("background","red") |
| :odd | 選擇所有序號為奇數行的元素 | $("li:odd").css("background","red") |
| :even | 選擇所有序號為偶數行的元素 | $("li:even").css("background","red") |
| :first | 選擇匹配第一個元素 | $("li:first").css("background","red") |
| :Iast | 選擇匹配的最后一個元素 | $("li:last").css("background","red") |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本過濾選擇器</title>
</head>
<body>
<ul>
<li>哈哈哈哈，基本過濾選擇器</li>
<li>嘿嘿嘿</li>
<li>天王蓋地虎</li>
<li>小雞燉蘑菇</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//獲取第一個 :first ,獲取最后一個 :last
//奇數
$('li:odd').css('color','red');
//偶數
$('li:even').css('color','green');
//選中索引值為1的元素 *
$('li:eq(1)').css('font-size','30px');
//大於索引值1
$('li:gt(1)').css('font-size','50px');
//小於索引值1
$('li:lt(1)').css('font-size','12px');
})
</script>
</html>
4.屬性選擇器
| 屬性選擇器 | ||
| 符號 | 說明 | 用法 |
| $("a[href]") | 選擇所有包含href屬性的元素 | $("a[href]").css("background","red") |
| $("a[href='luffy']") | 選擇href屬性值為luffy的所有a標簽 | $("a[href='luffy']").css("background","red") |
| $("a[href!='baidu']") | 選擇href屬性不等於baidu的所有元素(包括沒有href的元素) | $("a[href!='baidu']").css("background","red") |
| $("a[href^='web']") | 選擇所有以web開頭的元素 | $("a[href^='web']").css("background","red") |
| $("a[href$='cn']") | 選擇所有以cn結尾的元素 | $("a[href$='cn']").css("background","red") |
| $("a[href*='i']") | 選擇所有包含i這個字符的元素,可以是中英文 | $("a[href*='i']").css("background","red") |
| $("a[href][title]='我']") | 選擇所有符號指定屬性規則的元素,都符合才會被選中 | $("a[href][title]='我']").css("background","red") |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<h2 class="title">屬性元素器</h2>
<!--<p class="p1">我是一個段落</p>-->
<ul>
<li id="li1">分手應該體面</li>
<li class="what" id="li2">分手應該體面</li>
<li class="what">分手應該體面</li>
<li class="heihei">分手應該體面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked" />
<input name="username1111" type='text' value="1" />
<input name="username2222" type='text' value="1" />
<input name="username3333" type='text' value="1" />
<button class="btn-default">按鈕1</button>
<button class="btn-info">按鈕1</button>
<button class="btn-success">按鈕1</button>
<button class="btn-danger">按鈕1</button>
</form>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
//標簽名[屬性名] 查找所有含有id屬性的該標簽名的元素
$('li[id]').css('color','red');
//匹配給定的屬性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素
$('li[class!=what]').css('font-size','50px');
//匹配給定的屬性是以某些值開始的元素
$('input[name^=username]').css('background','gray');
//匹配給定的屬性是以某些值結尾的元素
$('input[name$=222]').css('background','greenyellow');
//匹配給定的屬性是以包含某些值的元素
$('button[class*=btn]').css('background','red')
})
</script>
</html>
5.篩選選擇器
| 篩選選擇器(通過方法調用) | ||
| 符號 | 說明 | 用法 |
| find(selector) | 查找指定元素的所有后代元素(包括子子孫孫) | $("#i_wrap").find("li").css("color","red"); 選擇id為i_wrap的所有后代元素li |
| children() | 查找指定元素的直接子元素(親兒子元素) |
$("#i_wrap").children("ul").css("color","red"); 選擇id為i_wrap的所有子代元素ul |
| siblings() | 查找所有兄弟元素(不包括自己) | $("#i_liItem").siblings().css("color","red"); 選擇id為i_liItem的所有兄弟元素 |
| parent() | 查找父元素(親的) | $("#i_liItem").parent("ul").css("color","red"); 選擇id為i_liItem的父元素 |
| eq(index) | 查找指定元素的第index個元素,index是索引號,從0開始 | $("li").eq(2).css("color","red"); 選擇所有li元素中的第二個 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一個span標簽</span>
<span>我是第二個span標簽</span>
<span>我是第三個span標簽</span>
</p>
<button>按鈕</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
//獲取第n個元素 數值從0開始
$('span').eq(1).css('color','#FF0000');
//獲取第一個元素 :first :last 點語法 ：get方法 和set方法
$('span').last().css('color','greenyellow');
$('span').first().css('color','greenyellow');
//查找span標簽的父元素（親的）
$('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
//選擇所有的兄弟元素（不包括自己）
$('.list').siblings('li').css('color','red');
//查找所有的后代元素
$('div').find('button').css('background','yellow');
//不寫參數代表獲取所有子元素。
$('ul').children().css("background", "green");
$('ul').children("li").css("margin-top", 10);
</script>
</html>
二.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() 方法設置或返回被選元素的屬性和值。
當該方法用於返回屬性值時，則返回第一個匹配元素的值。
當該方法用於設置屬性值時，則為匹配元素集合設置一個或多個屬性/值對。
語法：
返回屬性的值：
$(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('設置了表單控件中的值')；