https://www.jianshu.com/p/e71dd6ba0ee8
jQuery是什么？
就像是 python 中的模块、 类库
就是把 JavaScript 的语句封装起来的一个模块文档
JavaScript 中有：
1.直接查找：
2.间接查找
Jquery 有： 选择器 筛选器
特点
强大选择器 --- 类似于css的选择器
DOM操作
Ajax封装 (后面项目的时候讲)
JQuery 下载与使用
官网： [https://jquery.com](https://jquery.com/)
中文文档：<http://jquery.cuishifeng.cn/>
如何使用:
建议把要使用的源文件更名为不带版本号的文件名，引入的时候也不带版本号，在代码块引入的附近写上注释，注明版本即可。
image.png
选择器
/*1.id 选择器：*/
$('#test')
/*2.标签选择器*/
$("div")
/*3.class选择器*/
$('.class')
/*4.组合选择器 --> 会找到所有的在小括号内的标签，写的时候每个标签之间用 逗号分开*/
$('div,p,span')
5. 祖先 --- 子孙
--> 找到这个标签的下的所有的 目标标签，不论在第几层，都会被找到;
写的时候标签之间用 空格隔开。
$('form input')
6. parent > child
--> 只会找到这个标签的下一层里的所有的符合目标的标签，也就是只在其下面的第一层中找；
$('form > input')
7. 根据明确的层级找
:first --> 在同级别的标签中找到第一元素
:last --> 在同级别的标签中找到最后一个元素
:eq() --> 在同级别的标签中利用标签所在的索引位置找到匹配的标签，索引号从 0 开始
8. 过滤器
jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 "url" 的所有 <p> 元素：
$(document).ready(function(){
$("p").filter(".url");
});
9. 属性选择器 ☆☆☆☆☆
--> 匹配到某个标签下且具有某一属性的所有标签
<input type="text" name='username'/>
$("input[type='text']")
或者
$("input[name='username']")
更多
image.png
筛选器
next() --> 获取同级紧邻的下一个元素
next("#test") --> 获取到同级标签下一个元素中 id 为 test 的元素
nextAll() --> 获取同级紧邻的下方的所有元素
nextUntil(".c1") --> 获取同级标签紧邻的其下的所有元素，直到类名为 c1 的标签为止，就不在向下匹配
prev() --> 获取同级紧邻上一个元素
prevAll() --> 获取同级紧邻上方所有的元素
prevUntil() --> 获取同级紧邻下方所有的元素
children() --> 获取所有的子元素
parent() --> 获取自己的父元素
siblings() --> 获取兄弟元素
jQuery 操作
// css 样式操作，就是针对 style 标签内的内容的
// 添加样式
$(".c1").css("display","none");
// 文本操作
$("div").text("dsadsa")
input系列框里面的值，
$("xxx").val("dsadsa")
$("xxx").html()
// 属性操作，就是针对标签的属性 ，比如 class name hidden 等
给某一个标签的属性赋值
$("xxx").attr("class","c1");
获取属性 target 的值
$("xxx").attr("key");
移除标签的属性
$("xxx").removeAttr("key");
添加类 注意类名前面没有点
$("xxx").addClass("c1" );
移除类
$("xxx"). removeClass("c1" );
没有这个类，就设置为这个类,有这个类，就移除这个类
$("xxx").toggleClass("hidden");
判断有没有这个类
$("xxx").hasClass("c1" );
在操作关于input系列【radio checkbox】 我们选中或者取消，
不能采用attr来进行设值, 不过，在1.3 版本修复了这个bug---
prop()专门是用来对input【radio checkbox】
$("xxx").prop();
// 文档操作
往选中的元素内部的后面添加元素
append();
往选中的元素的前面添加元素
prepend();
往选中元素的外部的后面进行添加
after();
往选中元素的外部的前面进行添加
before();
将元素内部的内容删除
empty();
将元素的标签删除； 如：$("xxx").remove()
remove();
事件
// 绑定事件 目前推荐的方式
$("xxx").on("click",function(){})
// 移除事件 目前推荐的方式
$("xxx").off("click",function(){})
// 页面加载事件的两种方式：
// 允许我们在文档完全加载完后执行函数
$(function(){
$("xxx").on("click",function(){})
});
$(document).ready(function(){
$("xxx").on("click",function(){})
});
其他事件
image.png
