爱站程序员基地jQuery 快速入门
jQuery 介绍
- jQuery 是一个 JavaScript 库。
- 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
jQuery HolleWorld
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>HolleWorld</title></head><body><div id=\"div\">我是div</div></body><script src=\"js/jquery-3.3.1.min.js\"></script><script>//通过id属性值来获取div元素let jqDiv = $(\"#div\");alert(jqDiv);alert(jqDiv.html());</script></html>
jQuery 基本语法
JS 对象和 jQuery 对象转换
-
JS 的 DOM 对象转换成 jQuery 对象
<script>$(JS的DOM对象);</script>
-
jQuery 对象转换成 JS 对象
<script>jQuery对象[索引];jQuery对象.get(索引);</script>
事件的绑定和解绑
-
绑定事件
<script>jQuery对象.on(事件名称,执行的功能);</script>
-
解绑事件
<script>jQuery对象.off(事件名称);</script>
事件的切换
-
事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系。
-
方式一：单独定义
<script>$(元素).事件方法名1(要执行的功能);$(元素).事件方法名2(要执行的功能);…</script>
-
方式二：链式定义
<script>$(元素).事件方法名1(要执行的功能).事件方法名2(要执行的功能);…</script>
遍历
-
方式一：传统方式
<script>for(let i = 0; i < 容器对象长度; i++){执行功能;}</script> -
方式二：对象.each() 方法
<script>容器对象.each(function(index,ele){执行功能;});</script> -
方式三：$.each() 方法
<script>$.each(容器对象,function(index,ele){执行功能;});</script> -
方式四：for of 语句
<script>for(ele of 容器对象){执行功能;}</script>
jQuery 选择器
基本选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 元素选择器 | $(“元素的名称”); | 根据元素名称获取元素对象们 |
| id 选择器 | $(\”#id的属性值\”); | 根据id属性值获取元素对象 |
| 类选择器 | $(\”.class的属性值\”); | 根据class属性值获取元素对象们 |
层级选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 后代选择器 | $(“A B”); | A下的所有B(包括B的子级) |
| 子选择器 | $(“A > B”); | A下的所有B(不包括B的子级) |
| 兄弟选择器 | $(“A + B”); | A相邻的下一个B |
| 兄弟选择器 | $(“A ~ B”); | A相邻的所有B |
属性选择器
| 选择器 | 选择器 | 作用 |
|---|---|---|
| 属性名选择器 | $(“A[属性名]”); | 根据指定属性名获取元素对象们 |
| 属性名选择器 | $(“A[属性名=属性值]”); | 根据指定属性名和属性值获取元素对象们 |
过滤器选择器
| 选择器 | 选择器 | 作用 |
|---|---|---|
| 首元素选择器 | $(“A:first”); | 获得选择的元素中的第一个元素 |
| 尾元素选择器 | $(“A:last”); | 获得选择的元素中的最后一个元素 |
| 非元素选择器 | $(“A:not(B)”); | 不包括指定内容的元素 |
| 偶数选择器 | $(“A:even”); | 偶数，从 0 开始计数 |
| 奇数选择器 | $(“A:odd”); | 奇数，从 0 开始计数 |
| 等于索引选择器 | $(“A:eq(index)”); | 指定索引元素 |
| 大于索引选择器 | $(“A:gt(index)”); | 大于指定索引元素 |
| 小于索引选择器 | $(“A:lt(index)”); | 小于指定索引元素 |
表单属性选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 可用元素选择器 | $(“A:enabled”); | 获得可用元素 |
| 不可用元素选择器 | $(“A:disabled”); | 获得不可用元素 |
| 单选/复选框被选中的元素 | $(“A:checked”); | 获得单选/复选框选中的元素 |
| 下拉框被选中的元素 | $(“A:selected”); | 获得下拉框选中的元素 |
jQuery DOM
操作文本
| 方法 | 作用 |
|---|---|
| html() | 获取标签的文本 |
| html(value) | 设置标签的文本内容，解析标签 |
操作对象
| 方法 | 作用 |
|---|---|
| $(“元素”) | 创建指定元素 |
| append(element) | 添加成最后一个子元素，由添加者对象调用 |
| appendTo(element) | 添加成最后一个子元素，由被添加者对象调用 |
| prepend(element) | 添加成第一个子元素，由添加者对象调用 |
| prependTo(element) | 添加成第一个子元素，由被添加者对象调用 |
| before(element) | 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用 |
| after(element) | 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用 |
| remove() | 删除指定元素(自己移除自己) |
| empty() | 清空指定元素的所有子元素 |
操作样式
| 方法 | 作用 |
|---|---|
| css(name) | 根据样式名称获取css样式 |
| css(name,value) | 设置CSS样式 |
| addClass(value) | 给指定的对象添加样式类名 |
| removeClass(value) | 给指定的对象删除样式类名 |
| toggleClass(value) | 如果没有样式类名，则添加。如果有，则删除 |
操作属性
| 方法 | 作用 |
|---|---|
| attr(name,[value]) | 获得/设置属性的值 |
| prop(name,[value]) | 获得/设置属性的值(checked，selected) |
