jQuery相关的基础知识

朴灿烈づ我的快乐病毒、 2022-12-11 09:19 170阅读 0赞

### 目录 ###

*  jQuery相关的基础知识总结
 *   *  一、关于jQuery
     *   *  1.jQuey是什么？
         *  2.jQuery的优点
         *  二、jQuery核心函数
         *  三、jQuery对象的访问
         *  四、选择器
         *   *  4.1基本选择器
             *  4.2层次选择器
             *  4.3过滤选择器
             *  4.4表单选择器
         *  五、属性/文本
         *  六、css模块
         *   *  6.1style样式
             *  6.2位置坐标
             *  6.3尺寸
             *  6.4筛选
             *  6.5文档处理(CUD)模块
             *  6.6事件模块
         *  七、动画效果

# jQuery相关的基础知识总结 #

## 一、关于jQuery ##

### 1.jQuey是什么？ ###

jQuery是一个js的函数库，写得少，功能实现的多。

### 2.jQuery的优点 ###

**选择器强大**：方便快捷查找到DOM元素。  
**隐式遍历**：一次可以操作多个元素。  
**读写合一**：读写数据用的是一个函数。  
**链式调用**：可以通过 “.” 不断地去调用jQuery对象的方法。

### 二、jQuery核心函数 ###

jQuery向外暴露的就是jQuery函数，可以直接使用。当成一般函数：$()，括号里可传参数：  
1.可以是function，相当于`window.onload = function(文档加载完成的监听)`

2.可以是选择器字符串，查找所有匹配的DOM元素，返回包含所有DOM元素的jQuery对象

3.可以是DOM元素，将DOM元素对象包装为jQuery对象返回

4.可以是标签字符串，创建标签DOM元素对象并且包装为jQuery对象返回

### 三、jQuery对象的访问 ###

**jQuery对象**，包含所有匹配的n个DOM元素的伪数组对象。  
基本方法：  
1.each(function);（参数为回调函数）。 每一个所匹配的元素都会执行function回调函数 。

2.size()；jQuery对象中的元素个数。

3.length，jQuery对象中元素的个数

4.selector，返回传给jQuery()的原始选择器。

5.index()，得到当前dom元素的下标。

### 四、选择器 ###

#### 4.1基本选择器 ####

1.`#id`，根据给定的id匹配一个元素  
2.`element`，根据给定的元素名匹配所有元素  
3.`.class`,根据给定的类匹配元素  
4.`selector1,selector2,selector3`，将每个选择器匹配到的元素合并后一起返回  
5.`selector1selector2selector3`，将每个选择器匹配到的元素交集后返回

#### 4.2层次选择器 ####

1.`ancestor descendant`，在给定的祖先元素下匹配所有的后代元素  
2.`parent>child`,在给定的父元素下匹配所有的子元素  
3.`prev + next`，匹配所有紧接在prev元素后得next元素  
4.`prev ~ siblings`，匹配prev元素之后的所有sibings元素

#### 4.3过滤选择器 ####

在原先选择器上再次进行筛选  
1.`:first`,获取第一个元素  
2.`:last`，获取最后一个元素  
3.`:not(selector)`，去除所有与给定选择器匹配的元素  
4.`:even`，匹配所有索引值为偶数的元素，从0开始计数  
5.`:odd`，匹配所有索引值为奇数的元素，从0开始计数  
6.`:eq(index)`，匹配一个给定索引值的元素  
7.`:gt(index)`，匹配所有大于给定索引值得元素  
8.`lt(index)`，匹配所有小于给定值索引的元素  
9.`:hidden`，匹配所有不可见的元素，或者type为hidden的元素  
10.`:visible`，匹配所有的可见元素  
11.`[attribute]`,匹配包含给定属性的元素  
12.`attribute=value`，匹配给定的属性是某个特定值的元素

#### 4.4表单选择器 ####

1.`:input`，匹配所有input，textarea，select和button元素  
2.`:text`，匹配所有的单行文本框  
3.`:checkbox`，匹配所有复选框  
4.`:radio`，匹配所有单选按钮  
5.`:checked`，匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

### 五、属性/文本 ###

