一、初始jquery

1. 什么是jquery

jQuery是一个快速、简洁的JavaScript框架。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

可以将jQuery库下载到本地，然后引入本地的jQuery库。

可以直接引入外网资源

2.实例：操作dom元素，给它添加点内容，加背景色，加颜色，加边框，加点击事件

原生js：

jquery：

2.jQuery的方法链式调用的原理

3. jquery选择器

全局选择器

标签选择器

类选择器

id选择器，注意：如果id值相同，只能获取第一个元素

后代选择题

属性选择器

 在css中选择器怎么写，在jQuery中选择器就怎么写

 jQuery就是通过各种选择器，获取对应的dom元素，如果获取的是多个dom元素，不需要遍历元素就可以操作元素。

4. jquery获取元素的方法

使用jquery选择器返回的对象是一个集合

prev()方法，返回同级的上一个元素

prevAll()方法，返回同级的上面所有元素

注意：方法里面还可以继续添加选择器，针对指定的元素

next()方法，返回同级的下一个元素

相邻的下一个li元素

nextAll()方法，返回同级的下面所有元素

相邻的下面所有li元素

 siblings()方法，返回同级的所有元素

parent()方法，获取父级元素

children()方法，获取所有的子元素

 parents()方法，默认是获取所有的父级元素，所有在使用该方法时，需要添加选择器

$是jQuery的简写

children()方法，返回所有的子元素

 find()方法，返回所有的后代元素

first()方法，返回第一个元素

last()方法，返回最后一个元素

eq(索引)方法，返回指定位置的元素，注意：位置从0开始。

5. 显示和隐藏方法

显示按钮点击事件

show()方法，显示元素

show()方法的第一个参数是显示时间：fast(快速),slow(慢速),normal(正常速度),也可以传递具体的毫秒数

show()方法的第二个参数是显示后的回调函数：比如显示后，发生请求获取数据

隐藏按钮点击事件

显示/隐藏按钮点击事件

下拉显示按钮点击事件

上拉隐藏按钮点击事件

下拉显示/上拉隐藏

淡入

淡出

淡入/淡出

 显示

隐藏

6.js对象和jquery对象之间的转换

获取dom元素，返回一个js对象

获取dom元素，返回一个jq对象

将js对象转为jq对象的方式：直接通过$()工厂函数

 jq对象，返回的是一个集合，通过集合的下标，返回的就是js对象。

使用get()方法，也可以通过集合的下标，返回一个指定的js对象

二、jquery-ajax

1. 选项卡

 方式一:原生js

      获取所有的标题li

       获取所有的内容li

方式二:jQuery

2. get&post

get请求

get请求，需要传参数

post请求

3. 制作导航条

$('<标签名/>') 是jquery创建标签的方式

html()方法 ==> js中的innerHTML属性

text()方法 ==> js中的innerText属性

append()方法 ==> js中的appendChild()方法

加载菜单的方法

4. 三级菜单

5. 下拉框省市联动效果

获取省份信息

省份下拉框选项改变后事件

城市下拉框选项改变后事件

6.ajax

get和post方法的四个参数分别是：地址，参数，回调函数，返回数据的格式

返回数据的格式默认是json。参数可以不传。

$.get('地址','参数','回调函数','json/xml/text/html')

$.post('地址','参数','回调函数','json/xml/text/html')

ajax方法，是发送请求的通用方法，参数是一个配置对象

通过配置对象的属性，设置请求的类型，参数，回调函数等等。

三、经典案例

轮播图效果

轮播图的图片数组

定义定时器变量

轮播索引

循环图片数组，生成小点

调用轮播方法

调用开始轮播方法

鼠标进入轮播区域

鼠标离开轮播区域    

小点注册点击事件

左箭头点击事件

右箭头点击事件

开始轮播方法

轮播方法

四、jquery方法

1. 内部插入方法

获取ul对象

创建一个li对象

append()方法，用于在内部添加成员，方式是：父级.append(子级)

appendTo()方法，用于在内部添加成员，方式是：子级appendTo(父级)

 prepend()方法，表示在上面添加

2. 外部插入方法

 after()方法，在元素的外面的下面插入元素

 insertAfter()方法，跟after()方法类似，只是两个元素的位置相反

before()和insertBefore()方法，用于在元素的上面插入元素

3. 扩展方法

 extend()方法，如果只传一个参数，是给jquery自身扩展方法

extend()方法，如果只传多个参数，是将后面对象的成员扩展给第一个对象

如果后面对象的方法跟原对象的方法名重复，会覆盖

4. on方法和off方法

click方法内部会先获取到选择器找到所有元素

如果元素在注册事件之后添加，该事件方法不会执行。

遇到这种情况，通常会将事件委托给它的父级注册

 $('.one>div').click(function(){

        alert('哈哈！')

     })

通过on方法，给子元素添加指定的事件

on方法的参数

参数1：事件名称

参数2：获取子元素的选择器

参数3：事件方法

注意：on方法可以添加多个事件方法

click方法内部会先获取到选择器找到所有元素

如果元素在注册事件之后添加，该事件方法不会执行

遇到这种情况，通常会将事件委托给它的父级注册

         $('.one>div').click(function(){

             alert('哈哈！')

         })

on方法的第二个参数不传，就是给自己注册事件

5.节流和防抖

节流：连续触发时，在指定的时间内只触发一次

定义节流时间

防抖：连续触发只执行一次，等待指定的时间后，才能触发第二次

定义防抖时间