首页 专题 H5案例 前端导航 UI框架

JQuery学习笔记整理:选择元素

作者:TG 日期: 2016-10-25 阅读: 1623

这篇文章主要讲解如何选择元素,包括

1、选择器

2、选择方法

2.1 添加更多元素(add())

2.2 限制选择范围(eq()、filter()、first()、last()、has()、not()、slice())

2.3 检测结果集(is())
2.4 修改、回退结果集(end()、addBack())
2.5 访问后代元素(children()、contents()、find())
2.6 访问祖先猿(closest()、offsetParent()、parent()、parents()、parentsUntil())
2.7 访问兄弟元素(next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()、siblings())
3、 jQuery对象
3.1 属性方法
3.2 jQuery对象转换成DOM对象
3.3 DOM对象转换成jQuery对象
4、 链式方法(方法链)

如果不想滚动,只想看自己所需要的,可在页面按ctrl+F键,输入名称即可搜索到。

1、选择器
JQuery不但支持大部分的CSS选择器,还额外的为我们提供了不少方便的选择器。
1.1 不支持的CSS选择器
JQuery支持大多数CSS选择器,所以在这里只列举一下不支持的CSS选择器,如果你不知道CSS有哪些选择器,可以看这里:CSS API整理复习

::after | :after

::before | :before

::selection

::placeholder

:fullscreen


1.2专属选择器

:animated  选择所有正在处理动画的元素

:contains(text)   选择包含指定文本的元素

:eq(n)    选择第n个元素(从0开始计数)

:even     选择所有的偶数元素(从0开始计数)

:odd 选择所有奇数元素

:first    选择第一个匹配的元素

:last 选择最后一个匹配的元素

:gt(n)    选择序号大于n的所有元素

:lt(n) 选择序号小于n的所有元素

:has(selector)    选择至少包含一个匹配指定选择器的元素的元素

:text     选择所有的输入框元素

上面的选择可以单独使用也可以与其他选择器使用:

$(':first')


$('html:first')

上面两行代码是等价的,都会返回包含基于DOM树的第一个元素,也就是html

还有一些类型选择器

:button    选择所有的按钮

:checkbox  选择所有的复选框

:file      选择所有的文件上传输入框

:header    选择所有的标题元素(h1、h2等)

:hidden    选择所有被隐藏的元素

:image     选择所有的图片元素

:input     选择所有的input元素

:parent    选择所有拥有至少一个子元素的元素

:password  选择所有的密码输入框

:radio     选择所有的单选框

:reset     选择所有的表单重置按钮

:selected  选择所有的状态已被选中的元素

:submit    选择所有的表单提交元素

:visible   选择所有的可见元素


2、选择方法
当我们执行修改元素的jQuery操作时,这些操作大多数返回来的都是一个jQuery对象代表0个或多个DOM元素),也是基于此,我们可以采用链式方法调用。
2.1 添加更多元素
add()方法返回一个jQuery对象,所以可以在add()方法后采用链式方法。

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> 

上面的JavaScript代码中,btn是 jQuery对象 ,span是 HTMLElement ,执行后,当前页面上具有类名为example的元素内所有的input元素、具有类名为example的元素内所有具有类名item的元素、所有的button按钮和具有类名为example的元素内所有span元素都会被添加上类名add。

注意:add()方法相当于(把所有匹配结果相加)的意思,而不是子孙辈匹配,也不是往DOM里插元素。

2.2 限制选择范围

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参数指定范围的元素子集、删除子集之外的其他元素

(1)eq(index)、first()、last()
这三个方法也是返回一个jQuery对象。

/*

* <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');

上面最后两行代码是等价的,返回匹配元素的结果集中的第一个元素,然后给它添加类名one

spans.last().addClass('last');

spans.eq(-1).addClass('last');

上面两行代码也是等价的,返回匹配元素的结果集中的最后一个元素,然后给它添加类名last。

注意:使用eq(index)时,当index为正值时,是从0开始计数的,也就是0是第一个匹配元素;而当index为负值时,则是从-1开始计数的,也就是-1是最后一个匹配元素。

(2)slice(start,end)
slice()也返回一个jQuery对象。
jQuery的 slice() 方法其实和数组的slice()方法是一个意思,支持两个参数,分别是选择的起始索引号和结束索引号,索引是从0开始,第二个参数是可选的,当省略第二个参数时,表示一直延续到结果集的结尾,相当于slice(start,length-1)

实例:

spans.slice(1,2).addClass('slice')


// 结果 

// <div class="example">  

//   <span>1</span>  

//   <span class="slice">2</span>  

//   <span>3</span>  

// </div> //

注意:当提供两个参数时,slice(start,end)返回的匹配结果中并不会包含最后一个元素,也就是不会包括eq(end);当第一个参数大于结果集长度时,返回长度为0的jQuery对象;当第二个参数大于结果集的长度时,相当于只提供第一个参数。

spans.slice(-2).addClass('slice');


// 结果   

// <div class="example">    

//   <span>1</span>    

//   <span class="slice">2</span>    

//   <span class="slice">3</span>    

// </div> 

//

注意:slice(-index)支持一个负数,-1表示最后一个元素,表示从结果集的结尾开始切割,并且返回从最后一个元素到倒数第index个的元素。

(3)filter()
filter()用来过滤元素,参数可以是选择器、jQuery对象、HTMLElement或回调函数。

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>

*/

在上面的代码中,分别给filter()方法传入一个selector选择器、一个jQuery对象、一个HTMLElement来过滤元素。

filter()方法还可以传入一个回调函数,会把元素的索引号作为参数传递给这个函数,同时,函数内的上下文( this )指向需要处理的对应当前元素的HTMLElement对象:

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>

//

返回true的表示匹配。

(4)not()
not()也返回一个jQuery对象,它的作用和filter正好相反,删除所匹配的元素,用法可参考上面的filter方法,当传入的是函数时,同样会将元素的索引作为参数传递给函数,上下文this指向当前对应元素的HTMLElement。

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>  

//


(5)has()
has方法是基于 后代元素 过滤结果集,也是返回一个jQuery对象,可传入选择器、一个或多个HTMLElement对象、一个jQuery对象。

实例:

/*<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>  

//


2.3 检测结果集
is()方法返回布尔值

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


2.4 修改、回退结果集
当我们调用方法链修改结果集时,jQuery维护着一个历史结果集栈。

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')........


上面的都是个人笔记,如有错误,欢迎指正!


关注”全栈技术杂货铺“

全栈技术杂货铺