jQuery 常用方法

jQuery 常用方法_第1张图片
Unsplash

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") 选取
元素下元素名是 的子元素
相邻元素选择器 集合元素 $(".item+div") 选取 Class 为 item 的下一个
兄弟元素
兄弟元素选择器 集合元素 $("#item~div") 选取 ID 为 item 的元素后面的所有
兄弟元素

过滤选择器,主要是通过特定的过滤规则来筛选出所需的 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") 选取正在执行动画的
元素

表单选择器,利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素,总结如下:

选择器 返回 示例
:input 集合元素 $(":input") 选取所有 ,