jQuery 知识点 (二) —— jQuery 选择器

//-- js 解析 jQuery 选择器是自右向左解析的
var $div = $("#id");// ID 选择器
$div = $("div");//标签选择器
$(".cssClass").hide();//隐藏具有cssClass样式类的元素  .cssClass : 类选择器
$("*","#id").hide();//隐藏 #id 元素下所有元素    * : 结合上下文匹配所有元素
// $(selector1,selector2,selector3) : 使用 "," 分隔多个选择器构成一个选择器组合
$("#id,.cssClass,span").hide();//隐藏 #id 元素，具有cssClass样式类的元素和 span 标签元素
// $(ancestor descendant) : 使用 " " 分隔匹配 ancestor 元素下的所有后代 descendant 元素
$("#id div").hide();//隐藏 #id 元素下的所有 div 元素
// $(parent>child) : 获取给定父元素下得子元素
$("#id>span").hide();//隐藏 #id 元素的子元素中的 span 元素
// $(prev + next) : 获取所有紧跟 prev 元素的 next 元素
$("span + .red").hide();//隐藏所有紧跟 span 元素后且css样式类中有 red 类的元素
// $(prev ~ siblings) : 获取 prev 元素之后所有同辈 siblings 元素
$("#id ~ li").hide();//隐藏 #id 之后的同辈 li 元素
// $(selector:first) : 获取匹配元素中的第一个元素
// $(selector:last) : 获取匹配元素中的最后一个
// $(selector:not(jQselector)) : 获取匹配 selector 且不匹配 jQselector 的元素
// $(selector:even) : 获取所有索引值为偶数的 selector 元素，索引从 0 开始
// $(selector:odd) : 获取所有索引值为奇数的 selector 元素
// $(selector:eq(index)) : 获取指定索引 index 处的匹配 selector 元素
// $(selector:gt(index)) : 获取大于指定索引 index 的匹配 selector 元素
// $(selector:lt(index)) : 获取小于指定索引 index 的匹配 selector 元素
// $(":header") : 匹配 h1,h2,h3,h4,h5,h6 等标题元素
// $(":animated") : 匹配正在执行动画的元素
// $(":focus") : 匹配获得光标的元素
// $(":contains(text)") : 匹配包含给定文本 text 的的元素
// $(":empty") : 匹配不包含子元素或文本的空元素
// $(":has(selector)") : 匹配含有选择器 selector 的匹配的元素，通常用于过滤
// $(":parent") : 匹配含有子元素或者文本的元素，与 :empty 相对
// $(":hidden") : 匹配所有不可见元素或 hidden 元素
// $(":visible") : 匹配所有可见元素
// $("[attr]") : 匹配具有属性 attr 的元素
// $("[attr=value]") : 匹配具有属性 attr 且其值为 value 的元素
// $("[attr!=value]") : 匹配具有属性 attr 且其值不为 value 的元素
// $("[attr^=value]") : 匹配具有属性 attr 且其值以 value 开头的元素
// $("[attr$=value]") : 匹配具有属性 attr 且其值以 value 结尾的元素
// $("[attr*=value]") : 匹配具有属性 attr 且其值包含 value 的元素
// $("[s1][s2][s3]") : 获取同时匹配 s1,s2,s3 的元素，与:has(selector) 类似
// $("parent:nth-child(i)") : 匹配其父元素下的第N个子或奇偶元素
console.log($("ul:nth-child(3n+2)").hide());//隐藏 ul 下索引值满足index = 3n+2 的元素
// $("parent:first-child") : 获取每个父元素匹配的第一个子元素，与 :first 只匹配一个元素不同
// $("parent:last-child") : 获取每个父元素匹配的最后一个子元素，与 :last 只匹配一个元素不同
// $("parent:only-chid") : 获取满足该元素是父元素中的唯一子元素的元素

// ------------ 表单选择器 -------------
// $(":input") : 匹配所有 input,textarea,select,button 等元素
// $(":text") : 匹配所有 <input type="text"> 标签
// $(":password") : 匹配所有 <input type="password"> 标签
// $(":radio") : 匹配所有 <input type="radio"> 标签
// $(":checkbox") : 匹配所有 <input type="checkbox"> 标签
// $(":submit") : 匹配所有 <input type="submit"> 标签
// $(":image") : 匹配所欲 <input tyep="image"> 标签
// $(":reset") : 匹配所有 <input type="reset"> 标签
// $(":button") : 匹配所有 <input type="button"> 或 <button></button> 标签
// $(":file") : 匹配所有 <input type="file"> 标签
// $(":enabled") : 匹配所有可用元素
// $(":disabled") : 匹配所有不可用元素
// $(":checked") : 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
// $("option:selected") : 匹配所有选中的 option 元素