jQuery学习
一、jQuery
<1>.选择器
<body>
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<div id="box"></div>
<div class="box"></div>
<script>
/*
jQuery
前端方法库
=> 插件 库 和 框架 的区别
=> 插件：实现某一个单一类功能
=> 库：封装了各种的功能和你需要的工具
=> 框架：自己完整的生态系统
主要内容事封装了各种 dom 操作
优点：
1.选择器
2.链式编程
3.隐式迭代
特点：
=> 号称全兼容
=> 2.0 以前的版本
=> 2.0 以后逐步的不再兼容IE
当你引入一个 jQuery.js 或者 jQuery.min.js 以后
=> 会向全局暴露两个变量名：
1.jQuert
2.$
jQuery 从 $()开始
*/
console.log(jQuery)
console.log($)
/*
jQuery 的选择器
包括2个部分
1.选择器
=> 对元素的获取
=> 基本选择器
=> 特殊选择器
2.筛选器
=> 对已经获取到的元素集合进行二次筛选
选择器 - 基本选择器
语法：$(选择器)
返回值：满足条件的所有元素(id 选择器除外)
=> 放在一个数组里面返回给你
=> 都是一个 集合 的形式
=> 我们管这个 集合 叫做jQuery 元素集合
你的 Css 如何捕获标签，这里就可以怎么填写参数
选择器- 特殊选择器
语法：$(选择器)
=> 对你已经存在的选择器进行修饰
1. :first
2. :last
3. :eq(索引)
=> 按照索引排列的第几个
=> 注意：从 0 开始
4. :odd
=> 按照索引排列的奇数个
5. :even
=> 按照索引排列的偶数个
*/
//基本选择器
console.log($('div'))
console.log($('#box'))
console.log($('.box'))
console.log($('div > ul > li :nth-child(odd)'))
//特殊选择器
console.log($('div:first'))
</script>
</body>
<2>.筛选器
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<span>我是一个span标签</span>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
/*
筛选器
对 jQuery 的元素进行二次筛选
注意：只有 jQuery 的元素集合才可以使用，原生 DOM 对象不能用
1. first()
=> 元素集合里面的第一个
2. last()
=> 元素集合里面的最后一个
3. eq(索引)
=> 元素集合里面指定索引的那一个
4.next()
=> 当前元素的下一个元素
5.nextAll()
=> 语法
1.元素集合.nextAll()
获取到当前元素后面所有兄弟元素
2.元素集合.nextAll(选择器)
获取到当前元素后面所有元素中指定选择器的那一个
6. nextUntil()
1.元素集合.nextUntil()
获取到当前元素后面所有兄弟元素
2.元素集合.nextUntil(选择器)
获取到当前元素后面所有元素中指定选择器的那一个(不包含选择器元素)
7.prev()
=> 当前元素的上一个元素
8..prevAll()
=> 语法
1.元素集合.prevAll()
获取到当前元素上面所有兄弟元素
2.元素集合.prevAll(选择器)
获取到当前元素上面所有元素中指定选择器的那一个
9.prevUntil()
1.元素集合.prevUntil()
获取到当前元素上面所有兄弟元素
2.元素集合.prevUntil(选择器)
获取到当前元素上面所有元素中指定选择器的那一个(不包含选择器元素)
10. parent()
=> 获取到当前元素的父元素
11.parents()
=> 语法
1.元素集合.parents()
拿到结构父级的所有父元素
2.元素集合.parents(选择器)
拿到结构父级里面所有父元素中符合选择器的那一个
12.children()
=> 语法
1.元素集合.children()
拿到该元素的所有子元素
2.元素集合.children(选择器)
拿到该元素的所有子元素中符合选择器的那一个
13.sinblings()
=> 拿到该元素的所有兄弟元素，自己除外
14.find()
=> 找到该元素中所有后代元素里面符合选择器条件的元素
15. index()
=> 获取到的就是该元素在其父元素里面的索引位置
*/
console.log($('li').first())
</script>
</body>
二、操作
<1>.文本内容
<body>
<input type="text" value="你好">
<div>
<p>
我是一段超文本内容
</p>
</div>
<script>
/*
操作文本内容
操作元素内的文本和超文本
注意：属于 jQuery 的方法 只有 jQuery 的元素集合调用，原生 DOM 不能调用
1.html()
=>语法
1.元素集合.html()
获取该元素的超文本内容，以字符串的形式返回
获取的时候为了保证 html 结构只能获取第一个的元素的超文本内容
2.元素集合.html('内容')
设置元素集合内元素的超文本内容
完全覆盖式的写入
隐式迭代：元素集合内有多少元素，就写入多少元素
2.text()
=> 语法：
1.元素集合.text()
获取该元素的文本内容，以字符串的形式返回
因为是文本内容，不涉及 html 结构，所以拿到的是所有元素的文本内容
以一个字符串的形式返回
2.元素集合.text('内容')
设置元素集合内元素的文本内容
完全覆盖式的写入
隐式迭代：元素集合内有多少元素，就写入多少元素
3.val()
=> 语法：
1.元素集合.val()
获取元素集合内元素的 value 值
2.元素集合.val('内容')
设置元素集合内元素的文本内容
完全覆盖式的写入
隐式迭代：元素集合内有多少元素，就写入多少元素
*/
//1. html()
//获取
console.log($('div').html())
//设置
$('div').html('<span>我是新来的</span>')
//2. text（）
// 获取
console.log($('div').text())
//设置
$('div').text('<span>我是新来的</span>')
//3.val
// 获取
console.log($('div').val())
// 设置
$('input').val('hello world')
</script>
</body>
<2>.元素类名
<body>
<div>你好，世界</div>
<script>
/*
操作元素类名
1.addClass()
添加元素类名
2.removeClass()
删除元素类名
3.hasClass()
判断有没有类名
4.toggleClass()
切换类名
如果原先有，就是删除；
如果原先没有，就是添加
*/
// addClass()
$('div').addClass('box')
</script>
</body>
<3>.元素样式
<style>
div{
height: 300px;
background-color: purple;
}
</style>
</head>
<body>
<div style="width: 300px;"></div>
<script>
/*
操作元素样式
1.css()
1-1. 语法:元素集合.css('width')
=> 获取元素的某一个样式的值，不管是行内还是非行内都能获取到
1-2. 语法：元素集合.css('样式名','样式值')
=> 设置元素的行内样式
=> 隐式迭代：元素集合有多少元素，设置多少元素
=> 设置的时候，如果你需要设置的单位是px 可以不写
1-3. 语法：元素集合.css({样式名1：样式值1，样式名2：样式值2，...})
=> 批量给元素设置的行内样式
=> 隐式迭代：元素集合有多少元素，设置多少元素
=> 设置的时候，如果你需要设置的单位是px 可以不写
*/
//1. 获取某一个样式
console.log($('div').css('width'))
//2. 设置某一个样式
$('div').css('margin',50).css('padding',"50")
//3. 批量设置元素样式
$('div').css({
margin:50,
width:700
})
</script>
</body>
<4>.元素属性
<div>你好 世界</div>
<script>
/*
操作元素属性
+几种属性操作
=>原生属性，id class 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 设置的自定义属性
->原生属性id class ... 不能删除
3. data() 和removeData( )
3-1. data()
=>语法:元素集合.data(属性名)
->获取使用data() 方法存储的数据，获取元素身上data-xxx 的属性
=>语法:元素集合.data(属性名，属性值)
->设置的时候，只是把数据存储在元素身上的某一 个对象空间内
->但是不会出现在标签上，不会由data-xxx 的属性出现
=>注意:
->可以获取元素标签上data-xxx 的属性
->但是不能设置标签上data-xxx 的属性
3-2. removeData( )
->只能删除由data() 方法设置的属性
->不能删除元素身上data-xxx的属性
*/
<5>.位置关系
<div>
<p></p>
</div>
<script>
/*
操作元素位置
操作元素相对于某一个点的位置关系
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
*/
// 1. offset 获取
// console.log( 'offset: ', $( 'div').offset(). top)
// console.Log( 'offset: , $( 'div ').offset().Left)
// 2. offset 设置
// $( 'div').offset({ top: 30, Left: 30 })
</script>
<6>.节点
<div>
<p>你好</p>
</div>
<script>
/*
节点操作
+原生JS的节点操作
=>创建节点，插入节点，删除节点，替换节点，克隆节点
+ jQuery 的节点操作
=>创建节点，插入节点，删除节点，替换节点，克隆节点
注意：原生DOM想要使用jQuery，可用$()包起来
1.创建节点
+ $(htm1结构字符串)
=>当$()里面传递一个选择器的时候，就是获取元素
=>当$()里面传递一个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(存在元素)
=>把插入元素排在存在元素的前面，以兄弟关系出现
3.删除节点
3-1. remove()
=>语法:元素集合。remove()
=>把自己从自己的父元素里面移出
3-2. empty()
=> 语法:元素集合. empty()
=>把自己变成空标签，把所有后代节点全部移除
4.替换节点
4-1. replaceWith()
=>语法:换下节点.replaceWith(换上节点)
4-2. replaceAll()
=>语法:换上节点.replaceA1l(换下节点)
5.克隆节点
5-1. clone()
=>语法:元素集合.clone()
=>必然携带所有节点过来
=>第一个参数默认是false, 表示是否克隆元素本身的事件，选填true
=>第二个参数默认是跟随第一个，表示是否克隆元素后代节点的事件，选填
=>注意:当第一个参数是false的时候，第2个参数没有意义
*/
三、事件
<1>.绑定事件
<style>
ul{
width: 500px;
height: 800px;
background-color: blue;
}
li{
width: 50px;
height: 50px;
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
/*
绑定事件
1. on()
根据传递不同的参数做不同的事情
1-1. on(事件类型， 事件处理函数)
=> 直接绑定事件，有隐式迭代
1-2.元素结合.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(事件类型)
// 最早的抢票代码
*/
//1-1. on(事件类型，处理函数)
$('ul > li').on('click',function(){
console.log(this)
})
//1-2. on( 事件类型，选择器，处理函数)
//给li做了一个事件委托，委托给ul来做
$( 'ul ').on('click', 'li', function () {
console.Log(this)
})
// 1-3. on(事件类型，复杂数据类型，事件处理丽数)
$('li' ).on('click', { name: 'Jack' }, function (e) {
console.log('我执行了')
console.log(e)
})
// 1-4. on(事件类型，选择器，数据， 事件处理函数)
$('ul' ).on('click', 'li','hello world',function (e) {
console.log( '我执行了')
console.log(e)
})
// 1-5. on({ 多个事件})
$('li').on({
click: function () { console.log( '点击事件')},
mouseover: function () { console.log( '移入事件')}
})
</script>
<2>.事件函数
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<script>
/*
事件函数
jQuery给我们提供了一些简洁的绑定事件的方式
把些常用事件直接封装成了函数
click()
mouseover( )
这些方法可以直接使用，带有隐式迭代
=>快捷绑定事件
=>语法:
1.元素集合.事件类型(事件处理函数)
2.元素集合。事件类型(传入事件处理函数的参数，事件处理函数)
jquery唯一的特殊事件
hover()
一个结合了移入移出的事件
语法:元素集合.hover(移入的事件处理函数，移出的事件处理函数)
->如果你只传递一个参数，那么移入移出都触发
*/
//使用事件函数
$('div').click(function(){
console.log('你好')
})
</script>
四、获取元素尺寸
<style>
div{
width: 100px;
height: 100px;
padding: 20px;
border: 20px solid #333;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<script>
/*
获取元素尺寸
+获取元素尺寸有三套方法四种使用方式
1. width() 和height()
=>语法:元素集合.width() 或者元素集合.height()
=>获取的是元素内容位置的尺寸
2. innerWidth() 和innerHeight( )
=>语法:元素集合. innerWidth() 或者元素集合.innerHeight()
=>获取的是元素内容+ padding 区域的尺寸
3. outerWidth() 和outerHeight( )
=>语法:元素集合.outerWidth() 或者元素集合.outerHeight()
=>获取的是元素内容+ padding + border 区域的尺寸
4. outerWidth(true) 和outerHeight( true)
=>语法:元素集合. outerWidth(true) 或者元素集合. outerHeight(true)
=>获取的是元素内容+ padding + border + margin 区域的尺寸
*/
</script>
五、动画
<1>.基础动画
<script>
/*
基础动画
1. show()
+显示
2. hide()
+隐藏
3. toggle()
+切换，本身显示就隐藏，本身隐藏就显示
+上面三个方法操作的display: none和block
+三个的语法是一样的
=>方法名(运动时间，运动曲线，回调函数)
=>运动时间:多长时间运动结束
=>
运动曲线:什么方式运动
=>回调函数:运动结束后触发
*/
$(' .show' ).click(() => {
$('div').show()
})
$(' .hide' ).click(() => {
$(' div') .hide()
})
$(' .toggle').click(() => {
$( 'div' ). toggle()
})
</script>
<2>.折叠动画
<div></div>
<script>
/*
折叠动画
1. slideDown()
+下拉显示
2. slideUp( )
上拉隐藏
3. slideToggle()
+切换显示和隐藏
三个方法都是一样的参数
=>方法名(时间，运动曲线，回调函数)
*/
$('.show').click(() => {
})
$('.hide').click(() => {
$('div'). slideUp()
})
$('.toggle').click(() => {
})
</script>
<3>.渐隐渐显动画
<script>
/*
渐隐渐显动画
+通过操作元素的opacity 达到效果
1. faseIn()
+opacity0~1
2. fade0ut()
+opacity1~0
3. fadeToggle()
+切换
以上三个方法的语法是一样的
方法名(时间，运动曲线，回调函数)
*/
</script>
<4>.综合动画
<button>开始</button>
<div></div>
<script>
/*
综合动画
+可以按照你的设定去进行运动
1. animate()
=>语法: animate({}, 时间，运动曲线，回调函数)
=>{}:书写你要运动的属性
=>注意:
->颜色相关的属性，运动不了
->CSS3的2d和3d动画效果运动不了
*/
</script>
<5>.停止动画
<style>
div{
width: 300px;
height: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<button>开始</button>
<div></div>
<script>
/*
jQuery的停止动画
+因为当你给一个元素设置动画以后
+如果快速触发，会停不下来，直到你所有的触发都执行完毕为止
jquery给我们提供两个临时停下动画的方法
1. stop()
+语法:元素集合.stop()
+当代码执行到这句的时候，不管运动到什么程度，立刻停下来
+运动到什么位置就停止在什么位置
2. finish()
+语法:元素集合. finish()
+当代码执行到这句的时候，不管运动到什么程度，直接去到运动结束位置
+直接完成本次动画
*/
$('button.start').click(() => {
$('div').stop(). slideToggle(1000, ' linear')
})
$('.stop').click(() => {
$('div').stop()
})
$('.finish').click(() => {
$('div').finish()
})
</script>
六、发送请求
<1>.发送一个gei请求
<script>
/*
jQuery发送一个get请求
+ jQuery 提供了一个函数，叫做$.get()
+引入jQuery 以后，回提供两个变量
1. $
2. jQuery
=>这两个都是函数数据类型
+把这个函数当作一个对象，向他的身上添加了一些成员
=>我们管这种方法叫做jQuery 的全局方法
=>不需要依赖选择器，不需要元素集合
=>直接调用就行
专门用来发送get请求
语法: $.get(地址， 传递给后端的数据，回调函数，期望返回的数据类型)
=>地址:请求地址(你可以自主拼接参数，不推荐)
=>数据:给后端的数据，可 以写' key=value&key=value',可以写{ ... }
=>回调:请求成功的回调，请求成功以后会触发
=>期望返回的数据类型:是不是执行解析响应体的操作
-> 'string'不解析
-> 'json' 会执行一 步JSON.parse()
*/
</script>
<2>.发送一个post请求
<script>
/*
发送一个post请求
+jQuery提供了一个全局方法叫做$. post()
+专门用来发送post请求
发送post请求
=>语法:$.post(地址，携带给后端的数据，回调函数，期望后端返回的数据类型)
=>四个参数的意义和$.get()模一 样
*/
</script>
<3>.发送一个ajax请求
<script>
/*
发送ajax请求的综合方法
可以由你来配置，决定发送get还是post请求
叫做$.ajax()
=>我们所有的请求都可以使用他来发送使用
=>语法: $.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)
->如果你选择缓存，那么不会有最后一个时间戳参数
->如果你选择不缓存，那么jQuery会在本次请求的末尾添加一个时间戳作为参娄
10.
context:.上 下文
->指定回调函数的this指向
-> jQuery 默认回调函数的this指向jQuery 封装的xhr 对象
->
context传递的是谁，回调函数的this就指向谁
缓存:
=> GET
请求会自主缓存，为什么会缓存?
=>因为你两次发送同一个请求，浏览器就有可能会缓存下来
-> 怎么证明两次是个请求
-> 请求地址一模样， 就表示是 同一个请求
=>不想你进行缓存
->让每一次的请求地址不一样
每次请求的时候，再最后携带一个没有用的参数，值设置成时间戳
->
每次请求的地址就不一样
*/
</script>
<4>.ajax发送跨域请求
<script>
/*
跨域请求
+非同源地址
+解决方案
1. jsonp
+前端利用script 标签和src属性绕开同源策略
+和ajax 没有关系， 实际上不是在发送 ajax请求
+实际上是在请求一个js文件
2.代理
+由一个同源的代理服务端转发请求
+对于前端来说，依旧是正常发送请求
只不过把地址书写成代理地址
+依旧是直接使用$.ajax() 方法来发送
+只不过url 位置书写代理标识符
3.cors
+服务端允许指定客户端发送请求
+和前端没有关系
+前端正常发送请求
+使用$.ajax()
jQuery发送jsonp 请求
+使用一个叫做$.ajax() 的方法
+因为jQuery封装ajax函数的时候做了一个判断
=>根据你dataType 传递的值来判断
=> if (dataType === ' jsonp') {
//走一套动态创建script 标签
//动态添加src属性
//动态插入到body
//动他的删除script
}else{
//按照ajax的一套流程封装
}
只要把dataType 书写成' jsonp
= >就会发送jsonp 请求
发送jsonp 请求专用的配置项
1. jsonp: 表示携带函数名的那个key
2. jsonpCallback: 表示你自主定义的函数名
=>默认值是jquery 自己组装的jQuery_ 版本号随机数_时间戳
*/
</script>
七、全局钩子函数
<script>
/*
全局钩子函数
也叫做全局ajax函数
+出现在ajax 的不同阶段
再一个ajax的整个周期中，会在不同的位置执行的函数
+我们管这种再一个事情的生命周期上各个不同时期触发的函数叫做钩子函数
=>不是自主触发的函数，而是钩挂再其他的事情上
=>由其他的事情发生过程中来触发我
1. ajaxstart()
=>表再同一个作用域下多个ajax 请求的时候
=>第一个ajax请求之前
2. ajaxSend()
=>表示再每一个请求发送之前触发
=>只要有一个请求要执行send 方法了，就会先出发钩子函数
3. ajaxSuccess()
=>表示再每一个请求成功之后触发
=>只要有一个请求成功了，就会触发次
4. ajaxError()
=>表示再每一个请求失败之后触发
=>只要有一个请求失败了，就会触发一次
=>根据jQuery 判定的失败
5.ajaxComplete()
=>表示再每个请求完成之后触发
=>只要有一个请求完成了，不管成功还是失败，只要完成了就会触发
6. ajaxStop()
=>表示再同一个作用域下最后一个ajax 结束以后触发
=>当你有多个请求的时候，会在最后个结束 以后触发这个钩子
*/
// 1. ajaxstart()
$(window) . ajaxStart( function () {
console.log('第个请求开始 ')
})
// 2. ajaxSend()
$ ( window) . ajaxSend(function () {
console.log('有个请求 要发送出去了')
})
// 3. ajaxSuccess()
$(window) . ajaxSuccess(function () {
console.log('有个请求成功了 ')
})
// 4. ajaxError()
$ ( window) . ajaxError(function () {
console.log('有一个请求失败了')
})
// 5. ajaxCompLete
$ (window) . ajaxComplete(function () {
console. log( '==============有一个请求完成了=================' )
})
// 6. ajaxStop()
$(window) . ajaxstop(function () {
console.log('最后一个请求结束了')
})
</script>
八、多库并存
<script>
/*
多库并存
+jquery自己是个库
+还有很多其他的库
+当你出现第二个库一起使用的时候
=>如果两个库都向外暴露了$或者jQuery的变量名
=>就会出现变量名冲突
+两个库只有一个能正常使用
=>谁写在后面就是谁
+jQuery给我们提供了一个多库并存的机制
使用
1.要求你把jQuery引入再最后面
=>先暂时把变量民的所有权交给jQuery
2.执行一个方法，jQuery把变量名的所有权交出去
=>表示我不再占用这个名字了
2-1. noConflict()
->交出$的控制权
2-2. noConflict(true)
->交出$和jQuery的控制权I
2-3. const 变量= $. noConflict(true)
->你的变量是什么
->自己定义一个控制权
*/
</script>
九、深浅拷贝
<script>
/*
深浅拷贝
+三个词(描述对象和对象之间的关系)
1.赋值
=>把一个对象的地址赋值给另一个变量
=>两个变量操作同一个空间
2.浅拷贝
=>把对象里面的每一个成员，复制一份一模一样的内容
=>放到另一个对象里面
=>当你有某个对象成员是复杂数据类型的时候
=>这个成员依旧是一样的
=>只是操作对象里面一层可以没有关系，如果再深层次就会出现问题
3.深拷贝
=>对象空间里面不管多少层，都是相对独立，没有关系
=>forin遍历赋值
=>只要碰到某一个是复杂数据类型对象或者数组
=>再次进入到这个数据类型里面进行二次遍历
=>方案1:利用递归思想实现深拷贝
->把第一遍遍历放在一个函数里面
-> 如果遍历的时候，发现有一个数据是数组或者对象
->从新调用函数
=>方案2:json
->不管多复杂的数据类型，
转换成json 以后就是字符串
->字符串的赋值时基本数据类型
->赋值以后再转换回来
*/
// 1.赋值
// var o1={
// name: 'Jack '
// }
//从此开始 o2 和 o1 操作一个空间
// var o2=o1
// o2.name = ' Rose
// console.Log(o1,o2)
//2.浅拷贝
var o1= {
name :'Jack',
age: 18,
// o1.info 存储的是个地址
info: {
class:'gp20',
score: 100
}
}
//o1和o2是两个对象空间
//但是里面的内容一模一样
var o2={}
for (var key in o1) {
//复制过去的时候，把o1.info 存储的地址复制给了o2. info
o2[key] = o1[key]
}
//从此以后，操作o1和o2没有关系
02.name ='Rose'
//从此以后，o1.info 和o2. info 操作的是一个对象空间
o2.info.score = ' 90 '
console. Log(o1, o2)
//3.深拷贝
var o1= {
name :'Jack',
age: 18,
info: {
class:'gp20',
score: 100
}
}
varo2={}
//第一遍遍历
for (var key in o1) {
if (typeof o1.key == 'object') {
o2[key] = o1[key]
for (var key2 in o1[key]){
o2[key][key2] = o1[key][key2]
}
}else{
o2[key] =o1[key]
}
}
deep(o2, o1)
o2.name ='Rose'
o2.info.scroe = 90
o2.info.time.createTime = 300
</script>
十、插件扩展
<1>.机制
<script>
/*
插件扩展
+jQuery再设计的时候，封装了好多的方法
+但是怕你不够用，提供了插件扩展机制
+你可以向jQuery 里面扩展一些内容
+插件扩展机制提供了两个方法
1.扩展到jQuery本身，作为全局方法调用
=>语法: $.extend({ 你扩展的方法})
=>使用: $.extend({ a: function () {} })
->相当于扩展了一个a方法再jQuery本身
->如果你向调用，就书写$.a()
2.扩展到jQuery 的原型上，就是给jQuery 的元素集合使用
=>语法: $. fn.extend({ 你扩展的方法})
=>使用: $.fn.extend({ a: function () {} })
->相当于扩展了一个a方法给jQuery 的元素集合
->如果你想调用，就书写$(选择器).a()
=>第二种书写的语法
-> $.extend($.fn， {你扩展的方法})
*/
</script>
<2>.全选
<script>
/*
全选
使用插件扩展
+扩展己写方法来操作全选
+先准备一些扩展的内容
1. selectAll
+判断元素集合内是不是所有的元素的checked都是true
+将来使用的时候: $(元素).selectA1l()
=>返回一个结果，true 或者false
=> true 表示元素集合内所有的元素checked 都是true
=> false 表示元素集合内至少有一个元素checked 是false
1-1.为了$(元素).selectAl1()调用方式
=>扩展在原型上$.fn.extend({ })
1-2. 循环遍历元素集合
=>怎么拿到元素集合?
-> 这个方法肯定是jQuery 的元素集合才能调用
-> this- 定是jQuery 的元素集合
->使用this
=>判断是不是全都选中
->遍历，一个一个的去访问checked 属性
->提前定义一个flag 变量为true
->只要有一个的checked 是false
->就结束遍历
2. setChecked()
+ 一旦执行的时候，给元素集合内的所有 元素设置checked 属性
+接收一个参数，true或者false
=>将来你调用的时候$(元素)。setChecked()
=>你如果不传递，默认是true, 全都设置checked 为true
=>如果你传递了一个false, 全都设置checked 为false
+需要遍历元素集合
=>为了达到隐式迭代
+我们封装的方法可以使用
=>但是使用完毕，到这里就结束了，不能继续链式编程了
=>因为要达到链式编程，每一个方法都要依靠元素集合调用
=>我这个方法执行完毕以后，返回值是undefined
=>不能继续链式编程了
=>再方法里面this 就是元素集合
-> return this
->就能向外返回一个元素集合
->就可以继续链式编程了
3. getChecked()
+这个方法拿到元素集合内第一个元素的checked 属性
判断this内有没有数据
=>如果有，那么就返回第一个checked 属性
=>如果没有，那么就返回false
*/
</script>
十一、表单验证插件
<form class= "cmxform" id="login" method=" get" action="">
<p>
<label for="username">用户 名</label>
<input id=”username”
name= "username" type= "text">
</p>
<p>
<label for= "password">密码</label>
<input id= " password" name= " password" type=" password">
</p>
<button>提交</button>
</form>
<script src="../jquery/jquery.min.js"></script>
<script src="../jqueryvalidate/jquery.validate.min.js" ></script>
<script>
/*
插件
jquery-validate:主要是用来做表单验证的插件
1.下载插件
2.导入文件
2-1.先导入jquery.js
2-2.导入jquery.validate.js
3.正式使用
3-1. 获取form标签
3-2.调用validate()方法，传递参数为一个对象|
3-3. 再validate 的参数对象中书写rules
=>表示校验规则
=> rules是一个对象{}
*/
$(' #login').validate({
//规则:成员表示的意义就是校验规则
rules:{
// key是匹配form 标签中的name 属性
username :'required',
// vaLue 也可以是对象的形式，用来书写多个规则
password: {
required: true ,
maxlength: 10 ,
minlength: 5
}
},
//消息:表示自定义的提示消息
messages: {
// key是匹配form标签中的name属性
//value就是验证不通过的时候的提示文本
username :'请填写该字段',
password: {
required: '这个字段还没有填写',
maxlength :'别超过10个',
minlength: '还不到5个'
}
}
})
</script>
十二、入口函数
<script>
/*
入口函数
+其实就是window. onload这个函数
+语法: $().ready(function () {})
->入口函数有一个简写的语法
-> $(function () {})
区别:
+ window. onload:所有资源加载完毕后执行
+ $().ready(): DOM 结构加载完毕就执行
*/
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
