jQuery选择器

jQuery选择器返回的是jQuery对象，类似数组，每个元素都是一个引用了DOM节点的对象；不会返回undefined或null，而是返回空数组，不必在下一行进行判断是否为空。

1基本选择器
语法类似querySelector
实现过程是先获取一个数组，然后返回第一个元素
1.1 ID选择器

$(document).ready(function(){
	var id = $('#id');
});

1.2 element选择器
类似于querySelectorAll与getElementsByTagName

$(document).ready(function(){
	var element = $('element');
	$('element')[index];//可以当做数组来操作
	$(this).index();//也可以配合eq，通过隐式迭代来操作
});

1.3 class选择器

$(document).ready(function(){
	var class = $('.class');
});

写CSS时尽可能多用class，将Id留到js中
选择时先考虑标签名再考虑class和id

1.4 通配符选择器

$(document).ready(function(){
	var class = $('*');//匹配所有元素，包括html等标签，但不包括DOCTYPE
});

谨慎使用，能不用就不用

2.多项选择器

$('selector1,selector2,selectorN');

将每一个选择器匹配到的元素合并后一起返回；可以指定任意多个选择器（任意组合），并将匹配到的元素合并到一个结果内。

$(document).ready(function(){
	var firstThird = $('#first,.third');//逗号分隔
});

如果通过不同的方式重复选择同一个（组）元素，只会返回一次
如果选择器中有的指向全部元素，有的指向单个元素，则只返回全部元素（并集），返回的元素顺序与html里的原本顺序一致，不会破坏原有的DOM结构
注意必须以逗号分隔才能达到并集的效果

3.层级选择器
3.1 祖先后代选择器
写法类似于CSS

$('ancestor descendant');

在给定的祖先元素下匹配所有的后代元素

$(document).ready(function(){
	var summaries = $('aside summary');//匹配选择aside下的所有summary
});

顺序依然遵循DOM结构

3.2 直接后代选择器（子选择器）
在给定的父元素下匹配所有直接的子元素

$('parent > child');

3.3 $(‘prev + next’)选择器（下一个选择器）
匹配所有紧接在prev元素后的next元素（同级别）

$('prev + next');

$(document).ready(function(){
	var uls = $('summary + ul');//匹配选择所有summary后紧跟的ul
});

3.4 兄弟选择器（向后）
匹配prev元素之后的所有siblings元素（同级别）

$('prev~siblings');

$(document).ready(function(){
	var uls = $('summary ~ ul');//匹配选择summary后所有的ul元素
});

4.属性选择器
4.1 [attribute] 属性名选择器
匹配所有具有attribute（属性名）属性的元素

$('[class]');//匹配所有具有class属性的元素

4.2 属性值选择器
匹配所有具有attribute属性且值为value的元素

$('[attribute = value]');
$('[class = first]');//匹配class为first的元素

4.3 非属性值选择器
匹配所有具有attribute属性且值不为value的元素

$('[attribute != value]');
$('[class != first]');//匹配class不为first的元素

4.4 首匹配属性值选择器

$('[attribute ^= value]');
$('[class ^= first]');//匹配class属性以first开头的元素

4.5 尾匹配属性值选择器

$('[attribute $= value]');
$('[class $= first]');//匹配class属性以first结尾的元素

4.6 包含属性值选择器

$('[attribute *= value]');
$('[class *= first]');//匹配class属性中包含first的元素，头尾中都可以！

4.7 多属性选择器
多种选择器组合

$('[selector1][selector2]...[selectorN]');
$('[class *= first][id = xm][type ^= na][src != aaa][selected][name $= 123]');

只能匹配同时满足所有条件的元素

$(document).ready(function() {
	var p =$('p[class=aaa]');
	console.log(p);
});

可以多种选择器组合，但没有逗号分隔，只能匹配同时满足所有条件的元素（与集），如果加入逗号就是并集

5.过滤器
一般不会单独使用，只是在现有选择器的基础上进行筛选
5.1 child系列
:first-child

