jQuery基础知识点
jQuery基础知识点
文章目录
- jQuery基础知识点
- 1. jQuery简介
- 2. jQuery对象
- 3. jQuery对象与DOM对象的相互转换
- 4. jQuery选择器
- 4.1 基本选择器：
- 4.2 层级选择器：
- 4.3 过滤选择器：
- 4.4 表单选择器：
- 5. jQuery对象的几个方法
- 6. jQuery中DOM操作
- 6.1 查找节点：
- 6.2 创建节点：
- 6.3 插入节点：
- 6.4 删除节点：
- 6.5 克隆节点：
- 6.6 替换节点：
- 6.7 包裹节点：
- 7. jQuery中属性操作
- 8. jQuery中样式操作
- 9. jQuery中CSS—DOM操作
- 10. jQuery中的事件
- 10.1 加载DOM：
- 10.2 事件绑定：
- 10.3 合成事件：
- 10.4 事件冒泡：
- 10.5 事件对象的属性：
- 10.6 移除事件：
- 11. jQuery中动画的隐藏和显示
- 11.1 既改变高度，又改变透明度：
- 11.2 只改变透明度：
- 11.3 只改变高度：
- 11.4 其他方法：
1. jQuery简介
为了简化JavaScript开发而产生的JS库，JS库封装了很多预定义的对象和使用函数，可以帮助开发者建立有高难度交互的Web2.0 特性的富客户端页面，并且兼容各大浏览器。
- 理念：写得少，做得多（write less，do more）。
2. jQuery对象
通过
jQuery（$()）包装DOM对象后产生的对象。jQuery对象是jQuery所独有的，它无法使用DOM对象的任何方法，同样，DOM对象也无法使用jQuery里的任何方法。
-
约定：如果获取的是jQuery对象，那么要在变量前面加上
$如：
var $variable = jQuery对象；
var variable = DOM对象；
3. jQuery对象与DOM对象的相互转换
jQuery对象是一个数组对象。
-
jQuery对象—>DOM对象：
- 通过数组下标得到对应DOM对象
如：var $cr = $("#cr");
var cr = $cr[0]; - 通过jQuery里的get（index）方法得到相应的DOM对象
如：var $cr = $("#cr");
var cr = $cr.get(0);
- 通过数组下标得到对应DOM对象
-
DOM对象—>jQuery对象：
-
将DOM对象使用$()包装起来即可
如：
var cr = document.getElementById（"cr"）;
var $cr = $(cr);
-
4. jQuery选择器
选择器是jQuery的根基，在jQuery中，对事件的处理、遍历DOM和Ajax操作都依赖于选择器。
优点： 1）：简洁的写法
2）：完善的事件处理机制：使用jQuery获取网页中的元素即使不存在也不会报错。
4.1 基本选择器：
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id，class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）。
| 选择器 | 描述 | 返回 |
|---|---|---|
| #id | 根据给定的id匹配一个元素 | 单个元素组成的集合 |
| .class | 根据给定的类名匹配元素 | 集合元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 |
| * | 匹配所有元素 | 集合元素 |
| selector1，selector2，… ,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 |
**用法：**使用$("")包装住选择器即可选择相应元素，如：$("input")即会选择所有名为input的元素。
**注：**可以用基本选择器合并成一个复合基本选择器，满足多个条件，每选择一次，缩小一次范围。
如：$("div.one")将选取每个class为one的div元素，同理，其他的选择器也可以如此复合。
4.2 层级选择器：
如果想通过DOM元素之间的层次关系来获取特点元素，例如：后代元素、子元素、相邻元素、兄弟元素等，则需要使用层级选择器。
| 选择器 | 描述 | 返回 |
|---|---|---|
| ancestor descendant | 选取ancestor下的所有名为descendant的后代元素 | 集合元素 |
| parent > child | 选取parent下的所有名为child的子元素（不包括子元素的后代元素） | 集合元素 |
| prev + next | 选取紧接在prev元素后的名为next的元素 | 集合元素 |
| prev ~ siblings | 选取prev元素后的所有名为siblings的兄弟元素 | 集合元素 |
注意：
- 其中的ancestor、parent以及prev并不一定是单个元素，也可以是多个元素，即可以是基本选择器中的任何一个（不包括选择器集合）。
$("prev + next")选择器要求“prev”元素与名为next的元素相邻，若不相邻该选择器失效。$("prev ~ div")选择器只能选择“prev”元素后的兄弟元素，而jQuery中的方法siblings()与前后位置无关，只要是兄弟元素都可以选取。
4.3 过滤选择器：
主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器基本都以:开头。
**注：**相同的过滤选择器支持组合使用，不同的过滤选择器同样也支持组合使用，即可以
（:基本过选择器:内容过滤选择器:可见性选择器：...），如：$("div:visible:last")即会选择所有可见的div元素中的最后一个。
-
基本过滤选择器：
选择器 描述 返回 :first 选取第一个元素 单个元素组成的集合 :last 选取最后一个元素 单个元素组成的集合 :not(selector) 去除所有与给定选择器匹配的元素 集合元素 :even 选取索引是偶数的所有元素，索引从0开始 集合元素 :odd 选取索引是奇数的所有元素，索引从0开始 集合元素 :eq(index) 选取索引等于index的元素，索引从0开始 单个元素组成的集合 :gt(index) 选取索引大于index的元素，索引从0开始 集合元素 :animated 选取当前正在执行动画的所有元素 集合元素 注意： 基本过滤选择器与别的选择器写法之间不可存在空格，否则会产生问题，因为空格代表选取后代元素。如：
$("div:first")该写法正确，但$("div :first")或者$("div: first")以及别的写法都会产生问题,其他带**:**的过滤选择器同样如此。 -
内容过滤选择器：
选择器 描述 返回 :contains(text) 选取含有文本内容为text的元素 集合元素 :empty 选取不包含子元素或者文本的元素（即元素为空） 集合元素 :parent 选取含有子元素或者文本的元素（即非空元素） 集合元素 :has(selector) 选取含有选择器所匹配的元素的元素 集合元素 注意：
$(":parent")与$(":not(:empty)")两者效果是等价的，都是选择非空元素。 -
可见性过滤器：
选择器 描述 返回 :hidden 选取所有不可见的元素 集合元素 :visible 选取所有可见的元素 集合元素 **注意：**hidden不仅包含样式属性display为none的元素，也包含文本隐藏域（
）和visible:hidden之类的元素。 -
属性过滤选择器：
选择器 描述 返回 [attribute] 选取拥有此属性的元素 集合元素 [attribute = value] 选取指定属性的值为value的元素 集合元素 [attribute != value] 选取指定属性的值不为value的元素 集合元素 [attribute ^= value] 选取指定属性的值以value开始的元素 集合元素 [attribute $= value] 选取指定属性的值以value结束的元素 集合元素 [attribute *= value] 选取指定属性的值含有value元素 集合元素 [selector1][selector2]…[selectorN] 用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围 集合元素 注意：属性过滤选择器前面不带
:，它与其他的选择器进行组合时，也不可加**:**。 -
子元素过滤选择器：
选择器 描述 返回 :nth-child(index/even/odd/equation) 选取每个父元素下第index个子元素或者奇偶元素(index从1开始) 集合元素 :first-child 选取每个父元素的第一个子元素 集合元素 :last-child 选取每个父元素的最后一个子元素 集合元素 :only-child 如果某个元素是它父元素中唯一的子元素，那么将被匹配 集合元素 注意：
- 使用子元素过滤选择器时,必须要在选择器前添加一个空格。如：
$("div.one :only-child）这种写法才可以选取到子元素。 - nth-child()选择器详解：
nth-child(even/odd)：能选取每个父元素下索引值为偶（奇）数的子元素。nth-child(2)：能选取每个父元素下索引值为2的子元素。nth-child(3n+1)：能选取每个父元素下索引值是3n+1的元素（n为自然数）。
-
表单对象属性过滤选择器：
选择器 描述 返回 :enabled 选取所有可用元素 集合元素 :disabled 选取所有不可用元素 集合元素 :checked 选取所有被选中的元素（单选框，复选框） 集合元素 :selected 选取所有被选中的选项元素（下拉列表） 集合元素
- 使用子元素过滤选择器时,必须要在选择器前添加一个空格。如：
4.4 表单选择器：
| 选择器 | 描述 | 返回 |
|---|---|---|
| :input | 选取所有 |