jQuery常用方法

jQuery是一个快速、简洁的JavaScript框架,封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互

1.选择器

符号$表示jQuery对象,$函数通常也被称为jQuery的工厂函数,jQuery的操作基本上都以$()开始,所有选择器都放在这个括号中,例如$("#title")将返回一个jQuery选择的HTML元素,在返回jQuery对象之后,就可以调用由jQuery提供的丰富的API来完成相应的操作了

基本选择器,通过元素标签名,元素ID、class来查找DOM元素,基本选择器共有五种,总结如下:

选择器 返回 示例
元素标签选择器 集合元素 $("p")选取所有的

元素

ID选择器 单个元素 $("#title")选取ID为test的元素
Class选择器 集合元素 $(".test")选取所有class为test的元素
通配符选择器 集合元素 $("*")选取所有的元素
群组选择器 集合元素 $("span,p.item")选取所有和class为item

标签的元素

层次选择器,适合于通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和兄弟元素,总结如下:

选择器 返回 示例
后代元素选择器 集合元素 $("div span")选取
里的所有的元素
子元素选择器 集合元素 $("div>span")选取
元素下元素名是的子元素
相邻元素选择器 集合元素 $(".titem+div")选取所有class为item的下一个
兄弟元素
兄弟元素选择器 集合元素 $("#item~div")选取ID为item的元素后面的所有
兄弟元素
选择器 返回 示例
:first 单个元素 $("div:first") 选取所有
元素中第 1 个
元素
:last 单个元素 ** $("div:last")** 选取所有
元素中最后 1 个
元素
not(selector) 集合元素 $("input:not(.item)") 选取 Class 不是 item 元素
:even 集合元素 $("input:even") 选取索引是偶数的 元素
:odd 集合元素 $("input:odd") 选取索引是奇数的 元素
:eq(index) 单个元素 $("input:eq(1)") 选取索引等于 1 的 元素
:gt(index) 集合元素 $("input:gt(1)") 选取索引大于1 的 元素
:lt(index) 集合元素 $("input:lt(1)") 选取索引小于 1 的 元素
:header 集合元素 $(":header") 选取网页中所有的

,

,

...

:animated 集合元素 $("div: animated") 选取正在执行动画的
元素

过滤选择器,主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号开头,按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器,总结如下:

选择器 返回 示例
:first 单个元素 $("div:first") 选取所有
元素中第 1 个
元素
:last 单个元素 ** $("div:last")** 选取所有
元素中最后 1 个
元素
not(selector) 集合元素 $("input:not(.item)") 选取 Class 不是 item 元素
:even 集合元素 $("input:even") 选取索引是偶数的 元素
:odd 集合元素 $("input:odd") 选取索引是奇数的 元素
:eq(index) 单个元素 $("input:eq(1)") 选取索引等于 1 的 元素
:gt(index) 集合元素 $("input:gt(1)") 选取索引大于1 的 元素
:lt(index) 集合元素 $("input:lt(1)") 选取索引小于 1 的 元素
:header 集合元素 $(":header") 选取网页中所有的

,

,

...

:animated 集合元素 $("div: animated") 选取正在执行动画的
元素

你可能感兴趣的:(jQuery常用方法)