Linux查看目录wenjia,jQuery获取元素的方法总结

一、说明

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

做个总结，巩固下知识。

二、获取本身

1、只需要一种jQuery选择器

选择器

实例

说明

#Id

$('#myId')

ID选择器： 可以获取到ID为“myId”的元素，区分大小写

2、多种jQuery选择器组合

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

1)前半部分选择器

选择器

实例

说明

.class

$('.myClass')

类选择器：可以获取到class为‘myClass’的所有元素

element

$('p')

获取所有的

元素

:header

$(':header')

获取所有的标题元素：

~

:animated

$(':animated')

获取所有的动画元素

:contains(text)

$('p:contains(Hello)')

获取所有包含文本为Hello的

元素，中间的文本区分大小写

: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的所有

元素

:lt(index)

$('p:lt(2)')

index从0开始，获取index小于(不包含)2的所有

元素

:even

$('tr:even')

所有偶数

元素

:odd

$('tr:odd')

所有奇数

元素

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

选择器

实例

说明

:first

$('p:first')

第一个

元素

:last

$('p:last')

最后一个

元素

:eq(index)

$("p:eq(1)")

第二个

元素，index从0开始

3、jQuery选择器+遍历函数

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

1)前半部分同上

2)后半部分：遍历函数

方法

描述

eq()

返回带有被选元素的指定索引号的元素

first()

返回被选元素的第一个元素

last()

返回被选元素的最后一个元素

三、获取同级元素

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

1)选择器

选择器

实例

说明

element + next

$('div + p')

每个div相邻的下一个

元素

element ~ siblings

$('div ~ p')

获取跟div同级的所有的

元素

2)遍历函数

方法

描述

next()

返回被选元素的后一个同级元素

nextAll()

返回被选元素之后的所有同级元素

prev()

返回被选元素的前一个同级元素

prevAll()

返回被选元素之前的所有同级元素

四、获取父级元素

获取选中元素的父级元素

1)选择器

选择器

实例

说明

:parent

$('p:parent')

获取所有p元素的父级元素

2)遍历函数

方法

描述

parent()

获取被选元素的父级元素

parents()

获取被选元素的所有祖先元素

五、获取子级元素

获取选中元素的子级元素

1)选择器

选择器

实例

说明

parent > child

$('div > p')

获取div直接子元素的所有

元素

parent descendant

$('div p')

获取div所有后代的

元素

2)遍历函数

方法

描述

children()

返回被选元素的所有直接子元素

contents()

返回被选元素的所有直接子元素(包含文本和注释节点)

find()

返回被选元素的后代元素

jQuery 的详细介绍：请点这里

jQuery 的下载地址：请点这里