css選擇器
$("#box") //id選擇器
$div2 =$(".box"); //class選擇器
$div3 = $("div"); //element選擇器
$div4 = $("#box,.box"); //群組選擇器
$div5 = $("*"); //通配選擇器
層級選擇器
$li1 = $("#list li"); //后代選擇器--祖孫
$li2 = $("#list>li"); //子元素選擇器--父子關系
$li3 = $("#first+"); //緊鄰同輩選擇器,忽略空白文本節(jié)點
$li4 = $("#first~"); //相鄰的后面的同輩選擇器
表單選擇器
// 01 :input 獲取表單中所有的input select textarea元素
console.log( $("#f1 :input") );
// 02 :text 獲取單行輸入框
// 獲取id為f1的元素的后代中的單行輸入框
console.log( $("#f1 :text") );
// 03 :password
// 04 :radio
// 05 :checkbox
// 06 :file
// 07 :image
// 08 :reset
// 09 :submit
// 10 :button
// 11 :hidden
基本過濾器
// 注意：過濾選擇器要和其他選擇器搭配使用
// 根據(jù)下標來過濾
// 01 :first
// 在匹配到的所有l(wèi)i的集合中選取第一個元素
console.log( $("li:first") );
// 02 :last
console.log( $("li:last") );
// 03 :eq(index) 下標從0開始 ==
console.log( $("li:eq(1)") );
// 04 :gt(index) 下標大于index gt--->great that
console.log( $("li:gt(2)") );
// 05 :lt(index) 下標小于index lt--->litte that
console.log( $("li:lt(3)") );
// 06 :odd 奇數(shù)
console.log( $("li:odd") );
// 07 :even 偶數(shù)
console.log( $("li:even") );
// 08 :not(指定選擇器) 去除與指定選擇器匹配的元素
// 去除id為li2的li元素
console.log( $("li:not(#li2)") );
// 09 :header
// 獲取到標題元素的集合
$(":header").css("background-color","red");
// 10 :animated 匹配正在執(zhí)行動畫的元素
內(nèi)容過濾器
// 01:查找所有的包含指定文本值的元素
// :contains(指定的文本值)
console.log( $(":contains(你好)") );
// 面試題：查找出頁面中所有包含“招聘”二字的div图焰，把招聘高亮顯示
// div:contains(招聘)
// 替換 replace(舊,新)
var $zpDiv = $("div:contains(招聘)");
console.log($zpDiv);
for(var i in $zpDiv){
// 只能遍歷數(shù)組 對象
}
for (var i = 0; i < $zpDiv.length; i++) {
var div = $zpDiv[i];//DOM對象
var cont = div.innerHTML;
div.innerHTML = cont.replace(/招聘/g,"<span style='background:red'>招聘</span>");
}
// 02:has(selector)
// 查找所有包含指定選擇器的子元素的元素
console.log( $("div:has(p)") );
// 篩選出含有class為test的子元素的div
console.log( $("div:has(.test)") );
// 03 :empty 篩選出空元素
console.log( $("div:empty") );
// 04 :parent 篩選出非空元素
console.log( $("div:parent") );
屬性過濾器
// 01 [attr] 篩選出含有指定屬性的元素
// 篩選出含有placeholder屬性的元素
console.log( $("input[placeholder]") );
// 02 [attr=value] 篩選出含有指定屬性值的元素
console.log( $("input[type=checkbox]") );
// 03 [attr!=value] 篩選出屬性值不等于指定值的元素
console.log( $("input[type!=radio]") );
// 04 ^ [attr^=value] 篩選出屬性值以指定值開頭的元素
// $("[class^=banner]").css("background-color","red");
// $("[class^=banner]").css("height","50px");
$("[class^=banner]").css({"background-color":"red","height":"100px","width":"100px"});
// 05 $ [attr$=value] 篩選出屬性值以指定值結尾的元素
$("[class$=div]").css({"width":"50px","height":"50px","background-color":"green"});
// 06 * [attr*=value]篩選出屬性值包含指定值的元素
$("[placeholder*=密碼]").css("background-color","red");
// 07 [attr1][attr2]...[attrN]
// 篩選出包含多個指定屬性的元素
console.log( $("input[type][placeholder]") );
// 含有一個屬性 多個屬性 []
// 屬性值等于= 不等于!= 以XX開頭^= 以XX結尾$= 包含XX *=
子元素過濾器
// 01 :first-child
// 匹配那個ul是其父節(jié)點的第一個子節(jié)點
console.log( $("ul:first-child") );
console.log( $("ul:first") );//拿到集合中的第一個
console.log( $("ul>li:first-child") );
console.log( $("ul>li:first"));
console.log( $("#list1 li:first-child"))
// 02 :last-child
console.log( $("ul:last-child"));
// 03 :nth-child(num|even|odd|3n) 下標是從1開始的
console.log( $("ul:nth-child(2)"));
$("tbody tr:first-child").css("background-color","red");
// 04 :nth-last-child()
可見性過濾選擇器
// 01 :hidden
console.log( $("div:hidden") ); //2
// 02 :visible
console.log( $("div:visible") );//3
//隱藏的出現(xiàn) 出現(xiàn)的隱藏
document.getElementById("btn").addEventListener("click",function(){
$("div:hidden").css("display","block");
$("div:visible").css("display","none");
},false)
表單屬性過濾選擇器
// 01 :enabled 可用的
console.log( $(":text:enabled") );
// 02 :disabled 不可用的
console.log( $(":text:disabled") );
// 03 :checked 選中的（單選框 多選框）
console.log( $(":input:checked") );
// 04 :selected 選中的（下拉列表）
console.log( $("option:selected") );
document.getElementById("btn").onclick = function(){
console.log( $(":checkbox:checked:not(:eq(3))").length );
}
重要！Ｋ凇葛家！
DOM對象：根據(jù)原生的方法獲取到的是DOM對象；DOM樹上的節(jié)點就是DOM對象
jQuery對象：根據(jù)jQuery的選擇器獲取到的是jQuery對象泌类；
jQuery對象是對DOM對象的包裝癞谒。
DOM對象---->jQuery對象
$(DOM對象)
jQuery對象-->DOM對象
jQuery對象index
jQuery對象.get(index)
注意：jQuery對象只能使用jQuery中封裝的方法，不能使用DOM的對象的方法刃榨；同理弹砚，DOM對象只能使用DOM的方法不能使用jQuery中封裝的方法
