1.什么是jQuery?

• jQuery是一个轻量级的“写的少，做的多”的JavaScript函数库
• jQuery是当前最流行的JavaScript框架
• 包含以下功能：
  • HTML元素选取
  • HTML元素操作
  • CSS操作
  • HTML事件函数
  • JavaScript特效和动画
  • HTML DOM遍历和修改
  • AJAX
  • Utilities
  • 大量插件
• jQuery有两个版本
  • Production version 用于实际的网站中，已被精简和压缩
  • Development version 用于测试和开发（未压缩，是可读的代码）
• 如果不希望下载jQuery,也可以通过CDN（内容分发网络）引用它。

2.jQuery语法

1.jQuery语法

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作

基础语法：$(selector).action()
        - 美元符号定义jQuery
        - 选择符(selector)”查询“和”查找“HTML元素
        - jQuery的action()执行对元素的操作
        
        
   实例：$(this).hide() 隐藏当前元素

2.文档就绪事件

$(document).ready(function(){
    //开始写jQuery代码
});

为了防止文档在完全加载（就绪）之前运行jQuery代码
如果在文档没有完全加载之前就运行函数，操作可能失败

简洁写法：
$(function(){
    //开始写jQuery代码
});

3.jQuery选择器

• jQuery选择器允许您对HTML元素组或单个元素进行操作。
• jQuery选择器基于元素的id、类、类型、属性、属性值等”查找“（或选择）HTML元素（基于已经存在的CSS选择器）
• 特殊选择器

 - $("*")  选取所有元素
 - $(this) 选取当前HTML元素
 - $("p.info") 选取class为info的<p>元素
 - $("p:first") 选取第一个<p>元素
 - $("ul li:first") 选取第一个<ul>元素的第一个<li>元素
 - $("ul li:first-child") 选取每个<ul>元素的第一个<li>元素
 - $("[href]") 选取带有href属性的元素
 - $("a[target='_blank']") 选取所有target属性值等于“_blank”的<a>元素
 - $(":button") 选取所有type=”button“的<input>元素和<button>元素
 - $("tr:even") 选取偶数位置的<tr>元素
 - $("tr:odd") 选取奇数位置的<tr>元素

3.jQuery事件

1.什么是事件？

• 页面对不同访问者的响应叫做事件
• 事件处理程序指的是当HTML中发生某些事件时所调用的方法
• 常见DOM事件：
  | 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
  | ------------------- | -------- | ------------- | ------- |
  | click | keypress | submit | load |
  | dbclick（双击元素） | keydown | change | resize |
  | mouseenter（鼠标指针穿过） | keyup | focus（元素获得焦点） | scroll |
  | mouseleave | | blur（元素失去焦点） | unload |
  | mouseup（在元素上松开鼠标） | | hover（光标悬停事件） | |
  | mousedown（在元素上按下鼠标） | | | |
  在jQuery中，大多数DOM事件都有一个等效的jQuery方法

4.jQuery获取内容和属性

1.获得内容 - text()、html()以及val()

• text() 设置或返回所选元素的文本内容
  • html()设置或返回所选元素的内容（包括HTML标记）
    • val()设置或返回表单字段的值

2.获取属性 - attr()

• attr() 设置/改变属性值，允许同时设置多个属性

5.添加新的HTML内容

可以接收无限数量的新元素

• append() 在被选元素的结尾插入内容
• prepend() 在被选元素的开头插入内容
• after() 在被选元素之后插入内容
• before() 在被选元素之前插入内容

6.删除元素/内容

• remove() 删除被选元素及其子元素（也可接受一个参数，允许您对被删元素进行过滤,该参数可以是任何 jQuery 选择器的语法）
• empty() 从被选元素中删除子元素

7.jQuery操作CSS

• addClass() 向被选元素添加一个或多个类
• removeClass() 从被选元素删除一个或多个类
• toggleClass() 对被选元素进行添加/删除类的切换操作
• css() 设置或返回样式属性
  • 设置单个CSS属性 css("propertyname","value");
  • 设置多个CSS属性 css({"propertyname":"value","propertyname","value",...});

8.jQuery遍历

1.向上遍历DOM树：

• parent() 返回被选元素的直接父元素
• parents() 被选元素的所有祖先元素，一路向上直到文档的根元素
• parentsUntil() 返回介于两个给定元素之间的所有祖先元素

2.遍历后代

• children() 返回被选元素的所有直接子元素
• find() 返回被选元素的后代元素，一路向下直到最后一个后代

3.水平遍历

• siblings() 返回被选元素的所有同胞元素，也可以使用可选参数来过滤对同胞元素的搜索
• next() 返回被选元素的下一个同胞元素
• nextAll() 方法返回被选元素的所有跟随的同胞元素
• nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
• prev()
• prevAll()
• preUntil()

4.过滤

• first() 返回被选元素的首个元素
• last() 返回被选元素的最后一个元素
• eq() 返回被选元素中带有指定索引号的元素,索引号从 0 开始
• filter() 选取匹配某项指定标准的元素
• not() 选取不匹配某项指定标准的元素

9.jQuery特效

1.隐藏和显示

• hide()
• show()
• toggle()

2.淡入淡出

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

3.滑动

• slideDown()
• slideUp()
• slideToggle()

4.jQuery方法链接

允许在相同的元素上运行多条jQuery命令

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

5.jQuery动画

$(selector).animate({params},speed,callback);
//必需的 params 参数定义形成动画的 CSS 属性。 
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 
//可选的 callback 参数是动画完成后所执行的函数名称。 

//默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
//如要对位置进行操作，需把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

stop(); //用于在动画或效果完成之前停止他们

10.jQuery杂项

• data() 向被选元素附加数据，或者从被选元素取回该数据
• removeData() 移除之前通过 data() 方法设置的数据
• each() 为每个匹配元素规定要运行的函数
• get() 获取由选择器指定的 DOM 元素
• index() 返回指定元素相对于其他指定元素的 index 位置
• $.each()
• $.trim()
• $.now()