css选择器
$("#box") //id选择器
$div2 =$(".box"); //class选择器
$div3 = $("div"); //element选择器
$div4 = $("#box,.box"); //群组选择器
$div5 = $("*"); //通配选择器
层级选择器
$li1 = $("#list li"); //后代选择器--祖孙
$li2 = $("#list>li"); //子元素选择器--父子关系
$li3 = $("#first+"); //紧邻同辈选择器,忽略空白文本节点
$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
基本过滤器
// 注意：过滤选择器要和其他选择器搭配使用
// 根据下标来过滤
// 01 :first
// 在匹配到的所有li的集合中选取第一个元素
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 奇数
console.log( $("li:odd") );
// 07 :even 偶数
console.log( $("li:even") );
// 08 :not(指定选择器) 去除与指定选择器匹配的元素
// 去除id为li2的li元素
console.log( $("li:not(#li2)") );
// 09 :header
// 获取到标题元素的集合
$(":header").css("background-color","red");
// 10 :animated 匹配正在执行动画的元素
内容过滤器
// 01:查找所有的包含指定文本值的元素
// :contains(指定的文本值)
console.log( $(":contains(你好)") );
// 面试题：查找出页面中所有包含“招聘”二字的div，把招聘高亮显示
// div:contains(招聘)
// 替换 replace(旧,新)
var $zpDiv = $("div:contains(招聘)");
console.log($zpDiv);
for(var i in $zpDiv){
// 只能遍历数组 对象
}
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是其父节点的第一个子节点
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
//隐藏的出现 出现的隐藏
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对象：根据原生的方法获取到的是DOM对象；DOM树上的节点就是DOM对象
jQuery对象：根据jQuery的选择器获取到的是jQuery对象；
jQuery对象是对DOM对象的包装。
DOM对象---->jQuery对象
$(DOM对象)
jQuery对象-->DOM对象
jQuery对象index
jQuery对象.get(index)
注意：jQuery对象只能使用jQuery中封装的方法，不能使用DOM的对象的方法；同理，DOM对象只能使用DOM的方法不能使用jQuery中封装的方法
网友评论