JQuery 详解

一、概念

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

二、快速入门

简单来说，JQuery就是一个JavaScript框架，简称JS开发。

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

使用步骤：

1. 下载JQuery，目前有三种版本1.x、2.x、3.x。
2. 导入JQuery的js文件，导入xx.min.js文件
3. 开始使用

三、JQuery对象和JS对象区别于转换

区别：

• JQuery对象在操作时，更加方便
• JQuery对象和js对象方法不通用

转换：

• jq对象 --> js对象 ：jq对象[索引] 或者 jq对象.get（索引）
• js对象 --> jq对象 ：$(js对象)

四、选择器

基本选择器	标签选择器：$("标签名")
	类选择器：$(".class属性值")
	id选择器：$("#id属性值")
	并集选择器：$("选择器1，选择器2...")
层级选择器	后代选择器：$("A B ") 选择A元素内的所有B元素
	子选择器：$("A > B") 选择A元素内所有的B子元素
属性选择器	属性名称选择器：$("A[属性名]")
	属性选择器：$("A[属性名='值']")
	复合属性选择器：$("A[属性名=‘值’][]...")
过滤选择器	首元素选择器：:first
	尾元素选择器：:last
	非元素选择器：:not(seletctor)
	偶数选择器：:even
	奇数选择器：:odd
	等于索引选择器：:eq(index)
	大于索引选择器：:gt(index)
	小于索引选择器：:lt(index)
	标题选择器：:header 获得标题（h1~h6）元素，固定写法
表单过滤选择器	可用元素选择器：:enabled 获得可用元素
	选中选择器：:checked 获取单选/复选框中的元素
	选中选择器：selected获取下拉框选中的元素
	不可用元素选择器：:disabled获得不可用元素

五、DOM操作

分为三种：对内容的操作，对属性的操作，CRUD操作

对内容的操作

•     html（）获取/设置元素的标签体内容
•     text（）获取/设置元素的标签体纯文本内容
•     val（）获取/设置元素的value属性

对属性的操作

通用属性操作

•     attr（）：获取/设置元素的属性，设置为键值对形式
•     removeAttr（）：删除属性
•     prop（）：获取/设置元素的属性
•     removeProp（）：删除属性

对class属性操作

•     addClass（”class属性名“）添加class属性
•     removeClass（）删除class属性
•     toggleClass（）切换class属性 toggleClass（”xxx“）如果有xxx则删除，没有则添加

CRUD操作

•     对象1.append(对象2)              将对象2添加到对象1内部的末尾
•     对象1.prepend(对象2)             将对象2添加到对象1内部的开头
•     对象1.appendTo(对象2)          将对象1添加到对象2内部的末尾
•     对象1.prependTo(对象2)         将对象1添加到对象2内部的开头
•     对象1.after(对象2)                   对象2添加到对象1的后面
•     对象1.before(对象2)                对象2添加到对象1的前面
•     对象1.insertAfter(对象2)          对象1添加到对象2的后面
•     对象1.insertBefore(对象2)       对象1添加到对象2的前面
•     对象.remove()                          移除对象
•     对象.empty()            将对象的后代元素全部清空，但保留当前对象以及其属性点

六、动画

动画的播放分为了三种方式：默认的动画，滑动式动画，淡入淡出式动画。

默认的动画播放：

•     show（speed，[easing]，[fn]）显示
•     hide（speed，[easing]，[fn]） 隐藏
•     toggle（[speed]，[easing]，[fn]） 切换

滑动式动画播放：

•     slideDown([speed]，[easing]，[fn])   从上往下滑动显示
•     sildeUp([speed]，[easing]，[fn])   从下往上滑动隐藏
•     sildeToggle([speed]，[easing]，[fn])   切换

淡入淡出式动画播放：

•     fadeIn([speed]，[easing]，[fn])  淡入显示
•     fadeOut([speed]，[easing]，[fn]) 淡出隐藏
•     fadeToggle([speed]，[easing]，[fn])  切换

相关属性：
    speed 动画速度（毫秒数）
    easing 切换效果
        swing 先慢，中快，后慢
        linear 匀速
    fn 动画完成时要执行的函数

七、遍历

JavaScript的遍历方式类似于java，语法格式：for（初始值，结束条件，步长）。

JQuery的三种遍历方式：

1. jq对象.each(callback)
2. $.each(Object,[callback])
3. for..of: JQuery

第一种遍历方式：

语法：

jQuery对象.each(function(index,element){

        函数内容
})

其中
    index是元素的索引
    element是每一个元素对象
    this集合中的每一个元素对象

第二种遍历方式：

$.each(被遍历的对象,进行操作的回调函数)

第三种遍历方式：

for(元素对象 of 元素集合)

八、事件绑定

标准绑定方式

• jq对象.事件方法（回调函数）
• 如果调用事件方法，不传递回调函数，则触发浏览器默认行为

on绑定事件/off解绑事件

• jq对象.on（”事件名称“，回调函数）
• jq对象.off（”事件名称“） 注：如果不指定解绑事件名称，则解绑该对象的所有事件

事件切换：toggle

• jq对象.toggle（fn1，fn2，。。）
• 版本高了就不好使了

九、插件

插件的使用方式：

第一种：
    $.fn.extend({
    方法名：function（）{}
})

使用jq对象进行调用

第二种：
    $.extend({
   方法名：function（）{}
})
第二种可以直接用$.方法名调用