$('p:first-child');

先从P回溯到父元素，再找到父元素的第一个子元素，如果也是P才能匹配

:last-child

$('p:last-child');

先从P回溯到父元素，再找到父元素的最后一个子元素，如果也是P才能匹配

:nth-child(n | even | odd | formula)

$('p:nth-child(1)');

运行逻辑与上面一致，需要元素与位置都同时满足才能匹配，计数器从1开始，从第一个开始

:nth-last-child(n | even | odd | formula)

$('p:nth-last-child(1)');

运行逻辑与上面一致，需要元素与位置都同时满足才能匹配，计数器从1开始，从最后一个开始

:only-child

$('p:only-child');

运行逻辑与上面一致，需要元素与位置都同时满足才能匹配，也就是即是唯一子元素也同时为P元素的

$('[id=first]:nth-child(2)');

以上五种都可以跟在属性选择器后，先通过属性选择器确定元素的标签名，再进行回溯并选择第二个子元素，注意要同时满足位置与标签名。
child系列先看是否是某位置，再看是否是相应的元素

5.2 type系列
:first-of-type
匹配某类元素的第一个

$('details > p:first-of-type');//匹配details下的第一个P

:last-of-type
匹配某类元素的最后一个

$('details > p:last-of-type');//匹配details下的最后一个P

:nth-of-type(n | even | odd | formula)
匹配某类元素的第n个

$('details > p:nth-of-type(2)');//匹配details下的第二个P

:nth-last-of-type(n | even | odd | formula)
匹配某类元素的从后往前第n个

$('details > p:nth-last-of-type(2)');//匹配details下的倒数第二个P

:only-of-type
匹配某类元素且为其父元素唯一该类子元素的

$('details > p:only-of-type');

type系列先看是否是该元素，再看是否是该类中某位置；比chid更直观。

5.3 过滤器参数
n 匹配子元素序号，必须为整数，从1开始

$('p:nth-last-of-type(2)');//匹配所有的第二个P

even 匹配所有偶数元素

$('p:nth-last-of-type(even)');//匹配所有的偶数位P（2,4,6...）

odd 匹配所有奇数元素

$('p:nth-last-of-type(odd)');//匹配所有的奇数位P（1,3,5...）

formula 使用特殊公式如（an+b）进行选择

$('p:nth-last-of-type(2n)');//匹配所有的偶数位P

$('p:nth-last-of-type(2n+1)');//匹配所有的奇数位P

$('p:nth-last-of-type(n+1)');//匹配从1开始的P，等价于n

$('p:nth-last-of-type(3n)');//匹配（3,6,9...）的P

$('p:nth-last-of-type(3n+1)');//匹配（1,4,7...）的P，n可以取值0

6.表单相关选择器
6.1 表单元素
:input
可以选择input、textarea、select、button（option无法选择）

$(':input');

:text
匹配所有的单行文本框，和input[type=‘text’]一样

$(':text');

其它input的type
:password/:radio/:checkbox/:image/:reset/:button/:file（冒号后跟类型）

$(':text:first-of-type');

先匹配上所有的text，然后再匹配出其中作为该类第一个元素的，如果该类第一个元素不是text（password/radio等），则匹配不上

6.2 表单状态
:enabled、:disabled
:enabled匹配所有可用元素；:disabled匹配所有不可用元素

$(':enabled');
$(':disabled');

:checked
匹配所有选择的被选中元素（复选框、单选框、select中的option（selected）等）

$(':checked');

:selected
匹配所有选中的option元素（仅针对selected）

$(':selected');

单选框和复选框用checked，option用selected

$(':text:disabled');
$('input:disabled');

表单状态属性可以搭配表单元素选择器，也可以搭配元素选择器（选择的元素必须为表单元素）

7.查找与过滤方法
find(expr | object | element)–最常用
搜索所有与指定表达式匹配的子元素

