【前端】JQuery（学习笔记）

一、JQuery概述

1、JQuery框架

JQuery：一个JavaScript框架。简化JS开发

JavaScript框架：本质上就是一些js文件，封装了js的原生代码

2、JQuery版本

1）1.x

兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了。

最终版本：1.12.4 (2016年5月20日)

2）2.x

不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x。

最终版本：2.2.4 (2016年5月20日)

3）3.x

不兼容ie678，只支持最新的浏览器。除非特殊要求。一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。

目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）

3、开发版本和生产版本

jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些

jquery-xxx.min.js：生产版本。程序中使用，没有缩进换号。体积小一些。程序加载更快

4、JQuery导入

<script src=".../js/jquery-3.3.1.min.js">script>

二、JQuery对象

1、与JS对象区别

1. JQuery对象在操作时，更加方便
2. JQuery对象和js对象方法不通用的

2、相互转换

1. jq – > js：jq对象[索引] / jq对象.get(索引)
2. js – > jq：$(js对象)

三、JQuery选择器

1、选择器概述

选择器：筛选具有相似特征的元素(标签)

2、基本操作

1）事件绑定

$("#b1").click(function(){
	alert("abc");
});

2）入口函数

$(function () {
	...
});

window.onload 和 $(function) 区别

1. window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
2. $(function)可以定义多次的

3）样式控制：css()

$("#div1").css("backgroundColor","pink");

3、分类

1）基本选择器

1. 标签选择器(元素选择器)：$("html标签名")
   获得所有匹配标签名称的元素
2. id选择器：$("#id的属性值")
   获得与指定id属性值匹配的元素
3. 类选择器：$(".class的属性值")
   获得与指定的class属性值匹配的元素
4. 并集选择器：$("选择器1,选择器2....")
   获取多个选择器选中的所有元素

2）层级选择器

1. 后代选择器：$("A B")
   选择A元素内部的所有B元素
2. 子选择器：$("A > B")
   选择A元素内部的所有B子元素

3）属性选择器

1. 属性名称选择器 ：$("A[属性名]")
   包含指定属性的选择器
2. 属性选择器：$("A[属性名='值']")
   包含指定属性等于指定值的选择器
3. 复合属性选择器：$("A[属性名='值'][]...")
   包含多个属性条件的选择器

4）过滤选择器

1. 首元素选择器： (selector):first
   获得选择的元素中的第一个元素
2. 尾元素选择器：(selector):last
   获得选择的元素中的最后一个元素
3. 非元素选择器：(selector):not(selector)
   不包括指定内容的元素
4. 偶数选择器：(selector):even
   偶数，从 0 开始计数
5. 奇数选择器：(selector):odd
   奇数，从 0 开始计数
6. 等于索引选择器：(selector):eq(index)
   指定索引元素
7. 大于索引选择器：(selector):gt(index)
   大于指定索引元素
8. 小于索引选择器：(selector):lt(index)
   小于指定索引元素
9. 标题选择器：(selector):header
   获得标题（h1~h6）元素，固定写法

5）表单过滤选择器

1. 可用元素选择器：(selector):enabled
   获得可用元素
2. 不可用元素选择器：(selector):disabled
   获得不可用元素
3. 选中选择器：(selector):checked
   获得单选/复选框选中的元素
4. 选中选择器：(selector):selected
   获得下拉框选中的元素

四、DOM操作

1、内容操作

1. html()：获取/设置元素的标签体内容
2. text()：获取/设置元素的标签体纯文本
3. val()：获取/设置元素的value属性值

2、通用属性操作

1. attr()：获取/设置元素的固有属性
2. removeAttr()：删除固有属性
3. prop()：获取/设置元素的自定义的属性
4. removeProp()：删除自定义的属性

3、对class属性操作

1. addClass()：添加class属性值
2. removeClass()：删除class属性值
3. toggleClass()：切换class属性
4. css()

4、CRUD操作

1. append()：父元素将子元素追加到末尾
   对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
2. prepend()：父元素将子元素追加到开头
   对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头
3. appendTo()
   对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾
4. prependTo()
   对象1.prependTo(对象2)：将对象1添加到对象2内部，并且在开头
5. after()：添加元素到元素后边
   对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
6. before()：添加元素到元素前边
   对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
7. insertAfter()
   对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系
8. insertBefore()
   对象1.insertBefore(对象2)： 将对象1添加到对象2前边。对象1和对象2是兄弟关
9. remove()：移除元素
   对象.remove()：将对象删除掉
10. empty()：清空元素的所有后代元素。
    对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点

五、JQuery动画

1、默认动画

1. show([speed],[easing],[fn]])
2. hide([speed],[easing],[fn]])
3. toggle([speed],[easing],[fn])

2、滑动动画

1. slideDown([speed],[easing],[fn])
2. slideUp([speed],[easing],[fn]])
3. slideToggle([speed],[easing],[fn])

3、淡入淡出动画

1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed],[easing],[fn])

4、动画参数

1. speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果
   1. swing：默认。动画执行时效果"先慢，中间快，最后又慢"
   2. linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。

六、JQuery遍历

1、JS遍历

for(初始化值;循环结束条件;步长)

2、jq遍历

1. jq对象.each(callback)
   1. 回调函数参数
      1. index：索引
      2. element：每一个元素对象
      3. this：每一个元素对象
   2. 回调函数返回值
      1. true：break
      2. false：continue
2. $.each(object, [callback])
3. for..of：for(元素对象 of 容器对象) jquery 3.0 版本之后提供的方式

七、JQuery事件绑定

1、标准方法

1. jq对象.事件方法(回调函数)；
2. 如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。

2、on/off方法

1. jq对象.on(“事件名称”,回调函数)
2. jq对象.off(“事件名称”)
3. jq对象.off()：解绑所有事件

3、事件切换

jq对象.toggle(fn1,fn2...)

单击jq对象对应的组件后，会循环执行回调函数

1.9版本 .toggle() 方法删除，jQuery Migrate（迁移）插件可以恢复此功能。

<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

八、JQuery插件

作用：增强jq的功能

实现方式：

1. 增强对象：$.fn.extend(object)
2. 增强$： $.extend(object)