jQuery学习
javascript库：即library，是一个封装好的特定集合（方法和函数），从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animation、hide、show，比如获取元素等
简单理解就是在一个js文件里面对我们原生的js代码进行了封装，存放在里面，这样我们可以快速高效的使用这些封装好的功能了
常见的JavaScript库
jQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto
这些库都是对原生的JavaScript的封装，内部都是JavaScript实现的
jQuery库包含以下功能：
HTML元素获取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效动画
HTML DOM遍历和修改
AJAX
Utilities
jQuery还提供大量的插件
1.jQuery的概念
jQuery是一个快速的，简介的JavaScript库，其设计宗旨是“write less，Do More”，写得更少做得更多事
jQuery封装了JavaScript常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互
学习jQuery的本质就是学习这些函数（方法）
jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率
优点：
轻量的，核心文件才十几kb，不会影响加载速度
跨浏览器的，基本兼容现在主流的浏览器
链式编程、隐式迭代
对事件，样式，动画支持，大大简化DOM操作
支持插件扩展开发，有丰富的第三方插件:如日期控件、轮播图等
免费开源
2.jQuery的基本使用
官方网址：https://jquery.com/
jQuery的基本使用
引入：
<script src="jQuery的文件位置"></script>
2.1 jQuery入口函数
方式一：
1$(function(){2 $('div').hide() //此处是页面DOM加载完成的入口3})方式二：
xxxxxxxxxx31$(document).ready(function(){2 $('div').hide()3})方式一和方式二实现功能是一样的都是等待原生DOM元素加载完毕才执行，不必等所有外部资源加载完毕才执行
相当于原生js代码中的DOMContentLoaded
不同于原生js中的load事件是等页面文档，外部的js文件、css文件、图片加载完毕才执行内部代码
2.2 jQuery的顶级对象$
$是jQuery的别称，在代码中可以使用jQuery代替$,但一般为了方便，通常都是直接使用$$是jQuery的顶级对象，相当于原生的JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery方法
2.3 jQuery对象和DOM对象
用原生js获取来的对象就是DOM对象
jQuery方法获取的元素就是jQUery对象
jQuery对象本质：就是利
$对DOM对象包装后生产的对象（以为数组的形式 进行存储）jQuery对象只能使用jQuery方法，DOM对象只能使用原生js属性和方法，他们是不能混用的
xxxxxxxxxx41var a=document.querySelector('div')//DOM对象2a.style.display="none"3a.hide()//这样写是错的，js原生不能使用jQuery的方法 hide()是jQuery的方法目的是隐藏盒子4$('div').style.display="none" //这样写是错的，jQuery对象只能由jQuery方法控制
2.4jQuery对象和DOM对象之间的转换
DOM对象和jQUery对象是可以相互进行转换的
因为原生的js比jQUery要大，原生的一些属性和方法jQUery是没有给我们提供的，想要使用这些属性和方法需要把jQUery对象转换为DOM对象才能使用
2.4.1 把DOM对象转换为jQuery对象
$(DOM对象)
xxxxxxxxxx21var a=document.querySelector('div')2$(a) //注意这里不需要加引号2.4.2 jQuery对象转换为DOM对象
方式一：
$('div')[index] index是索引号
方式二：
$('div').get(index) index是索引号
jQuery对象转化成DOM
xxxxxxxxxx21$('div')[0].style.display="none" //这样就可以使用原生的js方法了2$('span').get(0).style.display="none" //方法二的使用3. jQuery常用API
3.1 jQuery选择器
原生js获取元素的方式很多，很杂而且兼容性情况不一致，因此jQuery给我们做了封装，是元素统一标准
$('选择器')——里面选择器直接写css选择器即可，但是要加引号
3.1.1 基本选择器
| 选择器 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(‘#id’) | 获取指定元素的id |
| 全选选择器 | $(‘**’) | 匹配所有元素 |
| 类选择器 | $(‘.class’) | 获取同一类class的元素 |
| 标签选择器 | $(‘div’) | 获取同一类标签的元素 |
| 并集选择器 | $(‘div,p,li’) | 获取多个元素 |
| 交集选择器 | $(‘div.content’) | 交集元素 |
3.1.2 jQuery层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(‘ul>li’) | 使用>号获取子元素，并不会获取孙子级的元素 |
| 后代选择器 | $(‘ul li’) | 使用空格，代表后代选择器，获取ul下的li元素，包括孙子元素等 |
| 祖先选择器 | $(‘div’).parents(‘选择器’) | 获取当元素的祖先元素，选择器里面填写的是祖先的对应的各种名称 |
3.1.3 隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程就是隐式迭代
简单理解：给匹配到的元素进行循环遍历，执行相应的方法，而不用我们在进行遍历，简化我们的操作，方便调用
xxxxxxxxxx11$('div').css('background-color','pink')//这样写就能更改页面中所有的div元素的样式了，后续会详细说到jQuery的css方法3.1.4 jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :frist | $(‘li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | 获取最后一个li元素 |
| :eq(index) | $(‘li:eq(2)’) | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 |
| :odd | $(‘li:odd’) | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(‘li:even’) | 获取到的li元素中，选择索引号为偶数的元素 |
3.1.5 jQuery筛选方法（重点）
| 语法 | 用法 | 描述 |
|---|---|---|
| parent() | $(‘li’).parent() | 查找父级，返回最近一级的父元素 |
| children(selector) | $(‘ul’).children(‘li’) | 相当于(‘ul>li’)儿子选择器 |
| find(selector) | $(‘ul’).find(‘li’) | 相当于(‘ul li’)后代选择器 |
| siblings(selector) | $(‘.first’).siblings(‘li’) | 查找兄弟节点不包括自己本身 |
| nextAll([expr]) | $(‘.first’).nextAll() | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $(‘.last’).prevtAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $(‘div’).hasClass(‘protected’) | 检查当前元素是否含有某个特殊的类，如果有返回true |
| eq(index) | $(‘li’).eq(2) | 相当于(‘li :eq(2)’) index从0开始 |
重点记住：parent(), children(), find(), siblings(), eq()
3.1.6 jQuery的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余兄弟元素清除样式
xxxxxxxxxx171<body>2 <button>button</button>3 <button>button</button>4 <button>button</button>5 <button>button</button>6 <button>button</button>7</body>8<script>9 //隐式迭代，给所有的按钮都绑定了点击事件10 $('button').click(function(){11 //当前的元素变化背景颜色12 $(this).css('background-color','pink')13 //其余兄弟元素去掉背景颜色,隐式迭代14 $(this)15 .siblings('button').css('background-color','none')16 })17</script>3.2 jQuery样式操作
3.2.1 操作css方法
jQuery可以使用css方法来修改简单的元素样式，也可以操作类，修改多个样式
参数只写属性名，这则返回属性值
$('div').css('color')参数是属性名和属性值，是设置样式，属性名必须要加引号，值如果是数字可以不用跟单位和引号
$('div').css('color','red)参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性名可以不用加引号，每组样式之间使用逗号分隔
$('div').css({width:300px,height:300px})——不加引号$('div'.css({'width':'300px','hieght':'300px'}))——加引号对于那些有破折号连接的属性（即复合属性）就使用驼峰命名法书写属性名，如
backgrounColor:"red"对于不是数字的属性值必须使用引号书写
3.2.2 设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点
3.2.2.1 添加类
$('div').addClass('类名')
x1<style>2
3 .a{4 color:pink;5 font-size:2em;6 }7</style>8<div>9 10</div>11<script>12 $(function(){13 $('div').addClass('a')//这样就给了div这个元素添加了对应的类的样式14 })15</script>3.2.2.2 删除类
$('div').removeClass('类名')
xxxxxxxxxx151<style>2
3 .a{4 color:pink;5 font-size:2em;6 }7</style>8<div class="a">9 10</div>11<script>12 $(function(){13 $('div').removeClass('a')//这样就删除了div这个元素对应的类的样式14 })15</script>3.2.2.3 切换类
$('div').toggleClass('类名')
xxxxxxxxxx211<style>2
3 .a{4 color:pink;5 font-size:2em;6 transtion-duration:0.6s;7 }8 .b{9 transform:rolet(360deg)10 }11</style>12<div class="a">13 14</div>15<script>16 $(function(){17 $('div').click(function(){18 $(this).toggleClass('b')//自动判断这个元素有无这个类，如果有就不动，没有就进行添加这个指定的类，做到样式的切换效果19 })20 })21</script>案例：Tab栏的切换
xxxxxxxxxx981<html lang="en">3
4<head>5 <meta charset="UTF-8">6 <meta http-equiv="X-UA-Compatible" content="IE=edge">7 <meta name="viewport" content="width=device-width, initial-scale=1.0">8 <title>Document</title>9 <script src="../jQuery/jQuery.min.js"></script>10 <style>11 * {12 margin: 0;13 padding: 0;14 box-sizing: border-box;15 }16
17 body {18 width: 100vw;19 height: 100vh;20 display: flex;21 justify-content: center;22 align-items: center;23 }24
25 ul {26 list-style: none;27 display: flex;28 justify-content: space-between;29 align-items: center;30 }31
32 li {33 text-align: center;34 height: 50px;35 width: 60px;36 align-items: center;37 justify-content: center;38 display: flex;39 cursor: pointer;40 }41
42 .tab_list {43 width: 300px;44 height: 50px;45 background-color: bisque;46 border-bottom: 1px solid black;47 }48
49 .item {50 width: 300px;51 height: 100px;52 background-color: blue;53 display: none;54 }55
56 .tab {57 width: 300px;58 height: 150px;59 outline: 1px solid red;60 }61
62 .color {63 background-color: red;64 }65 </style>66</head>67
68<body>69 <div class="tab">70 <div class="tab_list">71 <ul>72 <li>1</li>73 <li>2</li>74 <li>3</li>75 <li>4</li>76 <li>5</li>77 </ul>78 </div>79 <div class="tab_con">80 <div class="item" style="display: block;">1</div>81 <div class="item">2</div>82 <div class="item">3</div>83 <div class="item">4</div>84 <div class="item">5</div>85 </div>86 </div>87</body>88<script>89 $(function(){90 $('li').click(function(){91 $(this).addClass('color').siblings().removeClass('color')//排他思想92 var index=$(this).index()//设置按下对应li在元素里面的索引93 $('.item').eq(index).show().siblings().hide()94
95 })96 })97</script>98</html>3.2.3 类操作与className的区别
原生的js中的className会覆盖式元素原先里面的类名
比如原来的类名是a，用className指定新类名之后b之后就变成b了，没有a这个类名了 class=“a”
jQuery里面的类操作只是对指定类进行操作，不影响原先的类名
比如给元素新添加一个类为b 则元素既有原来的类又有新的类 class=“a b”
删除也是这个道理
3.3 jQuery效果、
jQuery给我们封装了很多动画效果，常见如下：
显示隐藏
show()
hide()
toggle()
滑动
slideDown()
slideUp()
slideToggle()
淡入淡出
fadeln()
fadeOut()
fadeToggle()
fadeTo()
自定义动画
animate()
3.3.1 显示和隐藏效果
show([speed,[easing],[fn]])——显示效果
hide([speed,[easing],[fn]])——隐藏效果
toggle([speed,[easing],[fn]])——切换效果
里面的参数是可以省略的，这样就无动画显示效果
speed:三种预设速度之一的字符串（“show” ,”normal”,”fast”)或者表示动画时长的毫秒数值（如：1000）
earing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次
一般情况下都不加参数的，动画效果比较难看
3.3.2 滑动效果
slideDown([speed,[easing],[fn]])——下拉效果
slideToggle([speed,[easing],[fn]])——切换效果
slideUp([speed,[easing],[fn]])——上拉效果
参数都可以省略
speed:三种预设速度之一的字符串（“show” ,”normal”,”fast”)或者表示动画时长的毫秒数值（如：1000）
earing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次
3.3.3 事件切换
hover([over,]out)
over是鼠标移动到这个元素上要触发的函数（相当于mouseover）
out是鼠标离开元素的时候要触发的函数（相当于mouseleave）
xxxxxxxxxx51$('div').hover(function(){2 $(this).children('ul').slideDown(200)3},function(){4 $(this).children('ul').slideUp(200)5})如果只写一个函数那么鼠标经过和离开都会触发这个函数，所以要同时使用两个效果可以这样写
xxxxxxxxxx31$('div').hover(function(){2 $(this).children('ul').slideToggle(200)//使用Toggle切换效果同时实现两个效果3})3.3.4 动画队列及其停止排队方法
3.3.4.1 动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
3.3.4.2 停止排队
stop()
stop()方法用于停止动画或效果
注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画
xxxxxxxxxx31$('div').hover(function(){2 $(this).children('ul').stop().slideToggle()//这样就会把现在动画效果先执行，不会把上一次的动画执行3})3.3.5 淡入淡出效果
fadeIn([speed],[earing],[fn])——淡入
fadeOut([speed],[earing],[fn])——淡出
fadeToggle([speed],[earing],[fn])——切换效果
参数都可以省略
speed:三种预设速度之一的字符串（“show” ,”normal”,”fast”)或者表示动画时长的毫秒数值（如：1000）
earing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次
fadeTo([speed],opacity,[earing],[fn])——修改透明度
opacity透明度必须要写，取值为0~1
speed:三种预设速度之一的字符串（“show” ,”normal”,”fast”)或者表示动画时长的毫秒数值（如：1000），必须写
earing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”，可省略
fn：回调函数，在动画完成时执行的函数，每个元素执行一次，可省略
案例：高亮显示
xxxxxxxxxx561<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta http-equiv="X-UA-Compatible" content="IE=edge">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Document</title>8 <script src="../jQuery/jQuery.min.js"></script>9 <style>10 *{11 margin: 0;12 padding: 0;13 box-sizing: border-box;14 }15 body{16 width: 100vw;17 height: 100vh;18 display: flex;19 justify-content: center;20 align-items: center;21 background-color: black;22 }23 .body{24 width: 600px;25 height: 500px;26 background-color: aliceblue;27 }28 .img{29 width:200px;30 height: 250px;31 background-color: red;32 float: left;33 border: 1px solid black;34 }35 </style>36</head>37<body>38 <div class="body">39 <div class="img"></div>40 <div class="img"></div>41 <div class="img"></div>42 <div class="img"></div>43 <div class="img"></div>44 <div class="img"></div>45 </div>46</body>47<script>48 $(function(){49 $('.img').hover(function(){50 $(this).siblings().stop().fadeTo(300,0.5)51 },function(){52 $(this).siblings().stop().fadeTo(300,1)53 })54 })55</script>56</html>3.3.6 自定义动画animate
语法
animate(params,[speed],[earing],[fn])
params：想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法，其余参数都可以省略
speed:三种预设速度之一的字符串（“show” ,”normal”,”fast”)或者表示动画时长的毫秒数值（如：1000）
earing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次
xxxxxxxxxx111$(function(){2 $('button').click(function(){3 $('div').animate({4 left:300px,5 width:300px,6 backgrounColor:"pink"7 },500,linear,function(){8 alert('this is a box that named boxBoy')9 })//当点击button这个按钮时就会触发下面的div元素，div的样式高变成300像素，宽变为300像素，背景颜色变为粉红色，之后就执行一个弹窗，内容为“this is a boy that named boxBoy”10 })11})3.4 jQuery属性操作
3.4.1 设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如元素里面的href，比如元素里面的type
获取属性值
语法：
$('a').prop('herf')
设置属性值
语法：
prop('属性'，'属性值')
$('a').prop('title','this is a typ')
3.4.2 设置获取自定义属性值 attr()
元素的自定义属性是通过attr获取的
xxxxxxxxxx81<div index="1">2 3</div>4<script>5 $(function(){6 $('div').attr('index')//获取自定义属性值7 })8</script>3.4.3 数据缓存 data()
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除
$('div').data('index')——获取H5自定义元素属性，不用写data- 而且返回的是数字型
案例：购物车全选
xxxxxxxxxx231<input type="checked" class="quanxuanw">全选2<input type="checked" class="li">选择3<input type="checked" class="li">选择4<input type="checked" class="li">选择5<input type="checked" class="li">选择6<script>7 $(function () {8 //全选 全不选模块,把全选按钮的状态赋予小的按钮.事件可以使用change9 $('.quanxuanw').change(function () {10 var index = $(this).prop('checked')//全选按钮的状态11 console.log(index);12 $('.li,.quanxuanw').prop('checked', index)//下的按钮根据全选按钮的状态来改变自己的状态13 })14 $('.li').change(function(){//当三个小按钮都被选中的时候，全选按钮被选中。否则不被选中15 if($('.li:checked').length==3){//利用checked方法可以判断出小选中按钮被选中的个数从而判断16 $('.quanxuanw').prop('checked',true)17 }18 else{19 $('.quanxuanw').prop('checked', false)20 }21 })22 })23</script>3.5 jQuery内容文本值
主要针对元素的内容还有表单的值的操作
3.5.1 普通元素内容html()（相当于原生innerHTML）
html()——获取元素的内容html('内容')——设置元素的内容
xxxxxxxxxx21$('div').html()//获取div里面的内容（包括标签）2$('div').html('this is a boy')//设置div里面的内容文本3.5.2 普通元素文本内容text()（相当于原生的innerText）
只把标签里面的文字内容获取下来，忽略标签
text()——获取标签里面的内容text('内容')——设置标签里面的内容文本
xxxxxxxxxx21$('div').text()//获取标签内容文本2$('div').text('this is a boy')//设置标签里面的内容文本3.5.3 表单的值val()（相当于原生的value）
val()——获取表单元素的值val('内容')——设置表单元素的值
xxxxxxxxxx21$('input').val()//获取input输入的值2$('input').val('this is a boy')//设置input里面的值3.6 jQuery元素操作
主要是遍历，创建，添加，删除元素等操作
3.6.1 遍历元素each()方法
jQuery隐式迭代是对同一类元素做了同样的操作，如果要给同一类元素做不同的操作就需要用到遍历
each()方法遍历元素
语法：
语法1：
$('div').each(function(index,domEle){xxx})——遍历元素
each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个
里面的回调函数有两个参数：index是每一个元素的索引号，demEle是每一个DOM元素对象，不是jQuery对象
所以想要使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)
xxxxxxxxxx151<div>1</div>2<div>2</div>3<div>3</div>4<div>4</div>5<script>6$(function(){7 var a=['red','pink','blue','yellow']8 $('div').each(function(index,domEle){9 //回调函数第一个参数一定是索引号。且它不一定非得叫index，可以自行命名，each()方法已经弄好了索引号，不在需要我们自己设置10 //第二个参数一定是DOM元素对象,也可以使用其他名称定义11 console.log(index)//打印结果为0,1,2,312 $(domEle).css('color',a[index])//把DOM元素对象转换为jQuery对象就可以使用jQuery方法13 })14})15</script>语法2：
$.each(object,function(index,element){xxx})——主要用于遍历数据，处理数据
$.each()方法可以用于遍历任何对象，主要用于处理数据，比如数组、对象
里面有两个参数：index是每一个元素的索引号，element遍历内容
xxxxxxxxxx191<div>1</div>2<div>2</div>3<div>3</div>4<div>4</div>5<script>6 $(function(){7 var a=['love','you','forever']8 //遍历数组9 $.each(a,function(index,element){10 console.log(index)//打印数组的索引号11 console.log(element)//打印数组的数据12 })13 //遍历对象14 $.each({name:'liwei',age:18},function(index,element){15 console.log(index)//打印对象的属性名16 console.log(element)//打印对象的属性值17 })18 })19</script>3.6.2 创建元素
语法：
$("<li></li>")——创建元素，动态的创建了一个li标签
xxxxxxxxxx11var li = $("<li></li>")3.6.3 添加元素
内部添加
element.append('内容')——把内容放入匹配元素内部的最后面，类似原生appendChildelement.prepend('内容')——把内容放入匹配元素内部的最前面，类似原生xxxxxxxxxx21var li = $("<li></li>")//创建元素2$('ul').append(li)//添加元素外部添加
element.after('内容')——把内容放入目标元素后面element.before('内容')——把内容放在目标元素前面xxxxxxxxxx41$(function(){2var div = $("<div>this is a boy</div>")3$('ul').after(div)4})
3.6.4 删除元素
element.remove()——删除匹配的元素本身
xxxxxxxxxx31$(function(){2 $('div').remove()//把div这个元素删除了3})element.empty()——删除匹配元素集合中所有的子节点——等价于element.html('')
xxxxxxxxxx121<div>2 <li>1</li>3 <li>2</li>4 <li>3</li>5 <li>4</li>6</div>7<script>8 $(function(){9 $('div').empty()//把div这个元素所有子节点删除了10})11</script>12
3.7 jQuery事件
3.7.1 jQuery事件注册
单个事件注册
element.事件(function(){})
$('div').click(function(){})
其他事件和原生基本一致
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
3.7.2 jQuery 事件处理
事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
element.on(events,[selector],fn)
events是一个或多个事件类型，用空格分隔的事件类型
selector元素的子元素选择器
fn回调函数，即绑定在元素身上的侦听事件
xxxxxxxxxx241<style>2 .color{3 background-color:pink4 }5</style>6<div>7 8</div>9<button>10 I'm a button11</button>12<script>13 $(function(){14 //事件处理程序不相同15 $('div').on({16 mouseenter:function(){alert('she is my grilfirend')},17 click:function(){alert('this is a boy')}18 })19 //事件处理程序是相同的20 $('button').on("click mouseover",function(){21 $(this).toggleClass("color")//添加一个类22 })23 })24</script>on()方法可以绑定多个事件多个处理程序
on()方法 可以事件委派操作，事件委派的定义就是，把原来加给元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$('ul').on("click","li",funtion(){})——事件绑定在ul上，但触发对象是li（产生事件冒泡）on()方法 动态创建的元素，click()方法没有办法绑定事件，on()方法可以给动态生成的元素绑定事件
3.7.3 事件解绑0ff()
off()方法可以移除通过on()方法添加的事件处理程序
xxxxxxxxxx101$('div').on({2 click:function(){alert('this is a boy')},3 mouseover:function(){a;ert('this is a gril')}4})5$('div').off()//没有加参数默认会把div所有的事件进行解绑6$('div').off("click")//解除了div里的click事件7$('ul').on('click',"li",function(){8 alert('this is a li')9})10$('ul').off('click'.'li')//解除事件委派3.7.4 事件触发一次one()
如果只想要事件触发一次则可以使用one()方法来绑定事件
xxxxxxxxxx31$('div').one('click',function(){2 alert('this is a boy')3})//只触发一次事件3.7.5 自动触发事件trigger()
element.click()——第一种方式
xxxxxxxxxx61$(function(){2 $('div').on('click',function(){3 alert('this is a boy')4 })5 $('div').click()//这样写就会自动调用事件弹出this is a boy6})element.trigger(‘type’)——第二种方式
xxxxxxxxxx61$(function(){2 $('div').on('click',function(){3 alert('this is a boy')4 })5 $('div').trigger('click')//自动调用事件6})element.triggerHandler(type)——第三种方式
xxxxxxxxxx61$(function(){2 $('div').on('click',function(){3 alert('this is a boy')4 })5 $('div').triggrtHandler('clcik')//自动触发事件，但不会触发元素的默认行为6})3.7.6 jQuery事件对象
事件被触发就会有事件对象的产生
element.on(events,[selector],function(event){})
function里面的event就是事件对象
xxxxxxxxxx91$(function(){2 $(document).on('click',function(){3 alert('this is a boy')4 })5 $('div').on('click',function(event){6 alert('this is a gril')7 })8 event.stopPropagation()//阻止事件冒泡9})阻止默认行为：event.preventDefaut()或者return false
阻止冒泡：event.stopPropagation()
3.8 jQuery其他方法
3.8.1 jQuery拷贝对象
如果想要把某个对象拷贝给另一个对象使用，此时可以使用$.extentd()方法
语法：
$.extend([deep],taget,object1,[objectN])
deep:如果设为true为深拷贝，默认为false浅拷贝
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响到被拷贝的对象
深拷贝，前面加true，完全克隆（拷贝对象，而不是地址），修改目标对象不会影响被拷贝对象，对于方法不会进行覆盖，会在原来的对象方法里面加上拷贝的数据
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
xxxxxxxxxx111$(function(){2 var targetObj = {3 id:24 }//定义一个空对象5 var obj = {6 id:1,7 name:"liWei"8 }9 $.extend(targetObj,obj)//把obj对象拷贝到targetObj对象,会覆盖targetObj对象里面的数据10 console.log(targetObj)11})xxxxxxxxxx161$(function(){2 var obj = {3 id:3,4 msg:{5 id:3,6 name:"LiWei"7 }8 }9 var ob = {10 name:"LiBai",11 age:1812 }13 $.extend(true,obj,ob)//深拷贝14 console.log(obj)15 console.log(ob)16})
3.8.2 多库共存
jQuery使用$符号作为标识符，随着jQuery的流行，其他js库也会用$作为标识符，这样一起使用就会引起冲突
需要一个解决方案，让jQuery和其他js库不存在冲突，可以同时存在，这就叫多库共存
JQuery解决方案：
把里面的$符号统一改为jQuery
jQuery变量规定新的名称：
$.onConflict() var xx =$.onConflict()——把jQuery定义给一个变量，然后这个变量就代替了之前的$符号，例如var a = $.onConflict();a('div')
3.8.3 jQuery插件
jQuery功能比较有限，想要实现更复杂的效果，可以借助jQuery插件完成
注意：这些插件也是依赖jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件
jQuery插件网站：
jQuery插件库：http://www.jq22.com/
jQuery之家：http://www.htmleaf.com/
bootstrap JS插件
Bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件
3.9 jQuery尺寸、位置操作
3.9.1 jQuery尺寸
| 语法 | 用法 |
|---|---|
| width()/height() | 取得匹配元素的宽度和高度 只算width和height |
| innerWidth()/innerHeight() | 取得匹配元素的宽度和高度 包含padding |
| outerWidth()/outerHeight() | 取得匹配元素的宽度和高度 包好padding、border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素的宽度和高度 包含padding、border、margin |
以上参数为空，则是获取相应的值，返回的是数字型
如果参数为数字，则是修改相应值
3.9.2 jQuery位置
位置主要有三个：offset()、position()、scrollTop()/scrollLeft()
offset()设置或获取元素偏移
offset()方式设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系,返回的是一个对象
xxxxxxxxxx81$(function(){2var a = $('div').offset().left3console.log(a)//返回div离文档左边的距离4$('div').offset({5left:300,6top:2007})//修改div的偏移距离8})该方法有两个属性：left、top。
可以设置元素的偏移：offset({top:300,left:400})
position()获取元素偏移
position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准
xxxxxxxxxx31$(function(){2 $('div').position()3})position()方法只能获取元素的偏移坐标不能设置偏移坐标
scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
scrollTop()方法设置或返回被选元素被卷去的头部
xxxxxxxxxx141$(function(){2$(window).scroll(function(){//页面滚动事件3console.log($(document).scrollTop())//获取卷去头部的距离4})5var a = $('div').offset().top6$(window).scroll(function(){7if($(document).scrollTop()>=a){8$('div').show()9}else{10$('div').hide()11}12})13})14scrollTop()如果里面写了参数，但页面刷新时就会直接跳转到该位置，scrollLeft()同理
