老师的博客：https://www.cnblogs.com/liwenzhou/p/8178806.html
jQuery简介见老师的博客
jQuery的使用约定：我们在声明一个jQuery对象变量的时候在变量名前面加上$。
var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery对象转成DOM对象
HTML对象和jQuery对象的区别
1. jQuery对象转换成DOM对象,用索引取出具体的标签
2. DOM对象转换成jQuery对象,$(DOM对象)
注意:
jQuery对象保存到变量的时候,变量名要加$前缀
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。但是可以通过特殊的方法啊来转换。
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
基本选择器
id选择器
$("#id") //
标签选择器
$("TagName")
类选择器
$(".class")
配合使用
$("div.c1")
// 表示div标签且class为c1的标签 不能加上空格
所有元素选择器
$("*")
组合选择器
$(".class, TagName,#id") // 表示选择对个不同种类的标签。不同于配合使用
层级选择器
x和Y可以为任何的基础的选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
层级选择器可以在内部加上空格来美化
基本筛选器
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 即eq中的0 2 4 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 即eq的1 3 5 :gt(index)// 匹配所有大于给定索引值的元素 英语greater than :lt(index)// 匹配所有小于给定索引值的元素 lower than :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
特别注意：has 后面是值前面的后代元素所包含的属性
例如
html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li id="p1">4</li>
<li>5</li>
$("ul li:first");
$("ul li:end");
$("ul li:eq[0]");
$("ul li:gt(3)");
$("ul li:not(#p1)");
$("ul li:has(#p1)");
属性选择器
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
例子
$("form input[type='text']") // 在form标签下的input标签且type为text
$("form input[type!='text']") // 在form标签下的input标签且type不等于text
表单选择器（form）
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例子
$(":checkbox") // 找到所有的checkbox
$("form input:password") // 在form标签下的input的password
表单对象属性
:enabled // 可以更改
:disabled // 不可更改
:checked //默认选项 实际选中的
:selected // 默认选项 实际选中的
例子
<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> // 现在 selected 表示默认的选择
<option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option
筛选器的方法
下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
这个也是支持批量操作，但是此时的上一个下一个必须是同一个级别的。如果没有，就会找不到。
上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父类元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
查找
搜索所有于指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
注意后代元素的选择，表示前面那个元素的后代的选择出来的元素，与下面的筛选区别
$("div").find("p")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
这个就是表示前面的元素满足后面条件的元素
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
补充
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
这个好眼熟有没有，但是这步操作与上面的基本筛选器的语法一样但是位置不一样。
操作标签
样式操作
addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
这些都是表示类的操作
示例
css
css("color","red")//DOM操作：tag.style.color="red"
jQuery
$("p").css("color", "red"); //将所有p标签的字体设置为红色
记住是所有，而不是一条一条的添加。确实省去了好多的麻烦。
换背景的操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景颜色换色</title>
<style>
.d1{
width: 90px;
height: 90px;
border-radius: 50%;
}
.c1{
background: red;
}
.c2{
background:green;
}
</style>
<script src="jQuery.js"></script>
</head>
<body>
<div class="d1 c1 "></div>
<script>
var $d1=$(".d1");
$d1.click(function(){
console.log($d1[0]);
$d1.toggleClass('c2');
console.log(this);
})
// 我去为啥this变成bom对象了
</script>
</body>
</html>
在函数里面的操作不要用this，因为此时的this不是$的变量的对象，而是BOM对对象了，如果想用this只能用BOM的语法了。
位置操作
.