jQuery获取元素的方法总结

    获取元素的方法分为两种:jQuery选择器、jQuery遍历函数。

做个总结,巩固下知识。

二、获取本身

1、只需要一种jQuery选择器

  选择器   实例   说明  
#Id   $('#myId')   ID选择器: 可以获取到ID为“myId”的元素,区分大小写  

2、多种jQuery选择器组合

分为两部分:前半部分获取到的是一个元素集合,后半部分可以精确为一个元素,两者相结合,可以获取到想要的元素。

1)前半部分选择器

  选择器   实例   说明  
.class   $('.myClass')   类选择器:可以获取到class为‘myClass’的所有元素  
element   $('p')   获取所有的<p>元素  
:header   $(':header')   获取所有的标题元素:<h1> ~ <h6>  
:animated   $(':animated')   获取所有的动画元素  
:contains(text)   $('p:contains(Hello)')   获取所有包含文本为Hello的<p>元素,中间的文本区分大小写  
:hidden   $(':hidden')   获取所有的隐藏元素:width和height为0、display:none、type=hidden、  
[attribute]   $('[href]')   属性选择器:获取所有含有属性为href的元素  
[attribute=value]   $('[href=a.html]')  

=   获取所有带有属性href,并且值为a.html的元素

!=  获取所有带有属性href,并且值不等于为a.html的元素

$=  获取所有带有属性href,并且值以a.html结尾的元素

^=  获取所有带有属性href,并且值以a.html开头的元素

~=  获取所有带有属性href,并且值包含单词”a.html“的元素

*=  获取所有带有属性href,并且值包含文本”a.html“的元素

 
:input   $(':input')   获取所有input元素  
:radio   $(':radio')  

所有带有 type="radio" 的 input 元素

相似的有:

:text、:chexbox、:password、:submit、:reset、:button、:file

 
:enabled   $(':enabled')   所有启用的input元素。 :disabled  则相反  
:checked   $(':checked')   所有选中的input选择(单选框、复选框)  
:gt(index)   $('p:gt(2)')   index从0开始,获取index大于(不包含)2的所有<p>元素  
:lt(index)   $('p:lt(2)')   index从0开始,获取index小于(不包含)2的所有<p>元素  
:even   $('tr:even')   所有偶数<tr>元素  
:odd   $('tr:odd')   所有奇数<tr>元素  

2)后半部分选择器:可以精确到某一个元素

选择器   实例   说明  
:first   $('p:first')   第一个<p>元素  
:last   $('p:last')   最后一个<p>元素  
:eq(index)   $("p:eq(1)")   第二个<p>元素,index从0开始  

3、jQuery选择器+遍历函数

也是分为两部分:前半部分用选择器获取到一个元素集合,后半部分用遍历函数精确为某个元素

1)前半部分同上

2)后半部分:遍历函数

 方法    描述  
 eq()    返回带有被选元素的指定索引号的元素  
 first()    返回被选元素的第一个元素  
 last()    返回被选元素的最后一个元素  

三、获取同级元素

顾名思义:获取选中元素同级元素。首先需要定位到该元素(上面已有总结,不再重复),然后获取它的同级元素。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/a4ceaa392cd5fb6a13af929bcbba8d7e.html