提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录 jQuery介绍jQuery伪数组和DOM元素🌙选择器???筛选器???表单元素选择器 -- 了解表单对象选择器 - 重点???筛选器方法 -- 重点???事件?属性操作?样式操作??类名操作元素内容操作?元素节点操作创建元素：添加元素?替换元素删除元素复制元素 元素尺寸元素位置动画?基本动画自定义动画 JQ高级🌙jquery发送ajax请求???get请求post请求??ajax请求??jsonp请求??全局ajax函数? jquery的标识符jquery扩展???jquery插件🌙表单验证插件颜色动画插件🌙图片懒加载🌙laydate时间插件🌙layer弹出层插件🌙jQuery 介绍
jQuery是js的库。库就是说将很多js的方法封装在了一个文件中,jquery是全球使用最多的js库。
jQuery是前端编程中使用最多的库。曾经风靡全球的原因：
1.jquery中不用考虑兼容 - 因为jquery把兼容问题都封装好了 2.jquery有强大的选择器机制 3.优质的隐式迭代 - 悄悄的 遍历 4.无所不能的链式编程 - 一行代码搞定tab切换
jquery完全不需要考虑兼容性，因为jquery库将js的兼容都封装好了
?官网：https://jquery.com/
?中文方法大全：https://jquery.cuishifeng.cn/
要使用jquery首先需要下载一个jquery文件，然后先引入才能使用。
首先检测一下有没有引入成功，就是输出$或者就jQuery。这是jQuery暴露在全局的唯一的两个函数。
检测引入jquery文件是否成功，弹出$
这个美元符号是jQuery库暴露在全局中的一个函数名称
这个函数可以用选择元素。
jQuery伪数组和DOM元素🌙在jQuery中选择元素，就是暴露在全局的两个函数：
$div = $("div"); //或者 $div = jQuery("div"); console.log($div)获取的结果：
从结果中可以看出来，jQuery获取到的是伪数组，不能使用操作DOM元素的方式来操作jQuery获取到的伪数组，jQuery提供了一套专门用来操作jQuery伪数组的方法来操作，而这套方法是不能被DOM元素使用的。
从伪数组中取下标可以获取到DOM元素：
var oDiv = $("div")[0] // 取下标 var oDiv = $("div").get(下标); // 下标 console.log(oDiv)结果：
经过这样获取后得到的DOM元素才能使用
原生js的dom元素也不能使用jQuery提供的方法操作，但可以将DOM元素转为jQuery伪数组：
var oDiv = document.querySelector("div"); var $div = $(div) console.log($div)效果：
注意：原生js中的window，在jQuery中是 ( w i n d o w ) ， 原 生 j s 中 的 d o c u m e n t ， 在 j Q u e r y 中 是 (window)，原生js中的document，在jQuery中是 (window)，原生js中的document，在jQuery中是(document)，原生js中的this，在jQuery中是$(this)
选择器???基本选择器 - jquery中，选择到的元素统统都是伪数组，没有具体元素这一说,
jquery选中的伪数组不能使用原生dom操作的,dom元素也不能使用jquery伪数组自己的方法 将dom元素作为参数放在$()函数中，就可以得到jquery的伪数组，就能使用jquery伪数组的方法进行操作了
jQuery选择元素可以使用css选择器。
id选择器
$("#id名")类名选择器
$(".类名")标签选择器
$("标签名")属性选择器
$("[name='username']")伪类选择器（表单的伪类）
$("li:first-child") $("li:last-child") $("li:nth-child(数字)") / 第一个元素对应数字是1 $("li:empty") / 空标签jQuery获取元素不会获取单个元素，页面中只要满足选择器的，都会获取到，也就是jQuery获取到的永远是集合。
筛选器???筛选器其实就是简化版的伪类选择器 和伪类选择一样，筛选出需要的元素
$("li:first") $("li:last") $("li:event") $("li:odd") $("li:eq(数字)") / 选择下标是指定数字的元素 $("li:lt(数字)") / 下标小于指定数字的元素 $("li:gt(数字)") / 下标大于指定数字的元素 表单元素选择器 – 了解 $(":input") / 匹配所有的表单元素 包括：文本框（input）下拉列表(select)、文本域(textarea) $(":text") / 匹配单行文本框type="text" $("input:text") $("input[type=text]") $(":password") / 匹配单行密码框 $(":radio") / 匹配单选按钮 $(":checkbox") / 匹配多选按钮var $submit = $(’:submit’) : 会连button标签也选中，因为button标签跟submit一样能提交表单
表单对象选择器 - 重点??? $("input:enabled") / 所有可用表单元素 $("input:disbaled") / 所有禁用表单元素 $("input：checked") / 所有选中的表单元素 -- 重点 $("option:selected") / 被选中的下拉框元素 -- 重点 筛选器方法 – 重点???使用方法来筛选元素
$("li").first() / 元素集合中的第一个 $("li").last() / 元素集合中的最后一个 $("div").next() / div的下一个兄弟元素 $("div").prev() / div的上一个兄弟元素 $("div").nextAll() / div后面的所有兄弟元素 $("div").prevAll() / div前面的所有兄弟元素 $("div").parent() / div的父元素 $("div").parents() / div的所有直系祖宗元素 $("div").eq(数字) / 指定下标的div元素 $("div").find(选择器) / div后代中的的指定元素 $("div").siblings() / div的所有兄弟元素 $("div").children() / div下的所有子元素筛选方法可以进行链式筛选
事件?jquery中的事件是将事件名作为方法名，传入回调函数即可。
$("div").click(function(){ }); $("div").mouseover(function(){ });页面加载事件
在原生js中的页面加载事件是window.onload
在jquery中有两种写法：
$(function(){ }); $(document).ready(function(){ });推荐使用jquery的页面加载事件，jquery的页面加载要比js原生的写法效率高，因为js元素的页面加载事件需要等到页面中的所有资源加载完毕才执行，而jquery的页面加载事件只需要等到页面的标签加载完毕就执行，而不会等待外部文件加载。
标准的事件处理：
on方法用于绑定事件、委托事件、传入参数
$(元素).on(事件类型[,委托的子元素][,传入的参数],处理的函数)使用说明：
事件类型不用加on委托元素必须是子元素传入的参数会传到处理函数中，且在事件对象的data属性中例：
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> <script src="./jquery-3.4.1.js"></script> <script type="text/javascript"> $("ul").on("click","li",[11,22],function(e){ console.log(e); }); </script>执行结果：
off方法用于解绑事件
$(元素).off(事件类型,处理函数)trigger方法用于手动触发事件：
$(元素).trigger(事件类型,处理函数)只能触发一次的事件：
$(元素).one(事件类型,处理函数);特殊事件：
hover事件，包含鼠标放上去和鼠标离开
$("元素").hover(鼠标放上去的处理函数,鼠标离开的处理函数) 属性操作?设置属性：
$("div").prop(属性名,属性值);获取属性：
$("div").prop(属性名);设置自定义属性：
$("div").attr(属性名,属性值);获取自定义属性：
$("div").attr(属性名);删除属性：
$("div").removeProp(属性名); $("div").removeAttr(属性名); // 删除自定义属性当操作jquery对象的时候，不需要遍历操作每一个，直接操作的就是每一个元素。因为在jquery内部自带遍历操作。这就是隐形迭代。
each方法，用来遍历元素，参数有两个，下标和值。
样式操作??设置样式：
$("div").css(css属性名,值); // 设置一个样式 $("div").css({ // 设置多个样式 css属性名:值, css属性名:值 })获取样式：
$("div").css(css属性名); 类名操作 $("div").addClass(类名); / 添加类名 $("div").removeClass(类名); / 删除类名 $("div").toggleClass(类名); / 在添加和删除之间切换 $("div").hasClass(类名); / 判断元素是否有这个类名，有是true，没有是false补充：
$(this).index() / index方法是获取元素的下标 $("li").index(3) / 将li标签的index下标设置为3链式编程在这里体现的淋漓尽致!
在链式编程中，通常需要操作上一个已经操作过的元素对象，这时候使用end方法，可以将当前返回的对象转到上一个操作过的对象
元素内容操作? $("div").text(); / 获取元素内容 === 相当于 div.innerText $("div").text("盒子"); / 设置元素内容 === 相当于 div.innerText = "盒子" $("div").html(); / 获取元素代标签的内容 === 相当于 div.innerHTML $("div").html("<b>文字</b>"); / 设置元素带标签的内容 === 相当于 div.innerHTML = "<b>文字</b>" $("input").val(); / 获取表单元素的值 === 相当于 input.value $("input").val("请输入用户名"); / 设置表单元素的内容 === 相当于 input.value = "请输入用户名"例：
var box = $("<div class='box'>div盒子</box>"); console.log(box);创建的结果：
给父元素追加子元素：
父元素.append(子元素)给父元素最前面添加子元素：
父元素.prepend(子元素);将子元素添加到父元素中
/ 将子元素追加到父元素中 子元素.appendTo(父元素); / 将子元素添加到父元素最前面 子元素.prependTo(父元素);添加兄弟元素：
/ 添加下一个兄弟元素 元素.after(下一个兄弟元素);添加上一个兄弟元素：
元素.before(上一个兄弟元素);将元素添加到某个元素的前面或后面：
// 将元素添加到某个元素前面 要添加的元素.insertBefore(元素); // 将元素添加到某个元素后面 要添加的元素.insertAfter(元素); 替换元素使用新元素替换某个元素：
某个元素.replaceWith(新元素)用新元素替换掉某个元素：
新元素.replaceAll(某个元素) 删除元素删除元素内部所有标签和内容，让自己变成一个空标签
元素.empty() 元素.remove() // 删除自己和自己内部所有内容 复制元素 元素.clone([是否复制自身的事件][,是否复制子元素的事件])使用说明：
jqueyr中的复制元素是深复制，复制标签结构和内容这个方法接收两个参数，参数1代表是否把元素的事件也克隆出来，默认为false；参数2代表是否把元素的子元素的事件克隆出来，默认跟随第一个参数的值。如果不复制父元素的事件，子元素的事件也不能复制 元素尺寸元素内容区域尺寸操作：
元素.height(); / 获取元素内容区域高度 元素.height(高度); / 设置元素内容区域高度 元素.width(); / 获取元素内容区域宽度 元素.width(宽度); / 设置元素内容区域宽度获取元素内部区域尺寸：
元素.innerHeight(); / 获取元素内部的高度，包含padding，但不包含border 元素.innerWidth(); / 获取元素内部的宽度，包含padding，但不包含border获取元素占据页面的尺寸：
元素.outHeight(); / 获取元素占据的高度，包含padding和border，不包含margin 元素.outHeight(true); / 获取元素占据的高度，包含padding和border，包含margin 元素.outWidth(); / 获取元素占据的宽度，包含padding和border，不包含margin 元素.outWidth(true); / 获取元素占据的宽度，包含padding和border，包含margin 元素位置元素相对页面的位置操作：
元素.offset(); / 获取到元素在页面中的位置，包含left值和top值，返回一个对象 元素.offset({left:值,top:值}); / 将元素设定到指定的位置，使用relative元素相对父元素的值：
元素.position(); / 获取元素相对于定位的父元素的偏移值，不管设置的是什么，获取到的永远是left和top获取元素滚动过的距离：
$(window).scrollTop(); / 获取元素滚动过的高度 $(window).scrollLeft(); / 获取元素滚动过的宽度 $(window).scrollTop(值); / 设置元素滚动过的高度 $(window).scrollLeft(值); / 设置元素滚动过的宽度动画? 基本动画
共同的参数： 1.时间 - 使用指定的毫秒数完成这次动画 - 也可以使用这次：‘slow(600)/fast(200)/normal(400)’ 2.速度方式 - 匀速(linear)/先慢后快再慢(swing) 3.回调函数 - 这次运动结束以后执行的函数
显示：
元素.show(); / 让元素从隐藏状态变为显示状态（从display:none;变为 display:block;） 可选参数1：时间，毫秒数 == 让元素在规定的时间内显示（操作的属性有很多） 可选参数2：速度方式，匀速或加速或减速 可选参数3：动画结束后执行的回调函数隐藏：
元素.hide()； / 让元素从显示状态切换到显示状态 可选参数和show一样切换显示隐藏：
元素.toggle(); / 让元素在隐藏和显示状态切换 可选参数和show一样元素上下拉动隐藏显示：
元素.slideDown() / 让元素向下拉动显示 元素.slideUp() / 让元素向上拉动隐藏 元素.slideToggle() / 让元素切换上下拉动显示隐藏 参数和show一样元素透明度显示隐藏：
元素.fadeIn() / 让元素从透明度0变为1的显示 元素.fadeOut() / 让元素从透明度1变为0的隐藏 元素.slideToggle() / 让元素切换透明度显示隐藏 参数和show一样让元素切换到指定的透明度：
元素.fadeTo(毫秒数,透明度,速度方式,结束的回调函数) / 让元素在指定的时间内切换到指定的透明度 自定义动画开启动画：
元素.animate({ css属性名:属性值, css属性名:属性值, 。。。 }[,毫秒数][,速度方式][,执行结束的回调函数]);停止动画：
元素.stop(); / 将动画停止在当前状态 元素.finish(); / 将动画停止在结束状态stop有两个参数，值都是布尔值：
1.参数1表示是否停止后续的动画，true表示停止，false表示不停止，默认是false
2.参数2表示是否停止在当前动画的结束位置，true表示停止的当前动画的结束位置，false表示停止在当前位置，默认为false
动画的链式操作：
通常在一个动画中的所有css属性是同时进行的，想要将所有动画按顺序执行的话，可以将多个动画嵌套在动画结束的回调函数中，但是这样容易造成回调地狱，所以jquery提供了一个动画的链式操作，让所有动画组成一个队列，按顺序执行，例：
$("div").animate({ left:"300px" }).animate({ top:"300px" }).animate({ width:"300px" }).animate({ height:"50px" }) });效果图：
看的不过瘾吗？那现在来点高级的吧！
JQ高级🌙 jquery发送ajax请求??? get请求jquery针对ajax封装的方法 - 给自己用的方法 get请求：$.get(url-必填,多个可选项) 请求携带的数据 - 请求主体 - 可以是对象，也可以是字符串
语法：
$.get('请求地址', 参数, 成功的回调函数, 'json'); 参数1：请求地址 参数2：请求携带的数据，可以是拼接的字符串形式，也可以是对象形式 参数3：成功的回调函数，参数为响应回来的的数据 参数4：希望返回的数据格式例：
$.get("get.php",{id:1},function(res){console.log(res);},"json"); post请求??post请求的方法跟get请求方法的使用方式一模一样的
语法：
$.post('请求地址', 参数, 成功的回调函数, 'json'); 参数1：请求地址 参数2：请求携带的数据，可以是拼接的字符串形式，也可以是对象形式 参数3：成功的回调函数，参数为响应回来的的数据 参数4：希望返回的数据格式例：
$.post("post.php",{id:1},function(res){console.log(res);},"json"); ajax请求??语法：
$.ajax({ url: 请求地址, / 必填，请求的地址 type: 请求方式, / 选填，请求方式，默认是 GET（忽略大小写） data: {}, / 选填，发送请求是携带的参数 dataType: 'json', / 选填，期望返回值的数据类型，默认是 string async: true, / 选填，是否异步，默认是 true success () {}, / 选填，成功的回调函数 error () {}, / 选填，失败的回调函数，参数有xhr，是ajax对象，status状态，err错误信息 cache: true, / 选填，是否缓存，默认是 true timeout: 1000, / 选填，超时时间，单位毫秒 context: div, / 选填，回调函数中的 this 指向，默认是 ajax 对象 })jsonp请求??
语法：
$.ajax({ url: 请求地址, dataType: 'jsonp', data: { name: 'Jack', age: 18 }, success (res) { console.log(res) }, jsonp: 'cb', / jsonp 请求的时候回调函数的 key jsonpCallback: 'fn' / jsonp 请求的时候回调函数的名称 })全局ajax函数?
全局ajax函数指的ajax的钩子函数。钩子函数指的是一件事情执行到某个阶段的时候自动调用的函数。 ajax的全局函数，也称为 钩子函数. 钩子函数：在一个完整的流程中，需要经历到某个阶段的时候，打断并执行一个函数
jquery将ajax发送的过程，捕获到，到某个阶段的时候，可以去执行一个函数 - 全局函数 例：jquery将地址设置好了，请求头设置了，就差send了，我需要在send之前，执行一个函数 - 使用jquery的ajax全局函数
有表a、b、c，我需要将a、b、c三个表中数据请求回来 - 规定需要3个ajax 需求：当所有数据都请求回来的时候，再一次性加载这些数据到html中.
第一个请求在开始的时候就会触发这个函数：
$(window).ajaxStart(function () { console.log('有一个请求开始了') })任意一个请求在 准备 send 之前 会触发这个函数：
$(window).ajaxSend(function () { console.log('有一个要发送出去了') })任意一个请求在 成功 的时候就会触发这个函数：
$(window).ajaxSuccess(function () { console.log('有一个请求成功了') })任意一个请求在 失败 的时候就会触发这个函数：
$(window).ajaxError(function () { console.log('有一个请求失败了') })任意一个请求在 完成 的时候就会触发这个函数：
$(window).ajaxComplete(function () { console.log('有一个请求完成了') })任意一个请求在 结束 的时候就会触发这个函数：
$(window).ajaxStop(function () { console.log('有一个请求结束了') }) jquery的标识符定义在全局中的变量、函数 都容易被覆盖 - 在污染全局
jquery的开头都是 获 取 时 j Q u e r y 。 如 果 在 页 面 引 入 别 人 的 插 件 ， 别 人 的 插 件 写 的 也 是 要 用 获取时jQuery。如果在页面引入别人的插件，别人的插件写的也是要用 获取时jQuery。如果在页面引入别人的插件，别人的插件写的也是要用或jQuery开头的，那么会和引入的jquery产生冲突。jquery早已预料到了这种情况，所以jquery可以将$或jQuery的使用权交出，或换成其他的操作符。
jQuery.noConflict()； / 交出了$使用权，$符号不能使用了，只能使用jQuery jQuery.noConflict(true)； / 交出了$和jQuery的使用权，$符号和jQuery都不能使用了 var 变量 = jQuery.noConflict(true); / 使用自定义的变量代替$和jQueryjquery扩展??? 为什么要扩展？因为jquery虽然很强大，但是不会将所有需要的功能都封装好，有些我们实际应用需要的东西，他就没有，比如：全选功能/数组去重功能 需要自己写 - 希望调用方式使用jquery的使用方式来使用 - 修改源代码 我们在实际开发中，是不修改源代码的，为什么？ 因为我们在开发的时候使用的jquery，当项目在上线以后的时候，用的不是开发的时候这个jquery jquery提供了扩展的接口 可以自己封装一些函数，这个函数可以像jquery一样去掉用他 接口有2种：1.给元素集合伪数组使用的方法 2.给自己使用的方法
jquery总共提供了两类方法，一类是元素集合调用，一类是自己调用：
$("div").css(); $.get();jquery提供的方法在情况下，会写的很复杂，所以提供了一个插件机制，可以向jquery中扩展自己的方法。
向元素集合扩展方法：
jQuery.fn.extend({ fn:function(){ console.log(123); } }) / 参数是一个对象，对象中的方法是对每个元素集合扩展的方法这样写好以后，就可以使用元素集合调用这个方法了：
$("div").fn(); / 123向jquery自身扩展方法：
jQuery.extend({ fn:function(){ console.log(456); } }); / 参数是一个对象，对象中的方法是对自身扩展的方法jquery插件🌙
网址：
jquery之家：http://·/jQuery
jq22:https://·/
表单验证插件jquery-validation
下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip 使用：
1.引入jquery
2.引入jquery.validate.js
3.引入语言包
4.form标签调用validate方法
5.自定义错误信息样式，使用类名error
6.自定义验证方法：
jQuery.validator.addMethod("checkTel",function(v){ var reg = /^[1][345789]\d{9}$/; if(!reg.test(v)){ return false; }else{ return true; } },"手机号不正确"); / 验证规则是checkTel，提示信息是固定的颜色动画插件🌙
下载网址：https://github.com/jquery/jquery-color
jquery.color.js
引入插件即可，写颜色动画就好了
图片懒加载🌙
下载网址：https://github.com/pedromenezes/jQuery-lazyload
jquery.lazyload
引入jquery引入插件名将图片的src属性换成data-original属性，给图片标签加宽高给图片加类名，用于控制js代码中调用方法：$("img.类名").lazyload();自定义占位图片：
$("img.lazy").lazyload(function(){ placeholder:"image/1.gif", });laydate时间插件🌙
官网：http://·/laydate/
下载插件，引入核心的js文件
<body> <input type="text" id="time"> </body> <script src="laydate.js"></script> <script> / 初始化时间，执行一个laydate实例 laydate.render({ elem:"#time", type:"datetime", / 可以指定类型：month,year,datetime,time mark:{ // 标记 '0-6-2':"儿童节", '0-0-5':'发工资', '2019-6-30':'离职', '2019-6-28':'', }, }); </script>效果：
layer弹出层插件🌙
弹出层网址：http://layer.layui.com/
加载层
<body> <button id="loading">加载</button> </body> <script src="jquery.js"></script> <script src="layer.js"></script> <script> // loading层 $("#loading").click(function(){ var index1 = layer.load(1,{ shade:[0.1,'#666'], // 0.1表示透明度，#666表示背景颜色 shadeClose:true, // 表示点击遮罩关闭弹出层，默认为false }); // 关闭指定的弹出层:layer.close(弹出层id); setTimeout(function(){layer.close(index1);},3000); }); </script>效果：
CSDN技术交流群： 不限萌新大佬，欢迎加入我们的技术圈。
QQ交流群：925570980
微信群：
博主汇总不易，喜欢的朋友们可以收藏。 欢迎一键三连哦~
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
