一、简介
-
目前最流行的JavaScript函数库之一，对JavaScript进行了封装。
-
并不是一门新语言，而是将常用的、复杂的JavaScript操作进行函数化封装，封装后可以直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。
-
扩展: 目前jQuery有三个大版本
-
1.x：兼容ie678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
-
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
-
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
-
二、使用
-
$是jQuery使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。 作用1：$(function(){})-
相当于 window.onload=function(){}，功能比window.onload更强大
-
window.onload一个页面只能写一个，但是可以写多个$() 而不冲突
-
window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早
-
完整形式是$(document).ready(…….);
jQuery(document).ready(…….);
作用2： $(selector)
-
选择器。jQuery具有强大的选择器功能，后面会有专门章节进行介绍
-
-
jQuery的基本语法：$(selector).action
获取页面内容:$(selector)
操作页面的内容：action
-
控制页面样式
-
访问和操作DOM元素
-
事件处理功能
-
动画功能
-
Ajax功能（jQuey不仅封装了JavaScript，还封装了Ajax）
-
三、JQuery对象和DOM对象
DOM对象和jQuery对象分别拥有一套独立的属性和函数：
-
DOM对象：直接使用JavaScript获取的节点对象 className innerHTML value
-
jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法 addClass() html() val()
互相转换：
-
DOM对象转换成jQuery对象 $(DOM对象)
-
jQuery对象转换成DOM对象 jQuery对象[index] jQuery对象.get(index)
四、JQuery选择器
回顾JavaScript获取元素节点-
getElementById( ) ：返回一个元素节点对象
-
getElementsByName( )：返回多个元素节点（节点数组）
-
getElementsByClassName( ) ：返回多个元素节点对象（节点数组）
-
getElementsByTagName( ) ：返回多个元素节点对象（节点数组）
1. 基础选择器
-
标签选择器
$("a") -
ID选择器
$("#id")$("p#id") -
类选择器
$(".class")$("h2.class") -
通配选择器
$("*") -
并集选择器
$("elem1， elem2， elem3") -
后代选择器
$(ul li) -
父子选择器
$(ul > li) -
后面第一个兄弟元素节点
prev + next -
后面所有的兄弟元素节点
prev ~ next
2. 属性选择器
-
[attribute] 匹配包含给定属性的元素
-
[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性
-
[attribute=value] 匹配给定的属性是某个特定值的元素
-
[attribute!=value] 匹配所有属性不等于特定值的元素
-
[attribute^=value] 匹配给定的属性是以某些值开始的元素
-
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
-
[attribute*=value] 匹配给定的属性是以包含某些值的元素
3. 位置选择器
针对整个页面而言的位置选择器
-
:first 获取第一个元素
-
:last 获取最后一个元素
-
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
-
:even匹配所有索引值为偶数的元素，从 0 开始计数
-
:eq(n) 匹配一个给定索引值的元素，从0开始计数
-
:gt(n) 匹配所有大于给定索引值的元素
-
:lt(n) 匹配所有小于给定索引值的元素
针对上级标签而言的位置选择器
-
:first-child 匹配第一个子元素
-
:last-child 匹配最后一个子元素
-
:nth-child(n) 匹配其父元素下的第N个子元素
-
:nth-child(odd|even) 匹配其父元素下的奇偶元素
4. 表单选择器
关于表单项的选择器
-
:text :password :radio :checkbox :hidden :file :submit
-
:input 匹配所有 input， textarea， select 和 button 元素
注意：$("input")和$(":input")的区别
-
$("input")：标签选择器，只匹配input标签
-
$(":input")： 匹配所有 input， textarea， select 和 button 等元素
关于表单项状态的选择器
-
:selected :checked :disabled
五、JQuery事件机制
事件驱动: 监听对应的事件, 触发了对应的事件, 事件会被监听到, 监听到事件后驱动函数的执行.
注意：
-
使用jQuery给元素绑定事件时，要写在页面加载完事件内。
-
这里的事件可以是 click、blur、focus等等。不要写on，因为之前在js中我们写的是onClick。
六、JQuery动画
1. 显示和隐藏动画
实现显示动画效果方法：show()
实现隐藏动画效果方法：hide()
实现切换显示和隐藏动画效果方法：toggle()
可以设置参数，单位是毫秒，代表在该时间内完成隐藏/显示
2. 滑动动画
实现向下滑动动画效果方法：slideDown()
实现向上滑动动画效果方法：slideUp()
实现滑动切换效果方法：slideToggle()
可以设置参数，单位是毫秒，代表在该时间内完成滑动动画
3. 淡入淡出动画
实现淡入动画效果方法：fadeIn()
实现淡出动画效果方法：fadeOut()
实现淡入淡出切换效果方法：fadeToggle()
实现淡入到指定透明度效果方法：fadeTo() 有两个参数，第一个是时间，第二个是透明度（0~1）
七、操作DOM
1. 操作文本
-
html() 相当于innerHTML
-
html() 获取文本节点（标签+文本）
-
html(标签) 添加标签，会覆盖原有的所有内容
-
-
text() 相当于innerText
-
text() 获取文本节点（文本）
-
text(文本内容) 添加文本，会覆盖原有的所有内容
-
2. 操作属性
-
attr(属性名) 获取属性值
-
attr(属性名, 属性值) 设置属性值
-
removeAttr(属性名) 移除属性
-
prop(属性名) 获取属性值
-
prop(属性名, 属性值) 设置属性值
-
jQuery 1.6新增加prop()方法。如checked, selected、readonly、disabled 使用prop()时，返回值是true或者false，更加方便处理。
-
-
val() 获取value属性值
-
val(值) 设置value属性值
3. 操作元素
-
append()、appendTo() 添加子元素节点（末尾）
-
父元素节点.append(新的子元素节点)
-
新的子元素节点.appendTo(父元素节点)
-
-
prepend()、prependTo() 添加子元素节点（前置）
-
before() 、insertBefore() 添加平级元素节点（前面）
-
after()、insertAfter() 添加平级元素节点（后面）
-
parent() 获取父元素节点
-
remove() 删除元素节点
-
empty() 删除子元素节点
八、操作CSS
1. 直接操作CSS
-
css(css)
-
css(css,val)
-
css({css1:val1,css2:val2,…..})
总结：
-
本质上是修改指定元素的style属性的值。
-
缺点是会涉及多个css样式的修改，稍显繁琐。可以将多个css样式定义为class类样式，直接操作class属性值即可。
2. 操作类样式
-
addClass(值) 追加类属性值，而不是覆盖
-
removeClass(值) 移除属性值
-
toggleClass(值) 不存在，添加。存在，移除
总结：
-
本质是修改指定元素的class属性值。
-
addClass()只负责追加，而不是覆盖，所以必要时需要和removeClass()结合使用