认识jQuery
jQuery是一个JavaScript函数库，极大地简化了JavaScript编程。
jQuery库可以通过一行简单的标记被添加到网页中
jQuery库包含的功能：
-
HTML元素选取
-
HTML元素操作
-
CSS操作
-
HTML事件函数
-
JavaScript特效和动画
-
-
AJAX
-
Utilities
引入jQuery
-
从
jquery.com下载jQuery库 -
从CDN中载入jQuery，如从百度、新浪、谷歌、微软等加载jQuery
jQuery语法
jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。
基础语法：$(selector).action()
-
美元符号定义jQuery
-
选择符selector“查询”和“查找”HTML元素
-
jQuery的action()执行对元素的操作
文档就绪函数：$(document).ready(function(){....});
jQuery选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| #id | $("#lastname") | id="lastname"的元素 |
| .class | $(".intro") | 所有class="intro"的元素 |
| element | $("p") | 所有的<p>元素 |
| .class.class | $(".intro.demo") | 所有class="intro"且class="demo"的元素 |
更多选择器，同类只列一个例：
:first、:last、:even、:odd-------------->例：$("p:first")，第一个<p>元素
:eq(index)、:qt(no)、:lt(no)、not(selector)---->例：$("ui li:eq(3)")，无序列表中第4个元素（索引从0开始）
:contains(text)、:empty、:hidden、:visible--->例：$("div:empty")，<div>标签下无子节点的所有元素
[attribute]、[attribute=value]、[attribute != value]、[attribute $= value]
:input、:text、:password、:radio、:checkbox.......详参jQuery手册
jQuery事件
jQuery事件处理方法是jQuery中的核心函数。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。术语由事件“触发”经常会被使用 。
通常会把jQuery代码放到<head>部分的事件处理中。
由于jQuery是为处理HTML事件而特别设计的，徐遵循一下原则：
-
把所有jQuery代码置于事件处理函数中
-
把所有事件处理函数置于文档就绪事件处理器中
-
把jQuery代码置于单独 .js 文件中
-
如果存在名称冲突，则重命名jQuery库
常用事件方法
| 事件 | 描述 |
|---|---|
| ready(fn) | 文档就绪事件 |
| blur() | 触发、或将函数绑定到指定元素的blur事件 |
| change() | 触发、或将函数绑定到指定元素的change事件 |
| click() | 触发、或将函数绑定到指定元素的click事件 |
| dbclick() | 触发、或将函数绑定到指定元素的dbclick事件 |
| focus() | 触发、或将函数绑定到指定元素的focus事件 |
| keydown() | 触发、或将函数绑定到指定元素的keydown事件 |
| mousedown() | 触发、或将函数绑定到指定元素的mousedown事件 |
| scroll() | 触发、或将函数绑定到指定元素的scroll事件 |
| select() | 触发、或将函数绑定到指定元素的select事件 |
| submit() | 触发、或将函数绑定到指定元素的submit事件 |
| error() | 触发、或将函数绑定到指定元素的error事件 |
| live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
| toggle() | 绑定两个或多个事件处理函数，当发生轮流的click事件执行 |
| trigger() | 所有匹配元素的指定事件 |
| on() | 向匹配元素附加一个或更多事件处理器 |
绑定和解除绑定事件
bind()、unbind()--->$("btn").bind("click",fn)绑定一个事件，可绑定多个。截至到jQuery 3.0，bind()已被弃用
在jQuery 1.7之后，将事件处理程序附加到文档的方法被.on()，.off()。
事件的目标
target：指的是被触发时的目标，如点击带click事件的div，则target就是div
currentTarget：指的是现在的目标，因为事件冒泡，所以是body
事件的冒泡
event.stopPropagation()：防止事件冒泡DOM树，防止任何父处理程序被通知事件。（不向父级冒泡）
event.stopImmediatePropagation()：保持其余的处理程序不执行，并防止事件冒泡DOM树。（不向所有冒泡）
自定义事件（了解）
jQuery HTML
jQuery拥有可操作HTML元素和属性的强大方法
jQuery提供了一系列与DOM相关的方法，这使访问和操作元素、属性变得容易
jQuery获取/设置
-
text()--设置或返回所选元素的文本内容。且可带有回调函数，text(function(i,origText){.. return ...})
-
heml()--设置或返回所选元素的内容，包括HTML标签。可带回调函数，同上。
-
val()--设置或返回表单字段的值。可带回调函数，同上。i为被选元素列表中当前元素的下标，origText为旧值
-
attr(type)--获取属性值。可带回调函数，attr(type，function（i,origText）{return ....})
jQuery添加
-
append()--在被选元素的结尾插入内容。（不换行插入）
-
prepend()--在被选元素的开头插入内容
-
after()--在被选元素之后插入内容。（换行后插入）
-
before()--在被选元素之前插入内容
jQuery删除
-
remove()--删除被选元素（及其子元素）
-
empty()--从被选元素中删除子元素
jQuery CSS类
-
addClass()--向被选元素添加一个或多个类
-
removeClass()--从被选元素删除一个或多个类
-
toggleClass()--对被选元素进行添加/删除类的切换操作
-
css()--设置或返回样式属性
-
position()--返回第一个匹配元素相对于父元素的位置
-
offset()--返回第一个匹配元素相对与文档的位置
jQuery尺寸
-
width()--设置或返回元素的宽度（不包含内边距、边框或外边距）
-
height()--设置或返回元素的高度（不包括内边距、边框或外边距）
-
innerWidth()--返回元素的宽度（包含内边距，不包含边框和外边距）
-
innerHeight()--同上
-
outerWidth()--返回元素的高度（包括内边距、边框和），加true时，包括外边距
-
outerHeight()--同上
jQuery效果
显示、隐藏、淡入、淡出、滑动、动画
显示隐藏滑动
参数（按顺序）：speed可选，callback可选
-
hide()--隐藏元素
-
show()--显示隐藏元素
-
toggle()--隐藏/显示元素
-
slideUp()--向上滑动元素
-
slideDown()--向下滑动元素
-
slideToggle()--向上/向下切换滑动元素
淡入淡出
参数（按顺序）：speed可选-->规定效果的时长。callback可选--->是效果完成后执行的函数名称
-
fadeIn()------淡入
-
fadeOut()----淡出
-
fadeToggle()----淡入淡出切换，相当于开关
-
fadeTo()-----淡入或淡出到一定透明度。透明度：0~1。用法：fadeTo(speed,opacity,callback)
jQuery-AJAX
什么是AJAX？
AJAX=异步JavaScript和XML。（Asynchronous JavaScript And XML ）
AJAX是与服务器交换数据的艺术，它在不重新加载全部页面的情况下，实现了对部分网页的更新。
GET请求
语法：$(selector).get(url，data，success(response，status，xhr)，dataType)
参数：url必须，data可选，success可选（请求成功是允许函数），dataType可选（服务器响应数据类型）
额外参数：response-包含来自请求的结果数据，status-包含请求的状态，xhr-包含XMLHttpRequest对象
dataType:可能类型有，xml，html，text，script，json，jsonp
该函数是简写的AJAX函数，等价于：
$.ajax({
url:url,
data:data,
success:success,
dataType:dataType
});
POST请求
语法：$(selector).post(url，data，success(data，textStatus，jqXHR)，dataType)，等价于
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
加载
语法：$(selector).load(URL,data,callback);
jQuery遍历
jQuery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。以某项选择开始，并沿着这个选择，直到抵达你期望的元素位置。
向上遍历DOM树
-
parent()--返回被选元素的直接父元素。该方法只会向上一级对DOM树进行遍历。
-
parents()--返回被选元素的所有祖先元素。它一路向上直到文档的根元素
<html>。 -
parentsUntil()--返回介于两个给定元素之间的所有祖先元素。记忆：向上返回所有祖先元素直到...
向下遍历DOM树
-
children()--返回被选元素的所有直接元素。该方法指挥向下一级对DOM树进行遍历
-
find()--返回被选元素的后代元素，一路向下直到最后一代。
水平同胞遍历
-
siblings()--返回被选元素的所有同胞元素，但不包括自己。siblings：兄弟姐妹
-
next()--返回被选元素的下一个同胞元素。该方法只返回一个元素。
-
nextAll()--返回被选元素的所有跟随的同胞元素
-
nextUntil()--返回介于两个给定参数之间的所有跟随的同胞元素
-
prev()--在DOM树中向前遍历，下同，意思参上
-
prevAll()
-
prevUntil()
过滤
三个最基本的过滤方法是：first()，last() 和 eq()，它们允许基于在其一组元素中的位置来选一个特定的元素。
其他过滤方法，比如filter() 和 not() 允许选取匹配或不匹配的某项指定标准的元素。
-
first()--返回被选元素的首个元素。
-
last()--返回被选元素的最后一个元素
-
eq()--返回被选元素中带有指定索引的元素
-
filter()--该方法允许自定义一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
-