jQuery获取dom元素

本文介绍: 可以根据确定的jQue ry 对象，利用遍历函数查询目标 dom 元素。方法直接定位目标 dom 元素组。目标元素是被选元素的祖先。目标元素是被选元素的后代。目标元素是被选元素的同辈。

jQue r y 获取 dom元素

jQuery选择器
jQuery遍历函数

jQuery 选择器

通过 $(“selector”) 方法直接定位目标d o m元素组

1. 基本 选择器

1.1 标签 选择器

1.2 id 选择器

1.3 类选择器

1.4 属性 选择器

属性选择器	选取元素
[attr]	所有带有指定属性的元素
[attr=val]	所有属性 attr等于指定属性值的元素
[attr!=val]	属性值不等于指定属性值的元素

1.5 表单 选择器

所有表单	选取元素
:input	表单选择器，所有<input&g t;元素
input	标签选择器，所有<input&g t;元素

按type属性选取表单元素	选取元素
:text	所有type=“text”的<input>元素
:password	所有type=“password”的<input>元素
:radio	所有type=“radio”的<input>元素
:checkbox	所有type=“checkbox”的<in put>元素
:button	所有type=“button”的<in put>元素
:submit	所有type=“submit”的<in put>元素
:reset	所有type=“reset”的<in put>元素
:image	所有ty pe=“image”的<in put>元素
:file	所有ty pe=“file”的<input>元素

按表单状态选取表单元素	选取元素
:enabled	所有激活的input元素
:disabled	所有禁用的input元素
:selected	所有被选取的input
:checked	所有被选中的input

2.过滤 选择器

过滤选择器	选取元素
:first	所有被选元素的第一个元素
:last	所有被选元素的最后一个元素
:eq(index)	下标为inde x的元素
:even	下标为偶数的元素
:o dd	下标为奇数奇数
:not(selector)	不满足某条件的元素

3.组合 选择器

组合选择器	选取元素	示例
无空格	交集选择器	$(“p.red”),所有class=”red“的p元素
，	并集选择器	$(“.red,.blue”),所有class=“red”的元素以及所有class=”blue“的元素
空格	所有后代	$(“p span”),所有p元素后代中的所有span元素
>	所有子代	$(“p>span”),所有p 标签下的span元素

jQuery选择器参考手册

jQuery 遍历 函数

可以根据确定的jQuery 对象，利用遍历函数查询目标dom元素

向上遍历 函数

目标元素是被选元素的祖先

$.parent() //所有直接父元素
$.parents() //所有祖先元素，一直向上直到根元素
$.parentsUntil() //被选元素给定元素之间的所有祖先元素

向下遍历 函数

目标元素是被选元素的后代

$.children()  //所有直接子元素
$.find()      //所有后代元素

水平遍历函数

目标元素是被选元素的同辈

//向前遍历
$.prev()      //紧邻的前一个同辈元素
$.prevAll()   //前面的所有同辈元素
$.prevUntil()
//向后遍历
$.next()      // 紧邻的后一个同辈元素
$.nextAll()   //后面的所有同辈元素
$.nextUntil()
//前后遍历
$.siblings()   //所有同辈元素

筛选函数

$.first()     //被选元素的首个元素
$.last()      //被选元素的最后一个元素
$.eq(索引值)   //被选元素的第i+1个元素

$.filter("selector")  //返回满足标准的元素
$.not("selector")     //返回不满足标准的元素