目录jQuery类库一、jQuery简介1.特点2.使用jQuery的不同方式3.jQuery底层本质4.标签对象与jQuery对象二、jQuery查找标签1.基本选择器2.组合选择器3.层级选择器4.属性选择器5.基本筛选器6.表单筛选器7.筛选器方法8.链式操作的本质三、操作标签1.class操作2.位置操作3.文本操作4.创建标签5.属性操作6.文档处理四、jQuerty事件1.JS绑定事件与jQuery绑定事件2.常用事件3.input框实时监听事件4.克隆事件5.事件相关补充（1）阻止后续功能（2）事件冒泡（3）等待页面加载完毕再执行JS代码（4）事件委托五、jQuery的简单的动画效果1.点赞+1
jQuery类库
一、jQuery简介
1.特点
加载速度更快
一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
选择器更多更好用
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
一行代码搞定更简介
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
支持ajax请求(重点)
jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
兼容多浏览器
jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发
jQuery有着丰富的第三方的插件
2.使用jQuery的不同方式
下载核心文件到本地引入（本地环境，没有网络也可以使用）
CDN网络资源加载
3.jQuery底层本质
jQuery封装了JS代码，让编写更简单，但是没有原生JS代码运行的更快
JS代码
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
jQuery代码
$('p').first().css('color','yellow').next().css('color','blue')
4.标签对象与jQuery对象
不同的对象能调用的方法是不同的，在编写代码的时候一定要知道正在操作的是jQuery对象还是标签对象
标签对象与jQuery对象互相转换
可以把jQuery对象看成一个特殊的列表，通过jQuery对象索引取值的方式来获取标签对象
二、jQuery查找标签
1.基本选择器
id选择器
$('#d1')
class选择器
$('.c1')
标签选择器
$('div')
2.组合选择器
寻找id是d1的div标签
$('div#d1')
查找含有c1样式类的span标签
$('span.c1')
查找div或者span或者p标签
$('span,div,p')
查找id是d1，或者class中包含为c1，或者span标签
$('#d1,.c1,span')
3.层级选择器
$('div p') 查找含有div中所有的后代p标签
$('div>p') 查找div里面的儿子p标签
$('div+p') 查找div同级别下面紧挨着的p标签
$('div~p') 查找div同级别下面所有的p标签
4.属性选择器
$('[username]') 查找含有username属性名的标签
$('[username="duoduo"]') 查找含有username属性名且值为“duoduo”的标签
$('div[username="duoduo"]') 查找含有username属性名且值为“duoduo”的div标签
5.基本筛选器
筛选器
作用
:first
第一个
:last
最后一个
:eq(index)
索引等于index的那个元素
:even
匹配所有索引值为偶数的元素，从 0 开始计数
:odd
匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)
匹配所有小于给定索引值的元素
:lt(index)
匹配所有小于给定索引值的元素
:not(元素选择器)
移除所有满足not条件的标签
:has(元素选择器)
选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子：通过jQuery代码操作返回的都是jQuery对象
$('span')
jQuery.fn.init(6) [span, span, span, span#d2, span, span, prevObject: jQuery.fn.init(1)]
$('span:first')
jQuery.fn.init [span, prevObject: jQuery.fn.init(1)]0: spanlength: 1prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('span:even')
jQuery.fn.init(3) [span, span, span, prevObject: jQuery.fn.init(1)]0: span1: span2: spanlength: 3prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('span:gt(3)')
jQuery.fn.init(2) [span, span, prevObject: jQuery.fn.init(1)]
$('span:not(#d1)')
jQuery.fn.init(6) [span, span, span, span#d2, span, span, prevObject: jQuery.fn.init(1)]0: span1: span2: span3: span#d24: span5: spanlength: 6prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('span:has(#d2)')
jQuery.fn.init [prevObject: jQuery.fn.init(1)]
6.表单筛选器
仅限于表单标签内部使用
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单标签属性
:enabled
:disabled
:checked
:selected
:checked除了查找到checked的标签，还会查找到selected标签
:selected只会查找到selected的标签
7.筛选器方法
下一个元素：
$("#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")
8.链式操作的本质
为什么在jQuery中为什么可以通过点的操作不断的点属性这种链式操作在python中用代码模拟
通过每次操作之后返回了操作的对象，这样就可以通过对象点方法后继续点方法了，进行链式操作了
class MyClass(object):
def func1(self):
print('执行了func1')
return self
def func2(self):
print('执行了func2')
return self
obj = MyClass()
obj.func1().func2() # None.func2()
三、操作标签
1.class操作
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
2.位置操作
$(window).scrollTop()
例
$(window).scrollTop()
6618.5
3.文本操作
text() innerText
html() innerHTML
val() value
jQuery对象[0].files files[0]
4.创建标签
document.createElement() $('')
5.属性操作
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
attr对于动态变化的属性，获取会失真
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的
prop('value') // 获取value属性的值
prop('checked',true); // 设置属性
removeProp('value') // 移除value属性
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
总结一下：
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
6.文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点
四、jQuerty事件
1.JS绑定事件与jQuery绑定事件
（1）JS绑定事件
标签对象.on事件名 = function () {
this
}
（2）jQuery事件绑定
方式一：
jQuery对象.事件名(function(){
})
方式二
jQuery对象.on('事件名', function(){
})
2.常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
3.input框实时监听事件
4.克隆事件
clone() 默认不克隆事件，加true就可以
例子
5.事件相关补充
（1）阻止后续功能
事件本身有功能了，如何取消本身默认的功能
在事件函数的最后return false
return false; // 常见阻止表单提交等
e.preventDefault();
取消form表单提交数据的默认功能
（2）事件冒泡
多个标签互相嵌套，并且有相同的功能要执行的时候，会发生事件冒泡的现象
当只想点击span标签发生弹出警告框事件的时候，绑定p标签和div标签的弹出警告框事件也会发生
点击span
阻止事件冒泡
（3）等待页面加载完毕再执行JS代码
完整写法
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写
$(function(){
// 你在这里写你的代码
})
（4）事件委托
事件委托是通过事件冒泡的原理，让父标签去捕获子标签的事件
将body中的所有的点击事件委托给button标签
五、jQuery的简单的动画效果
1.点赞+1
点赞特效简单示例