共计 1526 个字符，预计需要花费 4 分钟才能阅读完成。
一、什么是 JQuery?
jQuery 是一个 JavaScript 库，极大地简化了 DOM 操作的代码。
// 获取元素
document.getElementById('btn') //DOM
$("#btn") //JQuery二、如何使用 JQuery?
1、调用 JQuery 库
jQuery 安装 | 菜鸟教程 (runoob.com)
方法一：可以下载 JQuery.js，将下载的文件放在网页的同一目录下。
方法二：或者直接引用服务器的 Jquery 库(如百度、菜鸟教程服务器)。
2、在新的
所有 JQuery 函数都位于一个 document ready 函数中，确保在文档加载完成后再执行 JQuery 函数，因为文档加载完成前执行函数可能获取不到相应目标元素。
三、JQuery 增删改查操作
1、选择器
基本选择器
| $(“*”) | 选取所有元素 |
| $(this) | 选取当前 HTML 元素 |
| $(“p”) | 选取
元素 |
| $(“#btn”) | 选取 id=”btn” 的元素 |
| $(“.btn”) | 选取 class=”btn” 的元素 |
层级选择器：后代选择器、子代选择器
| $(“p:first”) | 选取第一个
元素 |
| $(“ul li:first”) | 选取第一个
|
| $(“ul li:first-child”) |
选取每个
|
选取带某属性或某属性值的元素
| $(“[href]”) | 选取带有 href 属性的元素 |
| $(“a[target=’_blank’]”) | 选取所有 target 属性值等于 “_blank” 的 元素 |
| $(“a[target!=’_blank’]”) | 选取所有 target 属性值不等于 “_blank” 的 元素 |
选取兄弟元素
| $(“…”).next()/pre() | 选取某元素的上一个或下一个元素 |
| $(“…”).nextAll()/preAll() | 选取某元素之前或之后的所有元素 |
| $(“…”).siblings() | 选取某元素除自己外的所有兄弟元素 |
2、属性
获取属性：$(“…”).attr(“ 属性名 ”)
修改属性：$(“…”).attr(“ 属性名 ”，值)
3、html、文本、value 值操作
获取：html()/text()/val()
修改：html(“ 修改后的内容 ”)/text(“ 修改后的文本内容 ”)/val(“ 修改后的 value 值 ”)
4、修改样式
(1). 直接修改 css 属性
获取：$(“…”).css(“ 属性名 ”)
修改：$(“…”).css(“ 属性名 ”，值)
(2). 通过 class 批量修改样式
判断是否包含指定 class: $(“…”).hasClass(“ 类名 ”)
添加 class: $(“…”).addClass(“ 类名 ”)
移除 class: $(“…”).removeClass(“ 类名 ”)
5、元素的添加和删除
新建元素：var $new=$(“html 代码 ”)
添加元素：$(“…”).append($new)
删除元素：$(“…”).remove();
- 111
- 222
- 333
var $newli = $("444 ");
$("ul").append($newli);
$("ul li:first-child").remove();
四、事件绑定
语法：$(” “).bind(“ 事件类型 ”，function(e){})
JQuery
原文地址: JQuery 基本知识点
