jQuery
-
jQuery是一个前端库，也是一个方法库 -
他里面封装着一些列的方法供我们使用
-
我们常用的一些方法它里面都有，我们可以直接拿来使用就行了
-
jQuery之所以好用，很多人愿意使用，是因为他的几个优点太强大了-
优质的选择器和筛选器
-
好用的隐式迭代
-
强大的链式编程
-
-
因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”
jQuery 的使用
-
-
官网是全英文的
-
也没啥可看的，不过没事的时候可以看看了解一下
-
-
jQuery方法大全中文网
http://jquery.cuishifeng.cn/-
这个网站可以多看看
-
里面是
jQuery的方法大全，而且是中文的
-
-
我们要使用
jQuery首先要下载一个-
可以去官网下载，也可以直接百度搜索下载，都可以
-
-
然后就是再页面里面引入
jQuery.js就行了
+ 必须要引入一个jquery.js或者jquery.min.js
jquery的选择器
+ 选择器就是来帮我们获取dom元素的方法
jQuery 有着相当强大的选择器
当jquery被引入以后
+ 我们的全局就多了两个变量
+ jquery向全局暴露了两个名字
=> $
=> jQuery
+ $()
+ jQuery()
+ ()里面写什么
=> 你css怎么获取元素，这里就可以怎么写
=> 不管你写的什么，获取的都是一组元素的集合
=> 只有id的时候，是一组中只能有一个
+ 返回值: 是一个jQuery对象 != dom节点
+ dom节点有的方法，jQuery对象没有
+ jQuery对象有的方法，dom节点没有
// 按照 id 获取页面中的元素
const ele = jQuery('#box')
const ele = $('#box')// 按照类名来选择
const eles = jQuery('.a')
const eles = $('.a')const lis = jQuery('li')
const lis = $('li')上面就是按照标签名来获取元素，可以获取到一组元素
const eles = jQuery('ul > li')
const eles = $('ul > li')上面就是按照选择器来获取元素，可以获取到一组元素
console.log($('ul>li:first-child'))// 获取ul中的子元素li中的第一个
console.log($('ul>li:last-child'))// 获取ul中的子元素li中的最后一个
console.log($('ul li.a'))// 获取ul中的所有的li中的类名是a的
console.log($('#aaa'));// 获取id是aaa的元素
console.log($('li:nth-child(odd)'));// 获取li里面的所有奇数个 // dom节点转jquery对象 - $(dom节点或者dom节点集合)
console.log($(dom))
console.log($(domS))
// jquery对象转dom节点
// 方法1 - jquery对象[索引]
console.log($('.a')[0])
console.log($('.a')[1])
// 方法2 - jquery对象.get(索引)
console.log($('.a').get(0))
console.log($('.a').get(1))jquery的特殊选择器
1 :first => 获取第一个
2 :last => 获取最后一个
3 :eq(n) => 获取索引是n的那一个，索引从0开始
4 :odd => 获取索引是奇数的，索引从0开始
5 :even => 获取索引是偶数的，索引从0开始
$('li:first') // 找到所有 li 中的第一个$('li:last') // 找到所有 li 中的最后一个$('li:eq(3)') // 找到所有 li 中索引为 3 的那个$('li:odd') // 找到所有 li 中索引为 奇数 的$('li:even') // 找到所有 li 中索引为 偶数 的jquery的筛选器
jQuery 的筛选器就是在选择器选择到一组元素以后
对元素进行筛选，也可以对准确的某一个元素进行判断和获取
+ 用在jquery对象上的方法
+ 都是方法，为了对已经获取的元素进行二次筛选
+ 返回值: jquery对象
+ 规律:
== 如果返回值jquery对象有多个元素，一般()里面可以写选择器
筛选器
1 first()
=> 筛选出一个元素集合中的第一个
$('li').first()2 last()
=> 筛选出一个元素集合中的最后一个
$('li').last()3 eq(n)
=> 筛选出一个元素集合中的第n个
4 next()
=> 筛选出元素的下一个兄弟
$('li:eq(3)').next()5 nextAll()
=> 筛选出元素的后面的所有兄弟
$('li:eq(3)').nextAll()6 nextUntil(选择器)
=> 筛选出元素的后面的所有兄弟,直到选择器为止
7 prev()
=> 筛选出元素的上一个兄弟
$('li:eq(3)').prev()8 prevAll()
=> 筛选出元素的前面的所有兄弟
$('li:eq(3)').prevAll()9 prevUntil(选择器)
=> 筛选出元素的前面的所有兄弟,直到选择器为止
10 parent()
=> 筛选出元素的父元素
$('li:eq(3)').parent()11 parents()
=> 筛选出元素的所有父元素
$('li:eq(3)').parents()12 parentsUntil(选择器)
=> 筛选出元素的所有父元素,直到选择器为止
13 children()
=> 筛选出元素的所有儿子元素
14 find(选择器)
=> 筛选出元素的所有后代元素
15 siblings()
=> 筛选出元素的所有同级兄弟元素
16 index()
=> 获取元素的索引位置
=> 不是元素集合里面的第几个
=> 找到他是父元素中的第几个元素
=> 返回值是一个number类型的数字
index()，如果jquery对象里面有多个元素
返回值是第一个元素在父元素中的索引
// 在 li 的所有父级里面找到所有 body 标签
$('li').parents().find('body')
// 找到 div 标签下所有后代元素中所有类名为 box 的元素
$('div').find('.box')jquery的优点
=> 无所不能的选择器
=> 无处不在的隐式迭代（循环）
=> 就是jquery对象里面的元素，内部都会循环执行一次操作
jquery操作文本内容
+ html()
== 一个可读写的方法
== 不传递参数的时候，就是获取元素的超文本内容
== 传递参数的时候，就是设置元素的超文本内容
+ text()
== 一个可读写的方法
== 不传递参数的时候，就是获取元素的文本内容
== 传递参数的时候，就是设置元素的文本内容
+ val()
== 一个可读写的方法
== 不传递参数的时候，就是获取表单元素的value
== 传递参数的时候，就是设置表单元素的value
规律
== 获取值的时候，一般有多个元素，获取第一个
== 设置值的时候，一般有多少个元素就设置多少个
属性操作
属性分为
+ 标签属性
+ 节点属性
+ html5的自定义属性
+ attr() 和 removeAttr()
== 获取和设置标签的属性，属性值一定是字符串类型
== attr: attribute
== attr()
== 是一个读写的方法
== attr('要获取的属性名'):传递一个参数的时候是获取
== attr('要设置的属性名','要设置的属性值'): 传递两个参数的时候是设置
== removeAttr('要移除的属性名')
== 专门用来移除attr设置的标签属性
+ prop() 和 removeProp()
== 获取和设置节点的属性，属性值可以是任意类型
== prop:property
== prop()
== 是一个读写的方法
== prop('要获取的属性名'):传递一个参数的时候是获取
== prop('要设置的属性名','要设置的属性值'): 传递两个参数的时候是设置
== removeProp('要移除的属性名')
== 专门用来移除prop设置的标签属性
+ attr和prop的区别
== attr是操作标签的属性，属性值一定是字符串，设置完以后一定是字符串
== prop是操作节点的属性，属性值可以是任意类型，设置的时候是什么类型，获取的时候就是什么类型
jquery操作元素的类名
+ addClass() => 添加类名
== jquery对象执行这个方法，如果有多个元素，每个元素都添加上固定的类名
== 如果已经有了，就不添加了
+ removeClass() => 移除类名
== jquery对象执行这个方法，如果有多个元素，每个元素都移除固定的类名
== 如果已经没有了，就不用移除了
+ toggleClass() => 切换类名
== jquery对象执行这个方法，如果有多个元素，每个元素都切换固定的类名
== 有则移除，无则添加
+ hasClass() => 判断是否有指定的类名
== jquery对象执行这个方法，如果有多个元素
== 只要有一个元素有这个类名返回true，否则返回false
操作样式
+ css()
+ 一个读写的方法
+ 不同的参数效果不同
1 css('样式名称')
+ css('width')
+ 获取元素的样式值，不管是不是行内样式都可以
2 css('样式名称','样式值')
+ css('width','300px')
+ 设置元素的样式值，元素集合能获取多少个就设置多少个
+ 设置的时候，所有的单位都可以，不写单位默认是px
3 css(对象)
+ css({
width:100, 不写单位默认px
height:'100px',
opacity:0.5
})
+ 批量设置css样式
+ 给元素集合里面的所有元素都设置样式
// 给元素设置一个 css 样式
$('div').css('width', '100px')
// 获取元素的某一个样式
$('div').css('width')
// 给元素设置一组样式
$('div').css({
width: '100px',
height: '200px'
})jquery绑定事件
+ 给元素绑定一个事件
+ on()方法是专门用来绑定事件的
== jquery里面的通过的绑定事件的方法
== 通过传递不同的参数来达到不同的效果
+ one()方法是专门用来绑定一个只能执行一次的方法
== 传递的参数和on一样
+ off()方法是专门用来解绑一个元素的事件的
== 有两种解绑方式
== off('事件类型') 给该事件类型的所有事件处理函数解绑
== off('事件类型',事件处理函数) 解绑指定事件处理函数
== on和one绑定的事件off都能解绑
+ trigger() 方法是专门用来触发事件的方法
== 不通过点击，通过代码把事件触发了
== trigger('事件类型') : 把该元素的事件给触发了
+ 常用事件
== jquery把一些常用事件直接做成了函数
+ click()
+ mouseover()
+ 语法:
== click(事件处理函数)
== click('参数',事件处理函数)
== 参数: 触发事件的时候传递到事件对象的参数
+ hover()
== jquery里面唯一一个很特殊的事件函数
== 表示一个鼠标悬停动作
== 自己唯一的使用方式
+ hover(事件移入的时候触发，鼠标移出的时候触发)
scroll
// 直接给 div 绑定一个滚动事件
$('div').scroll(function () {
console.log('我被点击了')
})
// 给 div 绑定一个滚动事件并传递参数
$('div').scroll({ name: 'Jack' }, function (e) {
console.log(e.data)
})+ on()方法参数
1 on('事件类型',事件处理函数)
== 给jquery对象里面的每个元素都绑定事件
== 事件类型可以写多个，用空格分隔
2 on('事件类型','要事件委托的子元素','事件处理函数')
== 把事件委托位置的元素的事件委托给前面的元素集合
3 on('事件类型',复杂数据类型,事件处理函数)
== 给每一个元素绑定一个事件，复杂数据类型就是触发事件的时候传递给事件处理函数的参数
4 on('事件类型','要事件委托的子元素','要传递给事件对象的参数',事件处理函数)
== 做一个事件委托，第三个参数位置的数据是触发事件的时候传递个事件对象的参数
5 on(对象)
== 给jquery对象里面的每个元素绑定多个事件的方式
// 给 button 按钮绑定一个点击事件
$('button').on('click', function () {
console.log('我被点击了')
})
// 给 button 按钮绑定一个点击事件，并且携带参数
$('button').on('click', { name: 'Jack' }, function (e) {
console.log(e) // 所有的内容都再事件对象里面
console.log(e.data) // { name: 'Jack' }
})
// 事件委托的方式给 button 绑定点击事件
$('div').on('click', 'button', function () {
console.log(this) // button 按钮
})
// 事件委托的方式给 button 绑定点击事件并携带参数
$('div').on('click', 'button', { name: 'Jack' }, function (e) {
console.log(this) // button 按钮
console.log(e.data)
})jquery的节点操作
+ 创建节点
== 对应原生js里面的 createElement
== $('超文本')
+ 插入节点
== 对应原生js里面的 appendChild
== 内部插入
== 页面元素.append(要插入的元素)
== 在页面元素的子元素位置，放在末尾
== 要插入的元素.appendTo(页面元素)（）
== 在页面元素的子元素位置，放在末尾
== 页面元素.prepend(要插入的元素)
== 在页面元素的子元素位置，放在最前
== 要插入的元素.prependTo(页面元素)
== 在页面元素的子元素位置，放在最前
== 外部插入
== 页面元素.after(要插入的元素)
== 放在页面元素的下一个兄弟元素位置
== 要插入的元素.inertAfter(页面元素)
== 放在页面元素的下一个兄弟元素位置
== 页面元素.before(要插入的元素)
== 放在页面元素的上一个兄弟元素位置
== 要插入的元素.inertBefore(页面元素)
== 放在页面元素的上一个兄弟元素位置
// 在 div 的后面插入一个元素 p
$('div').after($('<p></p>'))
// 在 div 的前面插入一个元素 p
$('div').before($('<p></p>'))
// 把 p 元素插入到 div 元素的后面
$('div').insertAfter($('<p></p>'))
// 把 p 元素插入到 div 元素的前面
$('div').insertBefore($('<p></p>'))+ 删除节点
== 对应原生js里面的 removeChild
== 页面元素.empty() => 把自己变成空标签
== 页面元素.remove() => 把自己移除
// 删除元素下的所有子节点
$('div').empty()
// 把自己从页面中移除
$('div').remove()+ 替换节点
== 对应原生js里面的 replaceChild
== 页面元素.replaceWith(替换元素)
== 替换元素.replaceAll(页面元素)
+ 克隆节点
== 对应原生js里面的 cloneNode()
== 元素.clone()
== clone(布尔值,布尔值)
== 第一个参数:自己的事件是否克隆
== 第二个参数:子节点的事件是否克隆
== 不管你是否传递参数，都会把所有的后代元素克隆
== 元素+文本内容+属性+行内样式
== 返回值:就是克隆出来的元素集合，集合里面有的元素，就是克隆好的节点
// 克隆一个 li 元素
// 接受两个参数
// 参数1： 自己身上的事件要不要复制，默认是 false
// 参数2： 所有子节点身上的事件要不要复制，默认是 true
$('li').clone()jquery获取元素的尺寸
jquery获取元素的尺寸
+ 三套方法，四种使用方法,返回值都是数字类型
+ 这些方法都是不考虑盒模型的状态（不管是border-box或者是content-box，都是固定区域
1 width()和height()
== 获取元素内容区域的尺寸
// 获取 div 元素内容位置的高，不包含 padding 和 border
$('div').height()
// 设置 div 内容位置的高为 200px
$('div').height(200)
// 获取 div 元素内容位置的宽，不包含 padding 和 border
$('div').width()
// 设置 div 内容位置的宽为 200px
$('div').width(200)2 innerWidth()和innerHeight()
== 获取元素内容区域+padding的尺寸
// 获取 div 元素内容位置的高，包含 padding 不包含 border
$('div').innerHeight()
// 获取 div 元素内容位置的宽，包含 padding 不包含 border
$('div').innerWidth()3 outerWidth()和outerHeight()
== 获取元素内容区域+padding+border的尺寸
4 outerWidth(true)和outerHeight(true)
== 获取元素内容区域+padding+border+margin的尺寸
// 获取 div 元素内容位置的高，包含 padding 和 border
$('div').outerHeight()
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerHeight(true)
// 获取 div 元素内容位置的宽，包含 padding 和 border
$('div').outerWidth()
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerWidth(true)jquery获取元素的位置
+ 获取元素相对于谁的位置管理
1 offset()
== 相对于页面的偏移量
== 是一个可读写的方法
== 不传递参数，表示获取元素距离页面的位置，返回值:{top:xxxx,left:xxxx}
== 传递参数{top:xxxx,left:xxxx}，表示设置元素距离页面的位置，是绝对写入
// 获取 div 相对页面的位置
$('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }
// 给 div 设置相对页面的位置
$('div').offset({ left: 100, top: 100 })
// 获取定位到一个距离页面左上角 100 100 的位置2 position()
== 是一个只读的方法
== 相对最近的有定位的父元素的偏移量
== 就是相当于css中的left和top
== 返回值:{top:xxxx,left:xxxx}
== 如果你的样式写的是bottom和right，会换算成left和top
// 获取 div 相对于父元素的偏移量（定位的值）
$('div').position()jquery获取卷去（滚动）的尺寸
+ 我们说的卷去的尺寸是页面滚动时候页面被卷去的距离
+ 其实除了页面可以滚动，其他的元素当容器溢出的时候也有滚动的距离
1 scrollTop()
+ 原生js里面获取页面垂直被卷去的距离
+ document.documentElement.scrollTop||document.body.scrollTop
+ 是一个可读写的方法
+ 不传递参数表示获取
+ 传递参数表示设置
2 scorllLeft()
+ 原生js里面获取页面水平被卷去的距离
+ document.documentElement.scrollLeft||document.body.scrollLeft
+ 是一个可读写的方法
+ 不传递参数表示获取
+ 传递参数表示设置
jquery的标准动画
1 show() = 显示
== 语法: show(时间,运动曲线,运动结束后执行的函数)
== 时间单位: 毫秒还可以是文字（fast,normal,slow）
== 运动曲线: linear 匀速
// 给 div 绑定一个显示的动画
$('div').show() // 如果元素本身是 display none 的状态可以显示出来
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
$('div').show(1000, 'linear', function () {
console.log('我显示完毕')
}) 2 hide() = 隐藏
== 语法: hide(时间,运动曲线,运动结束后执行的函数)
== 时间单位: 毫秒
== 运动曲线: linear 匀速
// 给 div 绑定一个隐藏的动画
$('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
$('div').hide(1000, 'linear', function () {
console.log('我隐藏完毕')
}) 3 toggle() = 切换显示和隐藏
== 语法: toggle(时间,运动曲线,运动结束后执行的函数)
== 时间单位: 毫秒
== 运动曲线: linear 匀速
+ 上面三个函数的参数都是选填
+ 如果不填参数，则没有动画效果
// 给 div 绑定一个切换的动画
$('div').hide() // 元素本身是显示，那么就隐藏，本身是隐藏那么就显示
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
$('div').toggle(1000, 'linear', function () {
console.log('动画执行完毕')
}) jquery的折叠动画
1 slideDown() - 下拉显示
== 语法: slideDown(时间,运动曲线,运动结束的事件处理函数)
2 slideUp() - 上拉隐藏
== 语法: slideUp(时间,运动曲线,运动结束的事件处理函数)
3 slideToggle() - 切换显示和隐藏
== 语法: slideToggle(时间,运动曲线,运动结束的事件处理函数)
上面三个函数都可以不写参数，默认有动画效果
jquery的渐显渐隐动画
1 fadeIn() - 渐显
== 语法: fadeIn(时间,运动曲线,运动结束的时间处理函数)
2 fadeOut() - 渐隐
== 语法: fadeOut(时间,运动曲线,运动结束的时间处理函数)
3 fadeToggle() - 切换
== 语法: fadeToggle(时间,运动曲线,运动结束的时间处理函数)
+ 上面三个函数都可以不写参数，默认有动画效果
4 fadeTo() - 去到指定的透明度
== 语法: fadeTo(时间,指定的透明度,运动曲线,运动结束的时间处理函数)
== 注意:即使透明度去到0，也没有附加的隐藏功能
jQuery的综合动画
1 animate()
== 基本上大部分的css样式都可以动画
== 颜色不行，transform
== 语法: animate({},时间,运动曲线,运动结束的回调函数)
== {} 里面就写你运动的css属性
== 运动结束是否占位置，还是要看元素是否脱离标准流
// 定义一个自定义动画
$('.show').click(function () {
$('div').animate({
width: 500,
height: 300
}, 1000, 'linear', function () {
console.log('动画运动完毕')
})
})jQuery的停止动画
+ 让动画停下来
+ 因为jquery的动画一直点击，就会一直触发
+ 你点击10次，他就会触发10次，直到10次全部执行完毕
1 stop()
== 当这个函数触发的时候，就会让当前动画立刻停下来
== 你运动到哪一个位置，就停止在哪一个位置
== 后面排队的动画默认不会清除
// 立刻定制动画
$('div').stop() // 就停止再当前状态2 finish()
== 当这个函数触发的时候, 当前动画会立刻到达目标位置
== 后面排队的动画默认会清除
// 立刻结束动画
$('div').finish() // 停止在动画结束状态jquery的函数方法
+ ready() 事件
== 类似于 window.onload 事件
== window.onload => 会在页面所有资源加载完毕执行
== $(document).ready() => 会在页面的html结构加载完毕后执行
== 也叫做jquery的入口函数
== 有一个简写形式
== $(function(){})
+ $('选择器'): 选择
+ $(dom) :把dom转jquery对象
+ $(超文本) : 创建元素
+ $(函数): 这个函数就会在html结构加载完毕后执行
+ each() 方法
+ 类似于forEach遍历数组的
+ jquery的元素集合，是一个jquery数组，不是一个数组，不能使用forEach
+ each语法
== jquery对象.each(function(index,item){})
+ 比较少用到，因为jquery隐式迭代，自动遍历
jquery发送一个ajax请求
+ jquery里面帮我们封装了几个方法
+ 专门用来发送ajax请求的
1 $.get() => 专门用来发送get请求的
2 $.post() => 专门用来发送post请求的
3 $.ajax() => 发送什么请求都可以(get,post,put,delete)
== 并且可以发送一个jsonp请求
jquery发送一个get请求
+ 语法: $.get('请求地址',需要携带给后端的参数,成功的回调函数,期望后端返回的数据类型)
== 请求地址:你要请求的后端接口地址
== 携带参数:你需要给后端传递的参数
== 可以是一个固定格式的字符串:'a=xxx&b=xxx&c=xxx'
== 还可以是一个对象: {a:xxx,b:xxx,c:xxx}
== 成功的回调:当请求成功的时候会执行的函数
== 这个函数的形参就是后端返回的数据
== 期望数据类型: 就是你需不需要jquery帮你解析数据
== 默认根据后端返回的响应头里面的content-type进行转换
== 当你传递一个json的时候，会自动帮你执行JSON.parse()
jquery发送一个post请求
+ 语法:$.post('请求地址',需要携带给后端的参数,成功的回调函数,期望后端返回的数据类型)
+ 四个参数和$.get是一模一样的
jquery发送一个综合ajax请求
+ 语法: $.ajax({
url:'', // 请求地址，必填
type:'', // 请求方式: get,post,put,delete,默认是get
data:'' ,// 携带到后端的参数
dataType:'', // 期望后端返回的数据类型，默认根据响应头里面的content-type进行转换
async: true, // 是否异步，默认是true
success:function(data){} , // 成功的回调函数
error:function(err){} , // 失败的回调
timeout:数字, // 单位是ms，超时时间（超过你写的时间，就是失败）
cache:true, // 是否缓存，默认是true
context:上下文, // 可以改变回调函数里面的this指向
...
})$.ajax里面失败的回调
== 不光是请求失败的时候会触发
== jquery认定失败就是失败
== 当dataType写成json的时候，jquery会帮我们执行JSON.parse()
== 当后端返回的不是json字符串数据的时候
== 执行JSON.parse()就会报错
== 也是执行失败的回调，请求虽然成功
== JSON.parse('你好,sz2202') => 就会报错
$.ajax里面是否缓存的问题
== 这个请求要不要缓存
== 当两次请求地址一样的时候，就会缓存
== 如果你写cache:false,表示不要缓存
== jquery就会在自动在你的请求地址后面添加一个参数 _=当前时间的时间戳
== 第一次请求: http://xxxx?_=2134334324324
== 第二次请求: http://xxxx?_=2134334324329
$.ajax里面的回调的this指向问题
== ajax的回调默认this指向被jquery加工过的ajax对象
== context的值你写的是谁，回调函数里面的this就是谁
$.ajax里面的请求方式的问题
== $.ajax这个方法里面，type表示请求方式
== jquery还给了我们一个参数叫做method
== 也表示请求方式
== 当你写请求方式的时候
== 可以写type:'post'
== 也可以写method:'post'
$.ajax里面的接收响应数据的问题（2015年以后的版本才有promise）
== jquery默认ajax封装成了promise的形式
== 你可以用success 选项接收成功的回调
== 也可以用then的方式接收回调
jquery发送一个jsonp请求
+ jquery也提供给我们发送jsonp请求的方式
== jsonp: 利用script标签的src属性来请求
== 返回值: 是一个字符串，字符串里面写了一个 函数名(后端传递给前端的数据)
+ 使用$.ajax()这个方法
== 必须写dataType:'jsonp'
+ 发送jsonp请求
== jquery帮我们准备好一个函数名，并且以参数的形式带到了后端
== jquery帮我们带过去的函数，默认放在callback这个参数
== 参数名一般是jquery随机取的
== 后端就会返回一个 jquery准备好的函数名(数据)
+ 其他参数
== cache:false // 当dataType是jsonp的时候，缓存默认是false
== jsonp:'' // 你带到后端的表示你函数名的那个key
== jsonpCallback:'' // 指定jquery生产的函数的名字
jquery的ajax全局钩子函数
+ 钩子: 挂载ajax对象身上，ajax对象每一个动作都会触动它
+ 钩子函数: 只要ajax对象做出一个动作，就会牵动钩子，就会执行这个钩子上的函数
+ 全局的钩子函数
1 ajaxStart()
== 会在同一个作用域下多个ajax的时候，第一个 ajax 开始之前 的时候触发
== 如果有多个ajax，他只触发一次
$(window).ajaxStart(function () {
console.log('有一个请求开始了')
})2 ajaxSend()
== 每一个ajax在发送出去之前，都会触发一次
== xhr.send()之前触发
== 有几个ajax，就触发几次
$(window).ajaxSend(function () {
console.log('有一个要发送出去了')
})3 ajaxSuccess()
== 每一个ajax在成功的时候触发
$(window).ajaxSuccess(function () {
console.log('有一个请求成功了')
})4 ajaxError()
== 每一个ajax在失败的时候触发
$(window).ajaxError(function () {
console.log('有一个请求失败了')
})5 ajaxComplete()
== 每一个ajax在完成的时候触发
$(window).ajaxComplete(function () {
console.log('有一个请求完成了')
})6 ajaxStop()
== 会在同一个作用域下多个ajax的时候，最后一个 ajax 完成以后触发
== 如果有多个ajax请求，只触发一次
+ 作用:通常用来做loading效果
$(window).ajaxStop(function () {
console.log('有一个请求结束了')
})jquery的多库共存
+ 我们一致使用jQuery/$,都没有什么问题
+ 但是如果有以添，我们需要引入另一个插件或者库的时候
+ 人家向外暴露的也是'$'或者'jQuery'
+ 那么，我们jQuery就不能使用了
+ 那么这个时候，jQuery为我们提供了一个多库共存的方法
+ jQuery.noConflict()
+ 这个方法可以交还jQuery命名的控制权
// 这个方法可以交还 jQuery 命名的控制权
jQuery.noConflict()
// 上面代码执行完毕以后 $ 这个变量就不能用了
// 但是 jQuery 可以使用
console.log($) // undefined
console.log(jQuery) // 可以使用完全交出控制权
// 这个方法可以交并且传递一个 true 的时候，会完全交出控制权
jQuery.noConflict(true)
// 上面代码执行完毕以后 $ 这个变量就不能用了
// jQuery 这个变量也不能用了
console.log($) // undefined
console.log(jQuery) // undefined更换控制权
// 可以用一个变量来接受返回值，这个变量就是新的控制权
var aa = jQuery.noConflict(true)
// 接下来就可以把 aa 当作 jQuery 向外暴露的接口使用了
aa('div').click(function () { console.log('我被点击了') })
扫一扫
936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
