【JS】jQuery学习笔记（1）——选择器

jQuery优点：

消除浏览器差异
简洁的操作DOM的方法
轻松实现动画、修改CSS等各种操作

注意：目前jQuery有1.x和2.x两个主要版本，区别在于2.x移除了对古老的IE 6、7、8的支持。

选择器

jQuery的选择器类似$('#dom-id')，大大简化了DOM操作中的document.getElementById('dom-id')类似操作。

jQuery对象

jQuery对象类似数组，它的每个元素都是一个引用了DOM节点的对象。类似[<div id="abc">...</div>]，如果为空则为[]。
所以jQuery选择器返回的jQuery对象不会为undefined或者null，不必判断对象是否为undefined。

按ID查找

查找某个DOM的id属性，如：$('#aaa')。

注意：查找标识以#开头，返回的对象是jQuery对象。

jQuery对象和DOM对象之间的互相转化：

var div = $('#abc'); // jQuery对象
var divDom = div.get(0); // 假设存在div，获取第1个DOM元素
var another = $(divDom); // 重新把DOM包装为jQuery对象

按tag查找

按tag也就是html DOM元素标识名查找，不需要添加额外标识，如：$('p')。

按class查找

按class查找需要在class名称前面加上.，如：$('.red')。

扫描二维码关注公众号，回复： 3513729 查看本文章

多个class的直接填写相应的class名称，如：$('.red.green')。

按属性查找

var email = $('[name=email]'); // 找出<??? name="email">
var passwordInput = $('[type=password]'); // 找出<??? type="password">
var a = $('[items="A B"]'); // 找出<??? items="A B">

当属性的值包含空格等特殊字符时，需要用双引号括起来。

前缀查找，如：$('[name^=icon]')，或者后缀查找，如：$('[name$=with]')。

组合查找

组合查找就是把上述简单选择器组合起来使用。

多项选择器

多项选择器就是把多个选择器用,组合起来一块选，如：$('p.red,p.green')。

层级选择器（Descendant Selector）

具有层级关系的DOM元素，使用$('ancestor descendant')来选择，层级之前使用空格隔开。

子选择器（Child Selector）

子选择器$('parent>child')类似层级选择器，但是限定了层级关系必须是父子关系，相互关系必须是直属。

过滤器（Filter）

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

表单相关

针对表单元素，jQuery还有特殊的选择器。如：:input、:checkbox、:radio、:checked等。

查找

使用find()方法查找，具体查找条件与选择器编写方式相同。
使用parent()方法向上查找节点。
使用next()和prev()方法，查找同级节点。

过滤

使用filter()方法可以过滤掉不符合选择器条件的节点，或者传入一个函数，注意函数内部的this被绑定为DOM对象。