$('aside').find('.javascript');//find里面还是写jQuery选择器表达式（后代里过滤）

返回被选元素的后代元素，一路向下直到最后一个后代。

$('aside').find('details');//查找aside里面所有的details，类似祖先后代选择器

children([expr])
取得一个包含匹配的元素（aside）集合中每一个元素的所有子元素（details）的元素集合（只返回直接子元素，不带参数就返回所有，带参数就进行过滤）

$('aside').children('details');//查找aside的details子元素，类似直接后代选择器

parent([expr])
取得一个包含着所有匹配元素的唯一父元素的元素集合（直接父元素）

$('aside').parent();//查找aside的父元素，一般不带参数

$('aside').parent('.ing');//如果带参数，则要求父元素满足参数要求才能匹配

$(':disabled,script').parent(); //如果选择多个元素，则要求他们的共同父元素（上一级）才能匹配

next([expr])、prev([expr])
取得一个包含匹配的元素集合中每个元素紧邻的后面（前面）同辈元素的元素集合

$('aside').next();
$('aside').prev();//如果带参数，则要求该元素满足参数要求才能匹配

nextAll([expr])、prevAll([expr])
nextAll() 方法返回被选元素的所有跟随的同胞元素。
prevAll() 方法返回被选元素前面所有的同胞元素。

$("h2").nextAll();
$("h2").prevAll();

nextUntil([expr])、prevUntil([expr])
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prevUntil() 方法返回介于两个给定参数之间的所有前面的同胞元素。

$("h2").nextUntil("h6");//h6在h2后面，不包括h6
$("h2").prevUntil("h6");//h6在h2前面，不包括h6

eq(index | -index)–常用
获取当前链式操作中第N个jQuery对象

$('aside').eq(8);//查找第八个aside
$('aside').eq(-8);//查找倒数第八个aside

index从0开始计数，先查找到所有aside，再根据index查找对应元素

siblings([expr])
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

$(':disabled').siblings();//查找已获取元素的兄弟元素，不分前后，如果带参数，则需要满足参数要求
$("h2").siblings("p");//查找h2的p兄弟元素

filter(expr | object | element | fn)
筛选出与指定表达式匹配的元素集合

$(':disabled').filter('.python');//在已获取的元素中匹配满足参数的元素，此处参数为jQuery选择器

filter中可以写元素选择器、表单元素选择器、表单状态选择器，但不能直接写过滤器和层级选择器（expr）

参数
expr:字符串值，包含供匹配当前元素集合的选择器表达式
object:现有的jQuery对象，以匹配当前的元素（先通过其它选择器找到某一个对象变量）
element:一个用于匹配元素的DOM元素（先通过原生Js获取元素变量）
fn：一个函数用来对匹配的元素进行操作（还是针对DOM的操作）

var obj = $('li').filter(function(index){//默认赋值参数
	console.log(index);//打印出所有li的index值
})

first() 方法
返回被选元素的首个元素。

$(document).ready(function(){
  $("div p").first();//返回div内部的第一个p元素
});

last() 方法
返回被选元素的最后一个元素。

$(document).ready(function(){
  $("div p").last();//返回div内部的最后一个p元素
});

not() 方法
返回不匹配标准的所有元素；与filter()相反。

$(document).ready(function(){
  $("p").not(".intro");//返回所有不带有类名“intro”的p元素
});

noConflict() 方法
如何在页面上同时使用 jQuery 和其他框架？

要解决这个问题，只需要使用jQuery中的noConflict()方法，它允许你在同一个页面加载多个jQuery实例，尤其是不同版本的jQuery。如果你在用的两种不同的框架正在使用相同的简写符号$，有可能导致脚本停止运行。

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

当然，你仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();//释放$
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery is still working!");//使用jQuery
  });
});

也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，可以把它存入变量，以供稍后使用：

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery is still working!");//用变量代替
  });
});

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery is still working!");//$作为参数传入，程序依然认可，但函数外已经释放
  });
});