jquery選擇器
jquery用法思想一
選擇某個網頁元素，然後對它進行某種操作
jquery選擇器
jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。
$('#myId') //選擇id爲myId的網頁元素
$('.myClass') // 選擇class爲myClass的元素
$('li') //選擇所有的li元素
$('#ul1 li span') //選擇id爲爲ul1元素下的所有li下的span元素
$('input[name=first]') // 選擇name屬性等於first的input元素
對選擇集進行過濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').eq(5); //選擇第6個div元素
選擇集轉移
$('div').prev(); //選擇div元素前面緊挨的同輩元素
$('div').prevAll(); //選擇div元素之前所有的同輩元素
$('div').next(); //選擇div元素後面緊挨的同輩元素
$('div').nextAll(); //選擇div元素後面所有的同輩元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內的class等於myClass的元素
判斷是否選擇到了元素
jquery有容錯機制，即使沒有找到元素，也不會出錯，可以用length屬性來判斷是否找到了元素,length等於0，就是沒選擇到元素，length大於0，就是選擇到了元素。
var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 彈出1
alert($div2.length); // 彈出0
......
<div id="div1">這是一個div</div>
jquery樣式操作
jquery用法思想二
同一個函數完成取值和賦值
操作行間樣式
// 獲取div的樣式
$("div").css("width");
$("div").css("color");
//設置div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特別注意
選擇器獲取的多個元素，獲取信息獲取的是第一個，比如：$(“div”).css(“width”)，獲取的是第一個div的width。
操作樣式類名
$("#div1").addClass("divClass2") //爲id爲div1的對象追加樣式divClass2
$("#div1").removeClass("divClass") //移除id爲div1的對象的class名爲divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式
jQuery選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: red;
text-align: center;
line-height: 100px;
font-size: 30px;
color: #ffffff;
}
.section1{
display: none;
}
.a{
position: relative;
}
.boss{
width: 100px;
height: 100px;
margin-top: 20px;
}
</style>
</head>
<!--選擇器-->
<body>
<div id="aa" class="section">
hello
<p></p>
</div>
<p></p>
<div class="section">
2
</div>
<div class="section1">
3
</div>
<div class="section">
4
</div>
<div class="section" lang="en-us">
5
</div>
<h1></h1>
<p></p>
<h2></h2>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<p></p>
<table>
<tbody>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td></td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 11</td>
<td></td>
</tr>
<tr>
<td>Value 2</td>
<td>Value 22</td>
<td></td>
</tr>
<tr>
<td>Value 3</td>
<td>Value 33</td>
<td></td>
</tr>
<tr>
<td>Value 4</td>
<td>Value 44</td>
<td></td>
</tr>
</tbody>
</table>
<div id="aa">
<div class=".box">
<div class="demo"></div>
</div>
</div>
<div class="one">
hello
</div>
<div class="one"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p class="p1"></p>
<p class="p2"></p>
<ul>
<li style="display:none">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul>
<li>123123</li>
</ul>
<h1></h1>
<h2></h2>
<h3></h3>
<input type="text" name="bar" id="" />
<input type="button" name="bar" />
<input type="text" name="var" autofocus="" />
<input type="password" />
<input type="radio" />
<input type="checkbox" />
<input type="submit" />
<input type="image" />
<input type="reset" />
<input type="file" />
<form>
<input name="email" disabled="disabled" />
<input name="id" />
<input type="checkbox" name="abc" checked="checked" value="Daily" />
</form>
<select> <option value="1">1</option> <option value="2" selected="selected">2</option> <option value="3">3</option> </select>
<div>
<span>A</span>
<span>B</span>
<span>C</span>
</div>
<script src="jquery-1.10.2.js"></script>
<script>
// document.querySelectorAll("");
console.log($("#aa"));//通過ID獲取
console.log($("div"));//通過元素標籤名獲取
console.log($(".section"));//通過類名獲取
console.log($("*"));//獲取所有元素
console.log($("#aa,.section,p"));//羣組選擇器
console.log($("ul li"));//後代選擇器
console.log($("ul>li"));//子選擇器
console.log($("div+p"));//匹配所有緊接在某元素後的某某元素
console.log($("div~p"));//匹配某元素後所有某某元素
console.log($("li:first"));//獲取第一個
console.log($("li:last"));//獲取最後一個
console.log($("div:not(#aa)"));//去除某元素
console.log($("tr:even"));//按偶數索引值獲取元素
console.log($("tr:odd"));//按奇數索引值獲取元素
console.log($("tr:eq(3)"));//獲取一個給定索引值的元素
console.log($("tr:gt(2)"));//匹配所有大於給定索引值的元素
console.log($("tr:lt(2)"));//匹配所有小於給定索引值的元素
console.log($("div:lang(en-us)"));//選擇指定語言的所有元素。
console.log($(":header"));//匹配如 h1, h2, h3之類的標題元素
console.log($(":root"));//獲取根元素
console.log($("div:contains(hello)"));//匹配包含給定文本的元素
console.log($("td:empty"));//匹配所有不包含子元素或者文本的空元素
console.log($("div:has(p)"));//匹配含有選擇器所匹配的元素的元素
console.log($("td:parent"));//匹配含有子元素或者文本的元素
console.log($("div:hidden"));//匹配所有不可見元素，或者type爲hidden的元素
console.log($("div:visible"));//匹配所有的可見元素
console.log($("div[id]"));//匹配包含給定屬性的元素。
console.log($("div[lang='en-us']"));//匹配給定的屬性是某個特定值的元素
console.log($("div[lang!='en-us']"));//匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。
console.log($("ul li:first-child"));//在每個 ul 中查找第一個 li
console.log($("li:first-of-type"));
console.log($("ul li:last-child"));//在每個 ul 中查找最後一個 li
console.log($("ul li:nth-child(2)"));
console.log($("ul li:nth-last-child(2)"));//在每個匹配的ul中查找倒數第二個li
console.log($("ul li:nth-last-of-type(2)"));//在每個匹配的ul中查找倒數第二個li
console.log($("span:nth-of-type(2)"));//查找每個span，這個 span 是 其所有兄弟span元素中的第二個元素
console.log($("ul li:only-child"));//在 ul 中查找是唯一子元素的 li
console.log($(":input"));//查找所有的input元素
console.log($(":text"));//查找所有文本框
console.log($(":password"));//查找所有密碼框
console.log($(":radio"));//查找所有單選按鈕
console.log($(":checkbox"));//匹配所有複選框
console.log($(":submit"));//查找所有提交按鈕
console.log($(":image"));//匹配所有圖像域
console.log($(":reset"));//查找所有重置按鈕
console.log($(":button"));//查找所有按鈕
console.log($(":file"));//查找所有文件域
console.log($("input:enabled"));//查找所有可用的input元素
console.log($("input:disabled"));// 查找所有不可用的input元素
console.log($("input:checked"));//查找所有選中的複選框元素
console.log($("select option:selected"));//查找所有選中的選項元素
console.log($( "div" ).find( "." + $.escapeSelector( ".box" ) ));//選擇出類中包含.box的div
</script>
<!--過濾、篩選、串聯-->
<ul>
<li>1</li>
<li>2</li>
<li class="one">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li class="two">7</li>
<li>8</li>
<li>9</li>
<li class="one">10</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li class="two">3</li>
<li>4</li>
<li class="one">5</li>
<li>6</li>
<li>7</li>
<li class="one">8</li>
<li>9</li>
<li>10</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li class="two">7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div class="demo active">
123
</div>
<div class="a box">
<div>
<div class="b box">
<div class="item"></div>
</div>
</div>
</div>
<p><span>hello</span></p>
<script src="jquery-1.10.2.js"></script>
<script>
let obj=$(".one");
let ele=document.querySelector(".one");
$("ul>li")
.css("border","1px solid red")
//過濾 篩選出與指定表式匹配的元素集合
.filter(".one")
.filter(obj)
.filter(ele)
.filter(function (index,ele) {
if(index%3===0){
return true;
}
})
.css("background","blue");
// .eq(1);//獲取匹配的第二個元素
// .css("background","blue");
console.log($('li').first());//獲取匹配的第一個元素
console.log($('li').last());//獲取匹配的最後個元素
//let div=document.querySelector(".demo");
//console.log($(".demo").hasClass("active"));//判斷demo中是否含有active類名
console.log($(".demo").is(".active"));//根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true
//console.log($(".demo").is($("div")));
//console.log($(".demo").is(div));
// console.log($(".demo").is(function (index,ele) {
// if(ele.innerHTML==="123"){
// return true;
// }
// }));
// console.log($("ul>li").map(function (index,ele) {
// return ele.innerHTML;
// }));//將一組元素轉換成其他數組
console.log($('ul').has('.one'));
console.log($('ul>li').not('.one'));//從ul的li集合中刪除與.one的元素
console.log($('ul>li').slice(5,9));//選取一個匹配的子集
console.clear();
console.log($("ul").children(".one"));//查找ul中的.one
console.log($(".item").closest(".box"));//查找item的父元素到box
console.log($(".box").find(".item"));//搜索box中的item
console.log($(".one").next());//每一個元素的下一個同輩元素
$(".one").css("background","red").next().css("background","yellow")
$(".one").css("background","red").nextAll("").css("background","yellow")//給one添加css樣式
$(".one").css("background","red").nextUntil(".two").css("background","yellow")//給one後面直到two前的元素加上黃色背景色
console.log($(".item").offsetParent());//返回item用於定位的父節點
console.log($(".one").parent());//查找one的父元素
console.log($(".one").parents());//所有前輩元素的集合
console.log($(".one").parentsUntil("body"));//找到body就停止
console.log($(".one").siblings());//找到one的所有同輩元素
console.log($(".one").add(".two"));//對兩個選擇器選擇的結果進行合併的操作
console.log($(".one").next().addBack());//
console.log($(".one").contents());//查找匹配元素內部所有的子節點（包括文本節點）
console.log($("p").find("span").end());//回到最近的一個"破壞性"操作之前,選取所有的p元素，查找並選取span子元素，然後再回過來選取p元素
console.log($("ul>li").eq(2).css("background","red").end().eq(5).css("background","red"));
</script>
<!--方法-->
<div class="boss">
div
</div>
<div class="boss">
div
</div>
<div class="boss">
div
</div>
<script>
//innerHTML=======>html()
//console.log($(".demo").html());
//$(".demo").html("111")
$(".boss").html(function (index,oldVal) {
return oldVal+(index+1);
});
//style getComputedStyle=======>css()
console.log($(".boss").css("width"));//獲取的是第一個的屬性
$(".boss").css("background","red");
$(".boss").css("width",300);
$(".boss").css("width",function (index,oldVal) {
return (index+1)*100;
});
$(".boss").css({
color:"#fff",
fontSize:"16px",
textAlign:"center",
lineHeight:"100px"
});
//classList className ========>addClass() removeClass() toggleClass()
$(".boss").addClass(function (index,oldVal) {
// console.log(oldVal)
return "test"+(index+1);
});
$(".boss").removeClass(function (index,oldVal) {
// console.log(oldVal)
return "test"+(index+1);
})
</script>
</body>
</html>