Jquery

基本选择器

语法：$（选择器）
返回值：满足条件的所有元素(id选择器除外)
=>放在一个数组里面返回给你
=>都是一个集合的形式
=>我们管这个集合叫做jquery元素集css如何捕获标签，这里就可以怎么填写参数

console.log($('div'))
console.log($('#box'))
console.log($('.box'))
console.log($('div > ul > li:nth-child(odd)'))

特殊选择器

特殊选择器
语法：$（选择器）
=>对你已经存在的选择器进行修饰
1.:first
2.:last
3.：eq(索引)
=>按照索引排列的第几个
=>注意：从0开始
工
4.:odd
=>按照索引排列的奇数个
5.:even
=>按照索引排列的偶数个

Jquery的筛选器

jQuery 的筛选器
+对jQuery的元素集合进行二次筛选
+注意：只有jQuery的元素集合才可以使用，原生DoM对象不能使用
1.first()
=>元素集合里面的第一个
2. last()
=>元素集合里面的最后个
3.eq(索引)
=>元素集合里面指定索引的那一个
4. next(
=>当前元素的下一个元素
5. nextAll()
=>语法
1.元素集合.nextA11（）
获取到当前元素后面的所有兄弟元素
2.元素集合.nextA11（选择器）
获取到当前元素后面所有元素中指定选择器的那一个
6. nextUntil()
=>语法
1．元素集合.nextUntil（）
获取到当前元素后面所有的兄弟元素
2.元素结合.nextuntil（选择器)获取到当前元素后面所有兄弟元素，直到选择器元素为止（不包含）
7. prev()
=>当前元素的上一个元素
8. prevAl1()
=>语法
1.元素集合・prevA11（）
获取到当前元素上面的所有兄弟元素
2.元素集合.prevA11(选择器）
获取到当前元素上面的所有兄弟元素中指定选择器的那一个
10. parent()
=>获取到当前元素的父元素

11. parents()
    =>语法
    1.元素集合・parents(）
    拿到结构父级的所有父元素
    2.元素集合.parents(选择器）
    拿到结构父级里面所有父元素中符合选择器的那一个元素
12. children()
    =>语法
    1.元素集合.children(）
    拿到该元素的所有子元素
    拿到该元素的所有子元素
    1.元素集合.children(选择器）
13. sinblings()
    =>拿到该元素的所有兄弟元素，自己除外
14. find()
    =>找到该元素中所有后代元素里面符合选择器条件的元素
15. index()
    =>获取到的就是该元素在其父元素里面的索引位置

操作文本

jQuery 操作文本内容
操作元素内的文本和超文本
注意：属于jQuery的方法只能jquery元素集合调用，原生DoM不能调用

1. html()
   =>语法：
   1．元素集合.html（）
   获取该元素的超文本内容，以字符串的形式返回
   获取的时候为了保证html结构只能获取第一个的元素的超文本内容
   2.元素集合.html（‘内容’）
   设置元素集合内元素的超文本内容
   完全覆盖式的写入
   隐式迭代：元素集合内有多少元素，就写入多少元素
2. text()
   =>语法：
   1．元素集合.text（）
   获取该元素的文本内容，以字符串的形式返回
   因为是文本内容，不涉及 html结构，所以拿到的是所有元素的文本内容
   以一个字符串的形式返回
   2.元素集合.text（‘内容’）
   设置元素集合内元素的文本内容
   完全覆盖式的写入
   隐式迭代：元素集合内有多少元素，就写入多少元素
3. val()
   =>语法：
   1．元素集合.val（）
   +获取元素集合内元素的 value 值
   2.元素集合.val（‘内容’）
   +设置元素集合内元素的 value 值
   +完全覆盖式的写入

操作类名

1. addClass()
   +添加元素类名
2. removeClass()
   +删除元素类名
3. hasClass()
   +判断有没有类名
4. toggleclass()
   +切换类名
   +如果原先有，就是删除
   +如果原先没有，就是添加

操作元素样式

jQuery 操作元素样式

1. css()
   1-1.语法：元素集合.css(‘width’)
   =>获取元素的某一个样式的值，不管是行内还是非行内都能获取到
   1-2.语法：元素集合.css（‘样式名’，‘样式值’）
   =>设置元素的行内样式
   =>隐式迭代：元素集合内有多少元素设置多少元素
   =>设置的时候，如果你需要设置的单位是px可以不写
   1-3.语法：元素集合.css（｛样式名1：样式值1，样式名2：样式值2，…}）
   =>批量给元素设置行内样式
   隐式迭代：元素集合内有多少元素设置多少元素
   =>
   设置的时候，如果你需要设置的单位是px可以不写
   =>

DOM元素如果象用jquery 的方式，使用$（）包起来

事件绑定

jQuery 的事件绑定

1. on()
   +事件绑定，根据传递不同的参数做不同的事情
   1-1.on（事件类型，事件处理函数）
   =>直接绑定事件，有隐式迭代
   1-2.元素结合.on(事件类型，选择器，事件处理函数）
   =>事件委托的绑定
   =>把选择器元素委托给元素集合里面的元素
   =>注意：I选择器元素要是元素集合内元素的后代元素
   1-3.元素集合.on(事件类型，复杂数据类型，事件处理函数）
   =>给元素集合内的所有元素绑定事件
   工
   =>这个复杂数据类型是事件触发的时候，传递给事件里面的参数
   1-3.元素集合.on(事件类型，复杂数据类型，事件处理函数）
   =>给元素集合内的所有元素绑定事件
   =>这个复杂数据类型是事件触发的时候，传递给事件里面的参数
   =>在事件对象里面有一个叫做data的成员，就是你传递进来的参数
   1-4.元素集合.on(事件类型，选择器，数据，事件处理函数）
   =>事件委托的形式，带上传递参数
   =>把选择器所属的事件，委托给了元素集合内的事件
   =>数据位置，就是在事件触发的时候传递给事件处理函数的参数
   1-5.元素集合.on({事件类型1：事件处理函数，事件类型2：事件处理函数，
   =>一次性给元素绑定多种事件
   =>没法传递参数和事件委托了
   
2. one()
   +用来绑定事件的方法
   +和on(）方法的参数和使用形式一模一样
   +只不过绑定的事件只能执行一次
3. off()
   用来解除事件绑定的
   语法：
   1.元素集合.off(事件类型)
   2.元素集合.off(事件类型，事件处理函数
   
4. trigger()
   用Js代码的方式来触发事件
   语法：元素集合.trigger(事件类型)

事件函数

jQuery 的事件函数
jQuery 给我们提供了一些简洁的绑定事件的方式
把一些常用事件直接封装成了函数
click()
mouseover()
这些方法可以直接使用，带有隐式迭代
=>快捷绑定事件
=>语法：
1.元素集合.事件类型(事件处理函数）
2.元素集合.事件类型（传入事件处理函数的参数，事件处理函数）
jquery 唯一的特殊事件
hover()
一个结合了移入移出的事件
语法：元素集合.hover(移入的事件处理函数，移出的事件处理函数）
->如果你只传递一个参数，那么移入移出都触发

Jquery 节点操作

jQuery 的节点操作
+原生 Js的节点操作
=>创建节点，插入节点，删除节点，替换节点，克隆节点

• jQuery 的节点操作
  =>创建节点，插入节点，删除节点，替换节点，克隆节点

1．创建节点

• $（html结构字符串）=>当$（）里面传递一个选择器的时候，就是获取元素
  =>当$（）里面传递一个html结构字符串的时候，就是创建元素节点=>当$（）里面传递一个DoM元素节点的时候，就是转换成jQuery 元素结合

2。插入节点

内部插入(父子关系的插入）
2-1. append()
=>语法：父元素.append(子元素）
=>把子元素插入到父元素内部，放在末尾的位置
2-2. appendTo()
=>语法：子元素.appendTo(父元素）
=>把子元素插入到父元素内部，放在末尾的位置
2-3. prepend()
=>语法：父元素.prepend(子元素）
=>把子元素插入到父元素内容，放在最前面的位置
2-4. prependTo()
工
=>语法：子元素.prependTo(父元素）

外部插入

2-5. after()
=>语法：存在元素.after(插入元素）
=>把插入元素排在存在元素的后面，以兄弟关系出现
2-6. insertAfter()
=>语法：插入元素.insertAfter(存在元素）
=>把插入元素排在存在元素的后面，以兄弟关系出现
2-7. before()
=>语法：存在元素.before(插入元素）
=>把插入元素排在存在元素的前面，以兄弟关系出现
2-8. insertBefore()
=>语法：插入元素.insertBefore(存在元素）
=>把插入元素排在存在元素的前面，以兄弟关系出现

4.替换节点

4-1. replacewith()
=>语法：换下节点.replace(换上节点）
4-2. replaceAll()
=>语法：换上节点.replaceAl1（换下节点）

5.克隆节点

5-1. clone()
=>语法：元素集合.clone（）
=>必然携带所有节点过来
=>第一个参数默认是false，表示是否克隆元素本身的事件，选填true
=>第二个参数默认是跟随第一个，表示是否克隆元素后代节点的事件，选填

操作元素属性

jQuery 操作元素属性
几种属性操作
=>原生属性，idclass src.….
=>自定义属性，getAttribute(）.….
=>H5自定义属性，dataset
data-xxx
jQuery 有三种操作属性的方法
=>attr(）和 removeAttr(）
=>prop(）和removeProp(）
=>data()和 removeData()
1.attr()和 removeAttr()
1-1. attr()
=>语法：元素集合.attr（属性名)
->获取元素的该属性，主要用来获取标签属性，包括一些自定义属性
=>语法：元素集合.attr(属性名，属性值）
->设置元素的标签属性，只是把属性设置在标签上，当作一个自定义属性使用
->对于原生属性有些有用，有些没有用
=>注意：
->设置的时候，需要两个参数
->设置的不管是什么数据类型，都会变成字符串类型
->有的原生属性好使，有的不好使
1-2. removeAttr()
=>语法：元素集合.removeAttr(属性名）
->删除元素身上的自定义属性
->idclass等属性也可以删除
=>注意：
-多用于删除 attr 方法设置的属性
2.prop(）和 removeProp(）
2-1. prop()
=>语法：元素集合.prop（属性名）
->获取元素的原生属性，也可以获取元素的自定义属性
->但是 attr 方法设置的自定义属性他获取不到
=>语法：元素集合.prop(属性名，属性值)
->主要设置元素的原生属性，也可以设置自定义属性
->他设置的自定义属性不会显示在标签上，而是存储在元素身上
=>注意：
->设置的自定义属性不会显示在标签上
->你设置的时候是什么数据类型，获取到的时候还是什么数据类型
->attr 设置的自定义属性他拿不到

2-2. removeProp()
=>语法：元素集合.removeProp(属性名)
->删除元素的属性，但是只能删除由prop设置的自定义属性
->原生属性idclass…不能删除
3.data(）和 removeData()
3-1. data()
=>语法：元素集合.data（属性名）
->获取使用data()方法存储的数据，获取元素身上 data-xxx 的属性
=>语法：元素集合.data（属性名，属性值）
->设置的时候，只是把数据存储在元素身上的某一个对象空间内
->但是不会出现在标签上，不会由 data-xxx的属性出现
=>注意：
的属性
->可以获取元素标签上 data-xxx
->但是不能设置标签上 data-xxx
的属性
3-2. removeData()
->只能删除由data(）方法设置的属性
-不能删除元素身上 data-xxx的属性

获取元素尺寸

+获取元素尺寸有三套方法四种使用方式
1.width(）和 height(）
=>语法：元素集合.width（）或者元素集合.height（）
=>获取的是元素内容位置的尺寸
2.innerwidth(）和 innerHeight（）
=>语法：元素集合.innerwidth(）或者元素集合.innerHeight(）
=>获取的是元素内容+padding 区域的尺寸
3.outerwidth(）和 outerHeight(）
=>语法：元素集合.outerwidth(）或者元素集合.outerHeight（）
=>获取的是元素内容+padding+ border 区域的尺寸

操作位置关系

1. offset()
+是一个读写的方法
+读取
=>语法：元素集合.offset（）
=>返回值：一个对象，里面包含一个x信息一个y信息
=>相对谁：相对页面左上角的绝对坐标
=>注意：读取出来是一个对象，你需要值得时候，要继续。
不能继续链式编程
设置
=>语法：元素集合.offset（{top：xxx，left：xxx})
=>设置的：设置的是相对于页面左上角的绝对位置
=>例子：$(‘div’）.offset({top:30,left：30}）
->一定会把这个div放在距离页面左上角30 30的位置
=>注意：你设置的时候，如果父子元素都要动
考虑先后顺序
2. position()
+是一个只读的方法
读取：
=>语法：元素集合.position（）
=>返回值：一个对象，里面包含一个x信息一个y信息
=>就是元素的定位关系
=>如果你定位的是 right 和 bottom,那么会自动计算成 left 和top

Jquery基础动画

1. show()
   +显示
2. hide()
   +隐藏
3. toggle()
   +切换，本身显示就隐藏，本身隐藏就显示
   上面三个方法操作的display：none和block
   三个的语法是一样的
   =>方法名（运动时间，运动曲线，回调函数）
   =>运动时间：多长时间运动结束
   =>运动曲线：什么方式运动
   =>回调函数：运动结束后触发

折叠动画

jQuery 的折叠动画

1. slideDown()
   +下拉显示
2. slideUp()
   +上拉隐藏
3. slideToggle()
   +切换显示和隐藏
   =>方法名（运动时间，运动曲线，回调函数）
   =>运动时间：多长时间运动结束
   =>运动曲线：什么方式运动
   =>回调函数：运动结束后触发

渐显渐隐动画

+通过操作元素的opacity 达到效果

1. faseIn()
   +opacity
   0 ~ 1
2. fadeOut()
   opacity
   1 ~ 0
3. fadeToggle()
   切换
   以上三个方法的语法是一样的
   方法名(时间，运动曲线，回调函数)
4. fadeTo()
   +运动到指定透明度
   语法：fadeTo(时间，指定透明度，运动曲线，回调函数)

综合动画

1. animate()
   =>语法：animate({}，时间，运动曲线，回调函数）
   =>{}：书写你要运动的属性

停止动画

因为当你给一个元素设置动画以后
如果快速触发，会停不下来，直到你所有的触发都执行完毕为止
jquery 给我们提供两个临时停下动画的方法

1. stop()
   语法：元素集合.stop（）
   当代码执行到这句的时候，不管运动到什么程度，立刻停下来
   运动到什么位置就停止在什么位置
2. finish()
   语法：元素集合.finish（）
   当代码执行到这句的时候，不管运动到什么程度，直接去到运动结束位置
   直接完成本次动画

回顶部

页面回到顶部，一定要运动html元素

点击事件没有了
因为span 覆盖在了li身上，你点击到的都是 span
解决方法：

手风琴

1.给 1i绑定一个鼠标移入事件
->自己变大，其他的变小
->为什么会下来
->布局是浮动布局
->一行放不下就会下来
->先让自己变大，让兄弟元素变小
->运动的原理就是定时器，每次动一点点
->在运动的时候，第一瞬间，先自己变大一点点，此时兄弟元素还没有变呢
->就在这一个瞬间，一行放不下了
=>怎么解决
->先动兄弟元素，在动自己(改变顺序）
->在第一个瞬间，是在变小

鼠标跟随

1.给每一个li绑定移入移出事件
=>移入的时候显示div
=>移出的时候隐藏div
=>移入的时候替换img标签的src
2.给每一个1i绑定移动事件
=>再移动事件里面获取坐标随时赋值
=>哪一组坐标？
->offset 目标元素的左上角
->client 可视窗口
文档流
-> page
->因为offset（）设置的坐标是按照文档流左上角设置的
->我拿到的坐标也应该是相对于文档流左上角

发送ajax请求

jQuery 发送一个 post 请求
jQuery，提供了一个全局方法叫做$.post（）专门用来发送post请求发送post请求=>语法：$.post（地址，携带给后端的数据，回调函数，期望后端返回的数据类型）
=>四个参数的意义和$.get（）一模一样\ast \ast 使用\ast \ast =>语法：$.ajax(options)
=>options：就是本次请求的配置信息，是一个对象数据类型
配置信息里面可以填写的内容
1.url：请求地址，必填

2.async：是否异步，默认是异步(true)，可以选填非异步(false)

3.type / method：表示请求方式，默认是GET，可以选填其他请求方式
->大小写无所谓
4.data：传递给后端的参数
->可以是查询字符串的形式
->可以是对象的形式

5.dataType：期望后端返回的数据类型，是否进行JSON.parse(）解析

6.success:接收一个函数数据类型，表示成功的回调
7.error：接收一个函数数据类型，表示失败的回调
8.timeout：设置一个超时时间
->从发送请求开始计时，到达超时时间还没有接收到响应
->会直接取消本次请求
9.cache：是否缓存
->对于ajax请求默认缓存的（true)，可以选填（false)
缓存：
=>GET请求会自主缓存，为什么会缓存？
工
=>因为你两次发送同一个请求，浏览器就有可能会缓存下来

juquery发送ajax 的promise

jQuery 发送 ajax 请求
jQuery 对于ajax 的封装
除了回调函数的形式接收结果
还封装了promise的形式接收结果
一个$.ajax(）方法
=>你可以选择书写回调函数的形式
=>也可以选择promise的形式

ajax发送跨域请求

1.Jsonp
+前端利用script 标签和src 属性绕开同源策略
+和 ajax 没有关系，实际上不是在发送 ajax 请求
+实际上是在请求一个js文件
2．代理
+由一个同源的代理服务端转发请求
+对于前端来说，依旧是正常发送请求
+只不过把地址书写成代理地址
+依旧是直接使用$.ajax(）方法来发送+只不过url位置书写代理标识符3.cors+服务端允许指定客户端发送请求+和前端没有关系+前端正常发送请求使用$.ajax（）
工
jQuery 发送 jsonp 请求
+使用一个叫做$.ajax(）的方法

1. 因为jQuery 封装 ajax 函数的时候做了一个判断
   =>根据你 dataType 传递的值来判断
   => if (dataType ===‘jsonp’){
   //走一套动态创建 script 标签
   //动态添加src属性
   //动态插入到body
   //动他的删除 script
   } else
   //按照ajax的一套流程封装
   

ajax钩子函数

jQuery 的全局钩子函数
也叫做全局 ajax函数
出现在 ajax的不同阶段
再一个ajax的整个周期中，会在不同的位置执行的函数
我们管这种再一个事情的生命周期上各个不同时期触发的函数叫做钩子函数
=>不是自主触发的函数，而是钩挂再其他的事情上
=>由其他的事情发生过程中来触发我

2. ajaxstart()
   =>表再同一个作用域下多个ajax请求的时候
   =>第一个ajax 请求之前
3. ajaxSend()
   =>表示再每一个请求发送之前触发
   =>只要有一个请求要执行send方法了，就会先出发钩子函数
4. ajaxSuccess()
   =>表示再每一个请求成功之后触发
   =>只要有一个请求成功了，就会触发一次
   T
5. ajaxError()
   =>表示再每一个请求失败之后触发
   =>只要有一个请求失败了，就会触发一次
   =>根据jQuery判定的失败
6. ajaxComplete
   $(window).ajaxComplete(function (){
   有一个请求完成了
   console.log(
   }）

jquery多库并存

使用
1.要求你把jQuery引入再最后面
=>先暂时把变量民的所有权交给jQuery
2.执行一个方法，jQuery把变量名的所有权交出去
=>表示我不再占用这个名字了
2-1. noConflict()
->交出$的控制权
2-2. noConflict(true)
->交出 $和jQuery 的控制权

深浅拷贝

+三个词（描述对象和对象之间的关系）

0. 1．赋值
   =>把一个对象的地址赋值给另一个变量
   =>两个变量操作同一个空间
   2.浅拷贝
   =>把对象里面的每一个成员，复制一份一模一样的内容
   =>放到另一个对象里面
   =>当你有某一个对象成员是复杂数据类型的时候
   =>这个成员依旧是一样的
   =>只是操作对象里面一层可以没有关系，如果再深层次就会出现问题

   3.深拷贝
   

=>对象空间里面不管多少层，都是相对独立，没有关系
=>for in 遍历赋值
=>只要碰到某一个是复杂数据类型对象或者数组
=>再次进入到这个数据类型里面进行二次遍历
=>方案1：利用递归思想实现深拷贝
->把第一遍遍历放在一个函数里面
->如果遍历的时候，发现有一个数据是数组或者对象
->从新调用函数
=>方案2:json
->不管多复杂的数据类型，转换成json以后就是字符串
->字符串的赋值时基本数据类型
->赋值以后再转换回来

jquery深浅拷贝

jQuery 里面提供了一个进行深浅拷贝的方法
$ .extend()
=>语法：
1.$ .extend(对象1，对象2，对象3，…)
->把从第二个参数开始的每一个对象的数据拷贝到第一个对象中
->是一个浅拷贝
2.$.extend(true，对象1，对象2，对象3，…)
一>把从第个参数开始的每一个对象的数据拷贝到第二个对象中
一>是一个深拷贝

jquery插件扩展机制

• 1.扩展到jQuery本身，作为全局方法调用
  => 语法：$ .extend({你扩展的方法 }
  =>使用：$ .extend({a:function(){}})
  ->相当于扩展了一个a方法再 jQuery 本身
  ->如果你向调用，就书写$.a()
• 2.扩展到jQuery的原型上，就是给jQuery的元素集合使用
  =>语法：$ .fn.extend({你扩展的方法})
  =>使用：$ .fn.extend({a：function（）{}}）
  ->相当于扩展了一个a方法给jQuery，的元素集合
  ->如果你想调用，就书写$（选择器）.a（）

插件扩展全选

使用插件扩展
+扩展己写方法来操作全选
+先准备一些扩展的内容

1. selectAll
   +判断元素集合内是不是所有的元素的 checked 都是 true
   +将来使用的时候：$（元素）.selectA11（）
   =>返回一个结果，true 或者false
   =>true表示元素集合内所有的元素checked都是trueI
   =>false表示元素集合内至少有一个元素checked是false

2.=>将来你调用的时候 $（元素）.setchecked（）
=>你如果不传递，默认是true,全都设置checked为true
=>如果你传递了一个false,全都设置 checked 为 false
需要遍历元素集合
=>为了达到隐式迭代
我们封装的方法可以使用
=>但是使用完毕，到这里就结束了，不能继续链式编程了
=>因为要达到链式编程，每一个方法都要依靠元素集合调用
=>我这个方法执行完毕以后，返回值是 undefined
=>不能继续链式编程了
=>再方法里面this就是元素集合
-> return this
->就能向外返回一个元素集合
->就可以继续链式编程了
3.getChecked()
+这个方法拿到元素集合内第一个元素的checked 属性
判断 this 内有没有数据
=>如果有，那么就返回第一个checked 属性
=>如果没有，那么就返回false

jquery入口函数

jQuery 的入口函数
+其实就是 window.onload 这个函数
+语法：$（）.ready（function（）{}）
区别

• window.onload:所有资源加载完毕后执行
  +$（）.ready（）：DOM结构加载完毕就执行