jquery之选择器

1.基本选择器

id
class
元素
*
复合元素选取

console.log($(".mydiv"));
console.log($("*"));             //获取所有包括html, head, meta, title, style, script, script, body, div等所有
console.log($("#mydiv,p"));

jquery对象如何转化为js对象
console.log($("#mydiv")); // init [div#mydiv, context: document, selector: "#mydiv"] console.log($("#mydiv")[0]); // <div id="mydiv">lorem</div>
隐式迭代器
jquery对象返回的是一个集合，直接使用，jquery代码可以进行隐式迭代器（不用再循环遍历，因为已经默认遍历了内部dom）

2.层级选择器

ancestor descendant
parent > child
prev + next
prev ~ siblings

console.log($("ul li"));    //所有子代元素（含孙子元素）
console.log($("ul>li"));    //仅包含子元素
console.log($(".two+li"));  // +代表只有下一个同级元素
console.log($(".two~li"));  // ~代表之后的所有元素

3.基本筛选器

:first
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lang1.9+
:last
:lt(index)
:header
:animated
:focus
:root 1.9+
:target 1.9+

console.log($("ul>li:first"));
console.log($("ul>li:last"));
console.log($("ul>li:not(.two)"));
console.log($("ul>li:even"));  //索引的偶数获取
console.log($("ul>li:odd"));   //奇
console.log($("ul>li:eq(1)")); //按照当前索引来获取
console.log($("ul>li:gt(1)"));  //获取比匹配元素索引大的所有元素
console.log($("ul>li:lt(1)"));  //获取比匹配元素索引小的所有元素
console.log($(":header"));      //获取所有的h标签
console.log($(":root"));      //直接是html    init [html, prevObject: init(1), context: document, selector: ":root"]

4.内容选择器

:contains(text)
:empty
:has(selector)
:parent

console.log($("div:contains('是')"));//包含某个内容的元素
console.log($("div:empty"));           //元素是空（也不能有空格，回车）
console.log($("ul:has(.two)"));      //获取包含某个元素的父元素
console.log($("li:parent"));          //匹配含有子元素或者文本的元素

5.可见性

:hidden
:visible

console.log($(".myp:visible"));
console.log($(".myp:hidden"));

6.属性

[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value] 以什么开头
[attribute$=value] 以什么结尾
[attribute*=value] 包含什么
[attrSel1][attrSel2][attrSelN]

console.log($("div[id]"));
console.log($("div[id][class]"));//需要同时满足多个条件时使用。
console.log($("div[id='mydiv'][class='mydiv']"));
console.log($("div[id!='mydiv']"));
console.log($("div[id^='m']"));//获取的属性值以什么开头
console.log($("div[id$='v']"));//获取的属性值以什么结尾
console.log($("div[id*='d']"));//获取的属性值包含什么

7.子元素

:first-child
:first-of-type1.9+
:last-child
:last-of-type1.9+
:nth-child
:nth-last-child()1.9+
:nth-last-of-type()1.9+
:nth-of-type()1.9+
:only-child
:only-of-type1.9+
first-child 与 first-of-type
前者是为每个父级元素匹配第一个子元素（可含多个）
后者是取同类型元素的第一个（可含多个）

console.log($("ul>li:first-child"));   //为每个父级元素匹配第一个子元素（可含多个）
console.log($("span:first-of-type"));   //取同类型元素的第一个（可含多个）
console.log($("li:nth-child(3)"));   //从1开始的第几个元素
console.log($("li:nth-last-of-type(3)"));   //从后往前
console.log($("ul>li:only-child"));//匹配的元素必须是父元素的唯一子元素

8.表单

:input 查找所有的input元素
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file

console.log($("input:checked"));
console.log($("input:file"));

9.表单对象属性

:enabled
:disabled
:checked
:selected

console.log($("input:disabled"));
console.log($("input:enabled"));
console.log($("input:checked"));//获取单选、多选框中被选择的元素
console.log($("select option:selected"));//匹配select被选择的下拉的option

10.混淆选择器

低版本没有
$.escapeSelector(selector)3.0+
给class类名称有.的进行转义编码，使他能正常显示为.classname