免费AI编程助手
JQuery学习笔记整理：选择元素
这篇文章主要讲解如何选择元素，包括
1、选择器
2、选择方法
2.1 添加更多元素（add()）
2.2 限制选择范围（eq()、filter()、first()、last()、has()、not()、slice()）
::after | :after
::before | :before
::selection
::placeholder
:fullscreen
:animated 选择所有正在处理动画的元素
:contains(text) 选择包含指定文本的元素
:eq(n) 选择第n个元素（从0开始计数）
:even 选择所有的偶数元素（从0开始计数）
:odd 选择所有奇数元素
:first 选择第一个匹配的元素
:last 选择最后一个匹配的元素
:gt(n) 选择序号大于n的所有元素
:lt(n) 选择序号小于n的所有元素
:has(selector) 选择至少包含一个匹配指定选择器的元素的元素
:text 选择所有的输入框元素
$(':first')
$('html:first')
:button 选择所有的按钮
:checkbox 选择所有的复选框
:file 选择所有的文件上传输入框
:header 选择所有的标题元素（h1、h2等）
:hidden 选择所有被隐藏的元素
:image 选择所有的图片元素
:input 选择所有的input元素
:parent 选择所有拥有至少一个子元素的元素
:password 选择所有的密码输入框
:radio 选择所有的单选框
:reset 选择所有的表单重置按钮
:selected 选择所有的状态已被选中的元素
:submit 选择所有的表单提交元素
:visible 选择所有的可见元素
add(selector)、add(selector,context) 把匹配选择器（可选上下文）的所有元素添加到调用add()方法的jQuery对象
add(HTMLElement)、add(HTMLElement[]) 把一个或多个HTMLElement添加到jQuery对象
add(jQuery) 把参数jQuery对象中的元素添加到当前jQuery对象。
/*
*<div class="example">
* <input type="text" />
* <span></span>
* <button>Button</button>
* <div class="item"></div>
*</div>
*/
var btn = $(':button');
var span = document.querySelectorAll('.example span');
$('.example input').add('.example .item').add(btn).add(span).addClass('add');
//执行结果
//<div class="example">
// <input type="text" class="add" />
// <span class="add"></span>
// <button class="add">Button</button>
// <div class="item add"></div>
//</div>
eq(index) 得到第index个元素（删除其他元素）
filter(condition) 得到符合condition参数的元素（删除不符合条件的元素）
first() 得到第一个元素（删除其他元素）
last() 得到最后一个元素（删除其他元素）
has(selector)、has(jQuery)、has(HTMLElement)、has(HTMLElement[]) 得到匹配selector后代元素的元素，或返回包含jQuery对象内的元素或HTMLElement所对应的元素的元素（删除没有匹配后代的元素）
not(condition) 删除匹配condition参数的元素
slice(start,end) 得到start、end参数指定范围的元素子集、删除子集之外的其他元素
/*
* <div class="example">
* <span>1</span>
* <span>2</span>
* <span>3</span>
* </div>
*/
var spans = $('.example span');
spans.first().addClass('one');
spans.eq(0).addClass('one');
spans.last().addClass('last');
spans.eq(-1).addClass('last');
spans.slice(1,2).addClass('slice')
// 结果
// <div class="example">
// <span>1</span>
// <span class="slice">2</span>
// <span>3</span>
// </div>
//
spans.slice(-2).addClass('slice');
// 结果
// <div class="example">
// <span>1</span>
// <span class="slice">2</span>
// <span class="slice">3</span>
// </div>
//
var first = $('.example span:first');
var last = document.querySelector('.example span:last-child');
spans.filter('.example span:nth-child(2)').addClass('second');
spans.filter(first).addClass('first');
spans.filter(last).addClass('last');
/*结果
*<div class="example">
* <span class="first">1</span>
* <span class="second">2</span>
* <span class="last">3</span>
*</div>
*/
spans.filter(function(index){
return index == 2 || this.textContent == '1';
}).addClass('filter');
// 结果
//<div class="example">
// <span class="filter">1</span>
// <span>2</span>
// <span class="filter">3</span>
//</div>
//
spans.not(function(index){
return index == 2 || this.textContent == '1';
}).addClass('not');
// 结果
//<div class="example">
// <span>1</span>
// <span class="not">2</span>
// <span>3</span>
//</div>
//
/*<div class="example">
* <span><b>1</b></span>
* <span><i>2</i></span>
* <span><span class="col"></span></span>
*</div>
*/
spans.has('.col').addClass('a');
var b = $('b');
spans.has(b).addClass('b');
var i = document.querySelector('i');
spans.has(i).addClass('i');
// 结果
//<div class="example">
// <span class="b"><b>1</b></span>
// <span class="i"><i>2</i></span>
// <span class="a"><span class="col"></span></span>
//</div>
//
is(selector) 如果结果集中至少有一个元素匹配选择器selector，返回true
is(HTMLElement)、is(HTMLElement[]) 如果结果集中包含指定的HTMLElement或者至少包含指定HTMLElement[]中的一个元素，返回true
is(jQuery) 如果结果集中至少包含一个参数对象中的元素，返回true
is(function(index)) 如果至少有一次参数函数返回true，则返回true
/*
* <div class="example">
* <span>1</span>
* <span>2</span>
* <span>3</span>
* </div>
*/
spans.is(function(index){
return this.textContent == '2';
});
// true
spans.is(function(index){
return this.textContent == '5';
});
// false
end() 扔掉当前结果集，返回jQuery对象中缓存着的上一个结果集
addBack()、addBack(selector) 得到原结果集与当前选择结果的集合，支持可选选择器参数，利用这个可过滤原结果集
（1）end()
end()方法返回一个jQuery对象。
spans.first().addClass('first').end().addClass('span');
// 结果
// <div class="example">
// <span class="first span">1</span>
// <span class="span">2</span>
// <span class="span">3</span>
// </div>
//
上面的代码中，我们首先用first()方法获取到匹配的第一个元素，给它添加类名first，然后调用end()方法，这时会返回到上一次结果集（也就是spans），给所有匹配的spans元素添加类名span。
（2）addBack()
addBack()返回一个jQuery对象
$('.example').children('span:first').addBack().addClass('addBack');
// 结果
// <div class="example addBack">
// <span class="addBack">1</span>
// <span>2</span>
// <span>3</span>
// </div>
//
注意：当传入一个selector参数时，它过滤的是原结果集，而不是当前选择结果。
2.5 访问DOM
以一个结果集为起点，我们可以在DOM中访问其他部分，使用一个结果集得到另一个结果集。
下面的方法都返回jQuery对象，即使没有匹配，也会返回一个空的jQuery对象（length等于0）
（1）访问后代元素
children() 得到结果集内所有元素的直接子元素
children(selector) 得到结果集内所有元素的匹配selector选择器的直接子元素
contents() 得到结果集内所有元素的直接子元素和文本内容
find() 得到结果集内所有元素的后代元素
find(selector) 得到结果集内所有元素的匹配selector选择器的后代元素
find(jQuery)、find(HTMLElement)、find(HTMLElement[]) 得到结果集内所有元素的子元素与参数对象对应元素的交集
children()和find()方法返回的结果集中没有重复元素。
实例：children()
childrend()方法得到结果集内所有元素的 直接子元素 。
/*
*<div class="example">
* <div><span></span></div>
* <span></span>
*</div>
*/
var ex = $('.example');
ex.children().addClass('child');
ex.children('span').addClass('span');
// 结果
//<div class="example">
// <div class="child"><span></span></div>
// <span class="child span"></span>
//</div>
//
在上面的代码中，第二行会选中结果集ex中的所有直接子元素添加类名child，第三行会选中结果集ex中的所有类型为span的直接子元素添加类名span。
实例：contents()
console.log(ex.contents())
// 打印结果
//0:text
//1:div
//2:text
//3:span
//4:text
//
注意：换行符会导致出现text文本节点
实例：find()
find()方法得到结果集内所有元素的 后代元素 。
var span = $('.example div>span');
var span2 = document.querySelectorAll('.example>span');
ex.find('div').addClass('div');
ex.find(span).addClass('span');
ex.find(span2).addClass('span2');
// 结果
//<div class="example">
// <div class="div">
// <span class="span"></span>
// </div>
// <span class="span2"></span>
//</div>
//
在上面的代码中，分别传入一个selector选择器、一个HTMLElement、一个jQuery对象，仔细看结果。
（2）访问祖先元素
closest(selector)、closest(selector,context) 得到结果集内元素的祖先元素中匹配selector选择器的最接近的那个祖先元素
closest(jQuery)、closest(HTMLElement) 得到结果集内的祖先元素与参数元素的交集
offsetParent() 得到距离最近的祖先定位元素（使用fixed、absolute或rela定位的元素）
parent()、parent(selector) 得到结果集内元素的父元素（可选匹配selector选择器的元素），最多返回一个父元素
parents()、parents(selector) 得到结果集内元素的父元素（可选匹配selector选择器的元素），可能返回多个父元素
parentsUntil(selector)、parentsUntil(selector,context) 得到结果集内元素的匹配selector选择器的祖先元素，可选的第二个选择器参数用来过滤选择结果
parentsUntil(HTMLElement)、parentsUntil(HTMLElement,selector)、parentsUntil(HTMLElement[])、parentsUntil(HTMLElement[],selector) 得到结果集内元素的祖先元素与参数元素的交集，可选的第二个参数选择器用来过滤选择结果
实例：parent()、parents()
/*<div class="example" style="position:relative">
* <div>
* <span class='child'></span>
* </div>
* <span></span>
*</div>
*/
var child = $('.child');
child.parent().addClass('parent');
child.parent('div').addClass('parentSpan');
child.parents().addClass('parents');
child.parents('div').addClass('parentsDiv');
// 结果
//<div class="example parents parentsDiv">
// <div class="parent parentSpan parents parentsDiv">
// <span class="child"></span>
// </div>
// <span></span>
//</div>
//
parent()和parents()都是用来选择父元素，两者的区别是：前者只会返回一个父元素，而后者会返回多个父元素，依据DOM树，会一直向上匹配，直到当前文档的根元素（html）；当传入参数时，前者可能返回包含0个或1个父元素的jQuery对象，而后者可能返回包含0个或多个父元素的jQuery对象。
实例：offsetParent()
child.offsetParent().addClass('offsetParent')
// 结果
//<div class="example offsetParent" style="position:relative">
// <div>
// <span class="child"></span>
// </div>
// <span></span>
//</div>
//
从上面的代码可以看到，具有类名为child的元素调用offsetParent()方法返回的是div.example元素，因为默认情况下，元素的定位方式是position:static，而我们给div.example设置了relative。
实例：closest()
closest()方法和parents()方法很类似，不同之处在于它只会返回一个节点，也就是第一个匹配的祖先元素。（在开发中相对用的多）
child.closest('div').addClass('closest');
// 结果
//<div class="example">
// <div class="closest">
// <span class="child"></span>
// </div>
// <span></span>
//</div>
//
closest()还可以传入jQuery对象、HTMLElement对象，得到结果集内元素的祖先元素与参数元素的交集；如无匹配，返回一个空的jQuery对象。
实例：parentsUntil()
parentsUntil()用来选择祖先猿。对于jQuery对象中的每一个元素，parentsUntil()方法会沿着DOM树向上查找，选中沿途的祖先元素，直到当前祖先元素匹配参数选择器为止。
child.parentsUntil('.example').addClass('parentsUntil');
// 结果
//<div class="example">
// <div class="parentsUntil">
// <span class="child"></span>
// </div>
// <span></span>
//</div>
//
上面的代码中，具有类名为child的元素会一直向上匹配祖先元素，直到匹配到一个具有类名为example的元素才会停止，而且并不会包含具有类名为example的元素。
注意：parentsUntil()方法并不会包含匹配selector参数的元素。
parentsUntil()还可传入第二个参数作进一步过滤，过滤原理和filter一样。
（3）访问兄弟元素
next()、next(selector) 得到下一个兄弟元素，可选的selector参数用来过滤选择结果
nextAll()、nextAll(selector) 得到后面的所有兄弟元素，可选的selector参数用来过滤选择结果
nextUntil(selector)、nextUntil(selector,selector)、nextUntil(jQuery)、nextUntil(jQuery,selector)、nextUntil(HTMLElement[])、nextUntil(HTMLElement[],selector) 得到后面的兄弟元素，直到（不包含）匹配（选择器、jQuery对象、HTMLElement对象或HTMLElement对象数组）。可选的第二个selector参数用来过滤选择结果。
prev()、prev(selector) 得到上一个兄弟元素，可选的selector参数用来过滤选择结果
prevAll()、prevAll(selector) 得到前面的所有兄弟元素，可选的selector参数用来过滤选择结果
prevUntil(selector)、prevUntil(selector,selector)、prevUntil(jQuery)、prevUntil(jQuery,selector)、prevUntil(prevHTMLElement[])、prevUntil(HTMLElement[],selector) 得到前面所有兄弟元素，直到（不包含）匹配参数（选择器、jQuery对象、HTMLElement对象或HTMLElement对象数组）。可选的第二个selector参数用来过滤选择结果
siblings()、siblings(selector) 选择所有的兄弟元素，可选的selector参数用来过滤选择结果
实例：next()、nextAll()、prev()、prevAll()、siblings()
/ <div class="example">
<span>1</span>
<span>2</span>
<span class="child">3</span>
<span>4</span>
<span>5</span>
/ </div>
var child = $('.child');
child.next().addClass('next');
child.nextAll().addClass('nextAll');
child.prev().addClass('prev');
child.prevAll().addClass('prevAll');
child.siblings().addClass('siblings');
// 结果
//<div class="example">
// <span class="prevAll siblings">1</span>
// <span class="prev prevAll siblings">2</span>
// <span class="child">3</span>
// <span class="next nextAll siblings">4</span>
// <span class="nextAll siblings">5</span>
//</div>
next()返回下一个兄弟节点、nextAll()返回后面所有的兄弟节点、prev()返回上一个兄弟节点、prevAll()返回前面的所有兄弟节点、siblings()返回所有的兄弟节点（并不包含自身）。
上面五个方法都可以传入一个selector参数作过滤。
实例：nextUntil()、prevUntil()
nextUntil()、prevUntil()两个方法其实和parentsUntil()原理一样，只不过parentsUntil()是匹配祖先元素，而nextUntil()、prevUntil()两个方法分别是根据前面的所有兄弟元素和后面的所有兄弟元素。
3、jQuery对象
jQuery对象是包装DOM对象后产生的对象，可以说它是一个数组对象，代表0个或多个DOM元素，具有jQuery对象的属性和方法。
使用jQuery执行的很多操作返回的都是一个jQuery对象。
3.1属性方法
length 返回jQuery对象中包含元素的个数，等价于size()
size() 返回jQuery对象中包含元素的个数，等价于length
each(function()) 在每个选中元素上运行给定的function，并返回function修改之后的jQuery对象
get(index) 返回给定索引（index）对应的HTMLElement对象
index(selecotr)、index(HTMLElement)、index(jQuery) 返回给定参数中匹配元素的索引序号（为HTMLElement和jQuery对象时，取第一个元素）
toArray() 返回一个由jQuery对象中包含的元素构成的HTMLElement对象数组。
3.2 jQuery对象转换成DOM对象
jQuery对象是一个数组对象，使用 [index] 或 .get(index) 方法得到的都是一个DOM对象。
3.3 DOM对象转换成jQuery对象。
要将DOM对象转换成jQuery对象，其实只要将DOM对象传入 $(DOM) 即可
4、链式方法
前面多次提到，大多数jQuery的操作都是返回一个jQuery对象，也正是基于此，我们可以采用方法链：
$('body').find('div').filter('.item')........
上面的都是个人笔记，如有错误，欢迎指正！
更多建议：