目录
1.jQuery 的概念
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码做更多的事情。
j就是JavaScript; Query 查询;意思就是查询s，把s中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码，优化了DOM 操作、事件处理、动画设计和Ajax交互学习jQuery本质: 就是学习调用这些函数(方法)
2.jQuery 的优点
优点:
- 轻量级。核心文件才几十kb，不会影响页面加载速度跨浏览器兼容。
- 基本兼容了现在主流的浏览器链式程、隐式迭代
- 对事件、样式、动画支持，大大简化了DOM操作支持插件扩展开发。
- 有着丰富的第三方的插件，例如树形菜单、日期控件、轮播图等
- 免费、开源
3.jQuery 的下载
官网地址:https://jquery.com/
版本:
1x:兼容IE678等低版本浏览器，官网不再更新
2x:不兼容I678等低版本浏览器，官网不再更新
3x:不兼容IE678等低版本浏览器，是官主要更新维护的版本
4. jQuery 的入口函数
$(function () { 此处是页面 DOM 加载完成的入口 });$(document).ready(function () { 此处是页面 DOM 加载完成的入口 });
1.等着DOM 结构染完毕即可执行内部代码，不必等到所有外部资源加载完成，Query 帮我们完成了封装.
2.相当于原生js 中的DOMContentLoaded.
3.不同于原生s 中的load 事件是等页面文档、外部的is 文件、CSS文件、图片加载完毕才执行内部代码
4.更荐使用第一种方式
5.jQuery 的顶级对象 $
1.$是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$。2.是Query的顶级对象，相当于原生JavaScript中的window。把元素利用S包装成Query对象，就可以调用jQuery的方法。
6.DOM/JQuery对象的区别
DOM/JQuery对象
jQuery对象本质是:利用对DOM对象包装后产生的对象(伪数组形式存储)
7.jQuery 对象和 DOM 对象
DOM对象与jQuery对象之间是可以相互转换的。因为原生is比jQuery更大，原生的一些属性和方法jQuery没有给我们封装要想使用这些属性和方法需要jQuery对象转换为DOM对象才能使用。
1.DOM对象转换为iQuery 对象:$(DOM对象)
$(div)
2.jQuery对象转换为DOM对象(两种方式
- $(div') [index]index 是索引号
- $(div).get(index) index 是索号
jQuery选择器
8.jQuery样式操作
8.1操作css方法
jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式
1.参数只写属性名，则是返回属性值
$(this).css("color")
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color", "red")
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"})
8.2设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点
1.添加类
$( “div”)addClass(current );
2.移除类
$(“div”).removeClass("current');
3.切换类
$("div).toggleClass(current');
例如：Tab栏切换
8.3类操作与className区别
原生JS中className会覆盖元素原先里面的类名
jQuery里面类操作只是对指定类进行操作（追加），不影响原先的类名
9.jQuery效果
jQuery给我们封装了很多动画效果，最为常见的如下:
基本动画
/*注意：动画的本质是改变容器的大小和透明度*/
/*注意：如果不传参数是看不到动画*/
/*注意：可传入特殊的字符 fast normal slow*/
/*注意：可传入数字 单位毫秒*/
/*1.展示动画*/
$('li').show();
/*2.隐藏动画*/
$('li').hide();
/*3.切换展示和隐藏*/
$('li').toggle();
滑入滑出
/*注意：动画的本质是改变容器的高度*/
/*1.滑入动画*/
$('li').slideDown();
/*2.滑出动画*/
$('li').slideUp();
/*3.切换滑入滑出*/
$('li').slideToggle();
对应案例：案例-《下拉菜单》
淡入淡出
/*注意：动画的本质是改变容器的透明度*/
/*1.淡入动画*/
$('li').fadeIn();
/*2.淡出动画*/
$('li').fadeOut();
/*3.切换淡入淡出*/
$('li').fadeToggle();
$('li').fadeTo('speed','opacity');
对应案例：案例-《轮播图》
自定义动画
/*
* 自定义动画
* 参数1：需要做动画的属性
* 参数2：需要执行动画的总时长
* 参数3：执行动画的时候的速度
* 参数4：执行动画完成之后的回调函数参数
(1)params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
(2)speed:三种预定度之一的字符串(“slow”“normal”，or“fast”)或表示动画时长的毫秒数值(如:1000)(3)easing:(Optional)用来指定切换效果，默认是“swing”可用参数“linear”
(4)fn:回调函数在动画完成时执行的函数，每个元素执行一次
* */
$('#box1').animate({left:800},5000);
$('#box2').animate({left:800},5000,'linear');
$('#box3').animate({left:800},5000,'swing',function () {
console.log('动画执行完成');
});
对应案例：案例-《手风琴菜单》
动画队列
/*
jQuery中有个动画队列的机制。
当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，
等前面的动画完成后再开始执行。
可是用户的操作往往都比动画快，
如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，
影响到效果。
*/
stop使用：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
/*1.停止当前动画 如果动画队列当中还有动画立即执行*/
//$('div').stop();
/*2.和stop()效果一致 说明这是默认设置*/
//$('div').stop(false,false);
/*3.停止当前动画 清除动画队列*/
//$('div').stop(true,false);
/*4.停止当前动画并且到结束位置 清除了动画队列*/
//$('div').stop(true,true);
/*5.停止当前动画并且到结束位置 如果动画队列当中还有动画立即执行*/
$('div').stop(false,true);
10.jQuery 属性操作
10.1设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的 href，比如 <input>元素里面的type.
1.获取属性语法
prop(属性)
例如：$("a").prop("herf")
2.设置属性语法
prop(属性”"属性值")
10.2设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index =“1“
1.获取属性语法
attr(属性) //类似原生 getAttributer
2.设置属性语法
attr(属性”"属性值") //类似原生 setAttributer
5.3数据缓存 data()
data0方法可以在指定的元素上存取数据，并不会修改DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除.
1.附加数据语法
data(”name""value") //向被选元素附加数据
2.获取数据语法
date("name")
// 向被选元素获取数据
同时，还可以读取HTML5自定义属性 data-index，得到的是数字型
11.jQuery文本属性值
主要针对元素的内容还有表单的值操作。
1.普通元素内容html()( 相当于原生innerHTML)
//获取元素的内容
htmI(“内容)//设置元素的内容
例如：$("div").html
2普通元素文本内容text()(相当与原生innerText)
//获取元素的文本内容
text(文本内容”)//设置元素的文本内容
例如：$("div").text
3.表单的值val()(相当于原生value)
12.jQuery元素操作
主要是遍历、创建、添加、删除元素操作。
12.1遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历
语法1:
$("div").each(function (index，domEle)[ xxx;
1.each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2.里面的回调函数有2个参数:index 是每个元素的索引号;demEle 是每个DOM元素对象，不是Jquery对象3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法2 :
$.each(object ,function (index,element) { xxx; })
1.seach0方法可用于遍历任何对象。主要用于数据处理，比如数组，对象2.里面的函数有2个参数:index是每个元素的索引号;element 遍历内容
12.2创建元素
语法:
$("<li> </li>");
动态的创建了一个<li>把内容放入匹配元素内部最后面，类似原生appendChild
6.4 删除元素
element.remove（）// 删除匹配的元素(本身)
element.empty（） // 删除匹配的元素集合中所有的子节点
element.html(““) // 清空匹配的元素内容
13.jQuery尺寸、位置操作
13.1 jQuery尺寸
1.以上参数为空，则是获取相应值，2.返回的是数字型如果参数为数字，3.则是修改相应值
参数可以不必写单位
1.1 width() / height() 尺寸操作
width() / height() 可以获取设置元素的宽高，但是这个值 不包含 border，padding，margin，只包含元素本身的 width 与 height，括号内无参数为获取操作，加上对应数值为赋值设置操作获取宽高（本身大小）：
<style> div{ width: 200px; height: 200px; padding: 20px; margin: 20px; border: 20px solid rgb(131, 131, 131); background-color: rgb(245, 203, 203); } </style> </head> <body> <div></div> <script> console.log($('div').width()) console.log($('div').height()) </script> </body>
💛 我们只拿到了宽高 200，不包含内外边距和边框，并且得到的是数字型设置宽高（本身大小）：
<style> div{ width: 200px; height: 200px; padding: 20px; margin: 20px; border: 20px solid rgb(131, 131, 131); background-color: rgb(245, 203, 203); } </style> </head> <body> <div></div> <script> $('div').width(300) $('div').height(300) </script> </body>
💛 宽高均被设置成了 300
1.2 innerWidth() / innerHeight() 尺寸操作
innerWidth() / innerHeight() 可以获取设置元素的宽高，但是这个值 不包含 border，margin，只包含元素本身的 width 与 height 和 padding，括号内无参数为获取操作，加上对应数值为赋值设置操作获取宽高（本身大小 + padding）：
<style> div{ width: 200px; height: 200px; padding: 20px; margin: 20px; border: 20px solid rgb(131, 131, 131); background-color: rgb(245, 203, 203); } </style> </head> <body> <div></div> <script> console.log($('div').innerWidth()) console.log($('div').innerHeight()) </script> </body>
💛 我们拿到了宽高 以及内边距 padding，不包含外边距和边框，得到的是数字型获取宽高（本身大小 + padding）：
<style> div{ width: 200px; height: 200px; padding: 20px; margin: 20px; border: 20px solid rgb(131, 131, 131); background-color: rgb(245, 203, 203); } </style> </head> <body> <div></div> <script> $('div').innerWidth(300) $('div').innerHeight(300) </script> </body>
💛 设置的值虽然为 300，但是由于 innerWidth 或 innerHeight 是包含padding 的，由于此处 padding 为 20，所以会自动将内容区域改为 260（300-20-20）
1.3 outerWidth() / outerHeight() 尺寸操作
outerWidth() / outerHeight() 可以获取设置元素的宽高，但是这个值 不包含 margin，只包含元素本身的 width 与 height，padding，border，括号内无参数为获取操作，加上对应数值为赋值设置操作获取宽高（本身大小 + padding + border）：
<style> div{ width: 200px; height: 200px; padding: 20px; margin: 20px; border: 20px solid rgb(131, 131, 131); background-color: rgb(245, 203, 203); } </style> </head> <body> <div></div> <script> console.log($('div').outerWidth()) console.log($('div').outerHeight()) </script> </body>
💛 我们拿到了宽高 以及内边距 padding 还有边框 border，不包含外边距，得到的是数字型设置宽高（本身大小 + padding + border）：
<style> div{ width: 200px; height: 200px; padding: 20px; margin: 20px; border: 20px solid rgb(131, 131, 131); background-color: rgb(245, 203, 203); } </style> </head> <body> <div></div> <script> $('div').outerWidth(300) $('div').outerHeight(300) </script> </body>
💛 设置的值虽然为 300，但是由于 outerWidth 或 outerHeight 是包含padding 和 border 的，由于此处 padding 和 border 均为 20，所以会自动将内容区域改为 220（300-20-20-20-20）
1.4 outerWidth(true) / outerHeight(true) 尺寸操作
既然边框，内边距都能获取过来了，那么外边距是不是也能获取来呢？对啦，只需要将参数改为 true 就可以获取包含所有边距边框的尺寸，outerWidth(true) / outerHeight(true) 可以获取设置元素的宽高，获取值包含元素本身的 width 与 height，padding，border，以及margin，由于参数只能为 true，所以这个方法只能获取，不能设置🧀 注意：我们可以发现，jQuery 给了我们可以拿到外边距 margin 的方法，而原生 JS 没有给我们该类方法
获取包含 padding，border，margin 的元素尺寸：
<style> div{ width: 200px; height: 200px; padding: 20px; margin: 20px; border: 20px solid rgb(131, 131, 131); background-color: rgb(245, 203, 203); } </style> </head> <body> <div></div> <script> console.log($('div').outerWidth(true)) console.log($('div').outerHeight(true)) </script> </body>
💛 我们拿到了宽高 以及内边距 padding，border 以及 margin，得到的是数字型
二：位置方法 offset
位置方法主要有四个，分别是 offset()，position()，scrollTop，scrollLeft，此版块为 offset() 相关方法2.1 offset() 位置方法
offset() 返回的是包含了相对于文档的位置的一个对象，对象内容有元素的 top left 信息，并且这个信息是相对于文档的，无参数为获取，有参数为设置，大家需要记住一点，offset 的方法无论元素有没有父元素，也不论父元素有没有定位，得到的都是到文档的位置，下面举例证明一下：offset() 获取位置：
无父元素：div{ position: absolute; left: 30px; top: 20px; width: 200px; height: 200px; background-color: rgb(245, 203, 203); } </style> </head> <body> <div></div> <script> console.log($('div').offset()) </script> </body>
有父元素（无定位）：
.father{ width: 500px; height: 500px; background-color: rgb(173, 173, 173); } .son{ position: absolute; left: 30px; top: 20px; width: 200px; height: 200px; background-color: rgb(245, 203, 203); } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <script> console.log($('.son').offset()) </script> </body>
有父元素（有定位）：
.father{ position: relative; top: 20px; width: 500px; height: 500px; background-color: rgb(173, 173, 173); } .son{ position: absolute; left: 30px; top: 20px; width: 200px; height: 200px; background-color: rgb(245, 203, 203); } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <script> console.log($('.son').offset()) </script> </body>
offset() 设置位置：
以对象形式设置 top 或 left
div{ position: absolute; width: 200px; height: 200px; background-color: rgb(245, 203, 203); } </style> </head> <body> <div></div> <script> console.log($('div').offset({ 'top':'20', 'left':'20' })) </script> </body>
💛 我们成功设置了其 top 与 left
2.2 offset().top 位置方法
获取到文档顶部的距离，同样不论有无父元素或定位，均为到文档顶部
.father{ position: relative; top: 20px; width: 500px; height: 500px; background-color: rgb(173, 173, 173); } .son{ position: absolute; left: 30px; top: 20px; width: 200px; height: 200px; background-color: rgb(245, 203, 203); } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <script> console.log($('.son').offset().top) </script> </body>
💛 拿到了其到文档顶部的距离
2.3 offset().left 位置方法
获取到文档左侧的距离，同样不论有无父元素或定位，均为到文档左侧.father{ position: relative; top: 20px; left: 40px; width: 500px; height: 500px; background-color: rgb(173, 173, 173); } .son{ position: absolute; left: 30px; top: 20px; width: 200px; height: 200px; background-color: rgb(245, 203, 203); } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <script> console.log($('.son').offset().left) </script> </body>
💛 拿到了其到文档左侧的距离
三：位置方法 position()
位置方法主要有四个，分别是 offset()，position()，scrollTop，scrollLeft，此版块为 position() 相关方法，这个方法是为了解决如上不能获取到距离父元素的距离而出现的方法，也就是说这个方法可以得到距离有定位父元素的左和上方距离，若要单独得到某个 top 或 left，position().top 或 position().left 即可，此版块不多解释啦，同上注意：position() 只能获取，不能设置！！！
position() 获取位置：
.father{ position: relative; top: 20px; left: 40px; width: 500px; height: 500px; background-color: rgb(173, 173, 173); } .son{ position: absolute; left: 30px; top: 20px; width: 200px; height: 200px; background-color: rgb(245, 203, 203); } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <script> console.log($('.son').position()) </script> </body>
💛 拿到了其距离有定位父元素的左和上方距离
四：页面滚动
页面滚动我们先要知道一个页面滚动的事件：$(window).scroll( function(){ } )
scrollTop() 和 scrollLeft() 一个是返回被卷去的头部，另一个是被卷去的左侧，二者使用方法一样，此文章只讲 scrollTop()4.1 页面滚动事件
<script> $(window).scroll(function(){ console.log($(document).scrollTop()); }) </script>
💛 我们可以看到，滚动页面触发了页面滚动事件，被卷上去的距离在不断输出4.2 使页面到某个位置
要使页面到某个位置，使用的仍然是 scrollTop()，只不过需要将你目标位置写为参数即可<body> <div></div> <button>点击后页面到100的位置</button> <script> $('button').click(function(){ $(document).scrollTop(100) console.log($(document).scrollTop()); }) </script> </body>
💛 点击后页面滚动到了 卷上去100px 的位置案例一：侧边栏固定及回顶弹窗
依旧是我们的这个页面：
上次我们是用原生JS 实现的，这次我们用 jQuery 来实现一样的功能，下面是原生 JS 的页面实现文章：
淘宝侧边栏下滑页面固定案例_卡卡西最近怎么样的博客-优快云博客
https://blog.youkuaiyun.com/weixin_52212950/article/details/123618721jQuery 实现代码：
完整的页面样式布局代码小伙伴们自己去上方链接文章中复制噢，把 script 标签内的内容换成这个即可<script> $(function(){ long1=$('.innercenter').offset().top long2=$('.box').offset().top-$('.innercenter').offset().top long3=$('.innerbottom').offset().top $(window).scroll(function(){ if($(document).scrollTop()>=long1){ $('.box').css({ 'position':'fixed', 'top':long2 }) }else{ $('.box').css({ 'position':'absolute', 'top':'300px' }) }if($(document).scrollTop()>=long3){ $('.center').fadeIn(1000) }else{ $('.center').fadeOut(1000) } }) }) </script>
案例二：缓动动画回到顶部
原生JS我们自己写了缓动动画回到了页面顶部，jQuery 既然给我们封装好了缓动动画 animate，那不用白不用呢是不是🍿 注意点：
调用动画函数方法的应该是一个元素，而不是一个文档，此处要让页面文档滚动到0，但是我们应该写成 $('html')，不能写成文档形式 $(document)
<script> $(function(){ long1=$('.innercenter').offset().top long2=$('.box').offset().top-$('.innercenter').offset().top long3=$('.innerbottom').offset().top $(window).scroll(function(){ if($(document).scrollTop()>=long1){ $('.box').css({ 'position':'fixed', 'top':long2 }) }else{ $('.box').css({ 'position':'absolute', 'top':'300px' }) }if($(document).scrollTop()>=long3){ $('.center').fadeIn(1000) }else{ $('.center').fadeOut(1000) } }) $('a').click(function(){ $('html').animate({ 'scrollTop':'0', },1000) }) }) </script>
14.jQuery选择器
14.1jQuery选择器
原生JS,获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取素统一标准
$(“选择器”) // 里面选择器直接写CSS 选择器即可，但是要加引号
14.2层级选择器
14.3隐式迭代(重要)
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式选代
简单理解:给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作方便我们调用。
14.4jQuery 筛选选择器
14.5 jQuery 筛选方法(重点)
新浪下拉菜单:
14.6jQuery 的排他思想(p109)
想要多选一的效果，排他思想:当前元素设置样式，其余的兄弟元素清除样式
14.7链式编程
链式编程是为了节省代码量，看起来更优雅
$(this).css('color', 'red').sibling.css('color', ");等于（自己为red,其他为_）
$(this).css('color', 'red')+ $(this).sibling.css('color', ")
15. jQuery 事件
15.1 jQuery 事件注册
单个事件注册
语法:
element.事件(function()[})
$(”div").click(function()[ 事件处理程序 })
其他事件和原生基本一致
比如mouseover、mouseout、 blur、focus、change、 keydown、keyup、resize、 scroll等
15.2 jQuery事件处理
15.2.1事件处理on()绑定事件
on（）方法在匹配元素上绑定一个或多个事件的事件处理函数
语法:
element.on(events,[selector],fn)
1.events:一个或多个用空格分隔的事件类型，如"click"或"keydown"
2.selector:元素的子元素选择器
3fn:回调函数即绑定在元素身上的侦听函数
on()方法优势1:
可以绑定多个事件，多个处理事件处理程序。
如果事件处理程序相同
$("div").on("mouseover mouseout",function(){ $(this).toggleClass("current");); });on()方法优势2:
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
on()方法优势3:
15.2.2 事件处理off解绑事件
off()方法可以移除通过on0方法添加的事件处理程序
$("p”)off() // 解元素所有事件处理程序
$("p").off("click") // 解绑p素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click”，"li"); // 解绑事件委托
如果有的事件只想触发一次，可以使用one0来绑定事件
$("ul").one("click", "li", function () {
$(this).css("color", "green");
})15.2.3自动触发事件 trigger()
有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
元素.triggerHandler("事件")就是不会触发元素的默认行为
15.3 jQuery事件对象
15.3.1
15.3.2 jQuery 对象的拷贝方法
如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$.extend()方法
语法:
$.extend([deep],target,object1,[objectN]) 会覆盖target里面原来的数据
1.deep: 如果设为true为深拷贝，默认为false 浅拷贝
2.target:要拷贝的目标对象
3.object1:待拷贝到第一个对象的对象。
4.objectN:待拷贝到第N个对象的对象。
5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
6.深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
15.3.3 jQuery多库共存的2种方法
问题概述:
jQuery使用$作为标示符，随着jQuery的流行,其他js 库也会用这$作为标识符，这样一起使用会引起冲突。
客观需求:
需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery解决方案:
1.把里面的$符号 统一改为jQuery。比如jQuery('div')
2.jQuery变量规定新的名称:$.noConflict() var xx= $.noConflict();
15.3.4 jQuery插件
jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。注意:这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件jQuery插件常用的网站:
1.jQuery插件库 http://www.jq22.com/
2.jQuery之家 http://www.htmleaf.com/ 推荐
jQuery插件使用步骤:
1.引入相关文件。(jQuery文件 和 插件文件)
2.复制相关html、css、js(调用插件)。
2.图片懒加载(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)当我们页面滑动到可视区域，再显示图
扫一扫
501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
