jQuery 概述
- jQuery 是一个优秀的 JavaScript 框架,是一个轻量级的 js 库;
- 封装了 js、css、DOM,提供了一致的、简介的 API ;
- 使用户的 html 页面保持代码和 html 内容的分离;
- 使用户更方便的处理 html、Events、实现动画效果,并且更方便的为网站提供 AJAX 交互;
- 兼容 css3 及各种浏览器。
jQuery 使用步骤
- 引入 jQuery 的 js 文件
- 使用选择器定位要操作的节点
- 调用 jQuery 方法对相应节点进行操作
jQuery 对象
- jQuery 为了解决 浏览器的兼容问题,提供了一种统一封装后的对象描述;
- jQuery 提供的方法都是针对 jQuery 对象特有的,而且大部分方法返回值的类型也是 jQuery 对象,所以 jQuery 方法可以连缀调用;
- 通过 jQuery 选择器选中的对象为 jQuery 对象;
jQuery 对象与 DOM 对象之间的关系
jQuery 对象本质上是一个 DOM 对象数组,它在该数组上扩展了一些操作数组中元素的方法。
- obj.length; 获取数组的长度
- obj.get(index); 获取数组中的某一个 DOM 对象
- obj[index]; 等价于 obj.get(index)
DOM 对象可以直接转化为 jQuery 对象:$(DOM 对象);
jQuery 选择器
- 什么是 jQuery 选择器?
jQuery 选择器类似于 CSS选择器(定位元素,施加样式),能够实现定位元素,施加行为。使用 jQuery 选择器能够将内容与行为分离。 - 选择器的种类
- 基本选择器
- 层次选择器
- 过滤选择器
- 表单选择器
各类选择器详解
基本选择器- 元素选择器:依据表签名定位元素 $(“表签名”)
- 类选择器:依据 class 属性定位元素 $(“.class属性名”)
- id 选择器:依据 id 属性定位元素 $(“#id”)
- 选择器组:定位一组选择器所对应的所有元素 $(“#id”,.important)
层次选择器
- 在 select1 元素下,选中所有满足 select2 的子孙元素。
$(“select1 select2”) - 在 select1 元素下,选中所有满足 select2 的子元素
$(“select1 > select2”) - 选中 select1 元素的,满足 select2 的下一个弟弟
$(“select1 + select2”) - 选中 select1 元素的,满足 select2 的所有弟弟
$(“select1 ~ select2”)
过滤选择器
- 基本过滤选择器
根据元素的基本特征定位元素,常用于表格和列表
基本过滤选择器 | 含义 |
---|---|
:first | 第一个元素 |
:last | 最后一个元素 |
:not(selector) | 把 selector 排除在外 |
:even | 挑选偶数行 |
:odd | 挑选奇数行 |
eq(index) | 下标等于 index 的元素 |
gt(index) | 下标大于 index 的元素 |
It(index) | 下标小于 index 的元素 |
$("tr:first")
2 . 内容过滤选择器
根据文本内容定位元素
内容过滤选择器 | 意义 |
---|---|
:contains(text) | 匹配包含给定文本的元素 |
:empty | 匹配所有不包含子元素或文本的空元素 |
$("p:contains('月饼')")
3 . 可见性过滤选择器
根据可见性定位元素
可见性过滤选择器 | 意义 |
---|---|
:hidden | 匹配所有不可见元素,或 type 为 hidden 的元素 |
:visible | 匹配所有的可见元素 |
$("input:hidden")
4 . 属性过滤选择器
根据属性定位元素
属性过滤选择器 | 意义 |
---|---|
[attribute] | 匹配具有 attribute 属性的元素 |
[attribute=value] | 匹配属性等于 value 的元素 |
[attribute != value] | 匹配属性不等于 value 的元素 |
$("input[value='您好']")
5 . 状态过滤选择器
根据状态定位元素
内容过滤选择器 | 意义 |
---|---|
:enabled | 匹配可用的元素 |
:disabled | 匹配不可用的元素 |
:checked | 匹配选中的 checkbox |
:selected | 匹配选中的 option |
$("input:selected")
表单选择器
表单选择器 | 含义 |
---|---|
:text | 匹配文本框 |
:password | 匹配密码框 |
:radio | 匹配单选框 |
:checkbox | 匹配多选框 |
:submit | 匹配提交按钮 |
:reset | 匹配重置按钮 |
:button | 匹配普通按钮 |
:file | 匹配文件筐 |
:hidden | 匹配隐藏框 |
$(":text")