一、什么是jQuery?
1. jQuery的简单介绍
jQuery本质上是算js只是js中有有很多方法需要大量使用如果一直拷贝使用也太麻 烦 了 所以 就使用JavaScript库：封装了很多JS代码
JavaScript库：jQuery(90%)、Ext JS
官方地址：http://jquery.com/
2.为什么要学习jQuery？
为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
3.在那些情况下使用jQuery？
中大型网站开发是一些前端框架的基础，比如EasyUl,Bootstrap
4.怎么使用jQuery？
1.首先我们要先下载jQuery库
2.我们将下载好的jQuery库更改后缀名改成js在把这个文件导入项目js这个文件夹里面
3.然后在你写scrput代码的时候就可以调用里面的方法了
4.如下面图片展示的样子
先下载到文件夹然后鼠标右键更改后缀名改成js再导入到项目里面的js文件夹里面复制过去就行
然后再在你的html里面导入就好了 看图
5.jQuery的选择器
5.1基本选择器
1 . ID选择器：#ID
2 . 类选择器；.class
3 . 元素选择器：element
4 . 通配符：*
5.2层级选择器
查找所有元素，查询子元素
5.3过滤选择器
1.参考jQuery文档
2.获取第一个元素：first
3.最后一个元素：last
4.获取偶数下标的元素：even
5.获取奇数下标的元素：odd
:gt大于
6.获取某一范围元素-------------------
:It小于
5.4表单选择器
1.参考jQuery文档
2.获取选择单选框的值
3.获取选择多选框的值
4.获取选择下拉值
二、jQuery的工具、属性、CSS
1.$工具方法
小tips： 红色字体是重要的方法
1.$.each():遍历数组、对象、对象数组中的数据
2.trim():去除字符串两边的空格
3.type(obj):得到数据的类型
4.$.isArray(obj):判断是否是数组
5.$.isFunction(obj):判断是否是函数
6.parseJSON(obj):解析json字符串转换为js对象/数组
2.jQuery的属性和css
1.属性
1.1attr():获取某个标签属性的值，或设置某个标签属性的值
1.2.removeAttr():删除某个标签属性
1.3.addClass():给某个标签添加class属性值
1.4.removeClass():删除某个标签class属性值
1.5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
1.6.html():获取某一个标签体内容(注意：该标签体中可以包含子标签)
1.7.text():获取某一个标签体内容(注意：该标签体不能包含子标签)
1.8.val():主要用户获取/设置输入框的值
2.css
2.1.css():设置标签的css样式
1. 获取样式值：css(“样式名”)
2. 设置单个样式：css(“样式名”,”样式值")
3.设置多个样式：css(“样式名”:“样式值”,“样式名”:”样式值”})
2.2.位置
1.offset():相对整个大容器的相对位置
2.position():相对父容器的相对位置
3.scrollXX:scrollTop():滚动条到顶部距离
2.3.尺寸
1.width():容器宽
2.height():容器高
上面两个是内容尺寸
3.innerWidth():width+padding
4.innerHeight():height+padding
上面两个是内部尺寸
5.outerWidth():width+padding+border
6.outerHeight():height+padding+border
上面两个是外部尺寸
三、jQuery的筛选和文档处理
1.筛选
1.过滤
1. first0:获取匹配的第一个元素
2.last0:获得匹配的最后一个元素
3.eq(N):获取匹配的第N或-N个元素
4.filter(selector):筛选出与指定表达式匹配的元素集合
5.has(selector):筛选出包含特定特点的元素的集合
6.not(selector):筛选出不包含特定特点的元素的集合
2.查找
1.children0:子标签中找
2.findO:后代标签中找
3.parent0:父标签
4.prevAll0:前面所有的兄弟标签
5.nextAllO:后面所有的兄弟标签
6.siblings0:前后所有的兄弟标签
2.文档处理
1.增
1.1内部插入
1.append0:将内容添加到指定的元素后面
2.appendToO:和append0颠倒
3.prependO;将内容添加到指定元表前面
4.prependTo0:和prepend0颠倒
1.2外部插入
1.afterO:在匹配元素之后插入内容
2.beforeO:在匹配元素之前插入内容
2.删
1.empty0:删除匹配的元素集合中所有的子节点(不包含匹配的元素)
2.remove0:删除匹配的元素集合中所有的子节点(包含匹配的元素)
3.改
1.replaceWith0:将所有匹配的元素替换成指定的内容
四、jQuery事件和动画效果
1.事件
1.1加载Dom两种方式
1.window.onload方式
执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
编写个数：1个
2. jQuery方式
执行时间：网页结构绘制完成后，执行
编写个数：多个
3.两个都有的情况下执行顺序【面试题】
jQuery3.0:window.onload比jQuery先执行
jQuery1.0和2.0:jQuery比window.onload先执行
1.2绑定事件两种方式
元素：on("事件名",function00)
元素，事件名(function)0]
1.3合成事件/事件切换
hoverO:量标悬停合成事件
鼠标移上去第一个函数
鼠标移除第二个函数
toggle0:鼠标点击切换事性
1.4事件传播(事件冒泡)
传播：小-->中-->大
阻止传播：事件后面加上return false
1.5事件坐标
offsetX:当前元素左上角
clientX:窗口左上角
pageX:网页左上角
小tips：如果要找y则将后面的X改成Y即可
1.6移除事件
元素.unbind("事件名")
注意1:一般情况下，不会使用unbind ,推荐使用变量控制事件
注意2:如果某个元素只允许使用一次事件，则可以使用oneO
2.动画效果
2.1 基本
显示：show(Time)
隐藏：hide(Time)
切换：toggle(Time)
2.2滑动
slideUp(Time):动画收缩(向上滑动)-->隐藏
slideDown(Time):动画展开(向下滑动)-->显示
slideToggle(Time):动画切换
2.3淡入淡出(透明度)
fadeIn(Time):淡入(透明度减少)
fadeOut(Time):淡出(透明度增大)
fadeToggle(Time):切换
2.4自定义动画
元素.animate《属性：属性值),Time)
width
缩放--------
height
top
移动-------
left
top="+='
移动(本元素),距离----------
left="-="
小tips:所有的动画效果都是基于css做出来的