操作标签的属性，标签体的文本  
1.`:attr(name | key,value)`，设置或返回备选元素的属性值；读写非布尔值的标签属性  
2.`:prop(name | key,value)`，获取在匹配的元素集中第一个元素的属性值；读写布尔值的标签属性  
3.`:removeAttr(name)`，从每一个匹配的元素中删除一个属性  
4.`:addClass(class)`，为每个匹配的元素添加指定的类名  
5.`:removeClass(class)`，为每个匹配的元素删除指定的类名  
6.`val()`,读写标签的value值  
7.`html()`,取得第一个匹配元素的html内容

### 六、css模块 ###

#### 6.1style样式 ####

1.`css(styleName)`,访问匹配元素的样式属性  
2.`css(styleName,value)`,设置一个样式  
3.`css([多个样式])`，设置多个样式

#### 6.2位置坐标 ####

1.`offset()`,读写当前元素坐标（原点是页面左上角）  
2.`position()`,读当前元素坐标（原点是父元素的左上角）  
3.`scrollTop()/scrollLeft()`，读写元素/页面的滚动条坐标

#### 6.3尺寸 ####

1.`width()/height()`,宽度/高度  
2.`innerWidth()/innerHeight()`，width/height + padding  
3.`outerWidth()/outerHeight()`,width/height + padding + border

#### 6.4筛选 ####

**过滤**  
在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回  
1.`first()`，获取第一个元素  
2.`last()`，获取最后一个元素  
3.`eq(index)`，获取索引为index的元素  
4.`filter(selector):` 筛选出与指定表达式匹配的元素集合  
5.`not(selector)`: 删除与指定表达式匹配的元素  
6.`has(selector):` 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

**查找**  
查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回  
1.`children(selector):`取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 2.`find(selector):` 搜索所有与指定表达式匹配的元素。  
3.`siblings(selector):` 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。（兄弟元素）  
4.`parent():` 取得一个包含着所有匹配元素的唯一父元素的元素集合。

#### 6.5文档处理(CUD)模块 ####

1.`append():` 每个匹配的元素后部追加内容  
2.`appendTo()`把所有匹配的元素追加到另一个指定的元素集合中。（尾部添加）  
3.`preppend()` 每个匹配的元素前面追加内容  
4.`preppendTo():` 把所有匹配的元素追加到另一个指定的元素集合中，（前面添加）  
5.`before():` 在每个匹配的元素之前插入内容。  
6.`after():` 在每个匹配的元素之后插入内容  
7.`replaceWith()`，将所有匹配的元素替换成指定的HTML或DOM元素。  
8.`remove():` 从DOM中删除所有匹配的元素。  
9.`empty():` 删除匹配的元素集合中所有的子节点。(自己还在)

#### 6.6事件模块 ####

1.`blur事件`，在元素失去焦点时触发  
2.`mousedown事件`，在鼠标按下去的时候触发  
3.`mouseup事件`，在鼠标点击释放后触发  
4.`mouseenter事件`，鼠标穿过元素时触发  
5.`off事件`，解绑事件

**事件的委派**  
将子元素的事件委托给父辈元素处理，事件监听绑定在父元素上，事件发生在子元素上。  
1.`delegate（）`，为指定的元素添加一个或多个事件  
2.`undelegate（）`，删除由delegate方法添加的事件

**事件坐标**  
1.event.offsetX: 原点是当前元素左上角  
2.event.clientX: 原点是窗口左上角  
3.event.pageX: 原点是页面左上角

**停止事件冒泡: event.stopPropagation()**  
**阻止事件的默认行为: event.preventDefault()**

### 七、动画效果 ###

**基本**  
1.`show()`，显示隐藏的匹配元素  
2.`hide()`,隐藏显示的元素  
3.`toggle()`,用于绑定两个或多个事件处理函数轮回执行

**滑动**  
1.`slideDown()`,伸长（显示）  
2.`slideUp`，收缩（隐藏）  
3.`slideToggle()`切换所绑定的两个事件轮回执行

**淡入淡出**  
1.`fadeIn()`，淡入  
2.`fadeOut()`，淡出

**stop(),停止所有在指定元素上正在运行的动画。**