简介
JQuery是一个疾速的，小的，丰盛的JavaScript库（类指函数，工具的汇合）。使的HTML文档遍历和操作，事件处理，动画和Ajax等操作更加简略。JQuery官网：https://jquery.com/JQuery文档：https://www.bejson.com/apidoc/jquery/JQuery特点
轻量，开源，收费，易于学习兼容性解决弱小的选择器链式操作便捷的DOM操作牢靠的事件机制封装了简略易用的ajax操作丰盛的插件JQuery筹备工作
下载JQuery的形式：官网下载 npm下载 CDN形式（间接引入，不必下载） JQuery版本：2.0以上的版本不兼容IE8及以下的版本JQuery兼容性引入形式：<!--chrome firefox Safari opera IE9+ --><!--[if gt IE 8]> --><script src='../jquery-3.5.1.min.js'></script><!-- <![endif]--><!-- IE8以及以下 --><!--[if lte IE 8]><script src='../jquery-1.12.4.min.js'></script><![endif]-->JQuery的应用
<script src='../jquery-3.5.1.min.js'></script> <script> JQuery入口 $(document).ready(function(){ ... }) JQuery简写入口 $(function(){ ... }) </script>ready示意页面中DOM加载结束后触发load示意页面中所有所有加载结束后触发JQuery的dom对象
获取dom对象：var xxx=$('xxx')应用JQuery选择器获取的对象，不是原生的DOM对象，称之为JQuery dom对象原生dom转为JQuery dom$(原生dom) --> JQuery domJQuery dom转为原生domJQuery dom[下标] --> 原生domJQuery的全局对象
$ 相当于 JQuery$() 等同于 JQuery()$('xxx'（字符串）)：获取对象$('<xxx>'（含<>的字符串）)：创建对象JQuery选择器
根本选择器：ID选择器：$('#xxx')class选择器：$('.xxx')标签名选择器：$('xxx')全局选择器：$('*')组合选择器：$('xxx.xxx')多个选择器：$('xxx,xxx')层级选择器：后辈元素：选择器 选择器：$('xxx xxx')子元素：选择器>选择器：$('xxx>xxx')紧邻的兄弟元素：选择器+选择器：$('xxx+xxx')前面所有的兄弟元素：选择器~选择器：$('xxx~xxx')筛选选择器：第一个元素：$('xxx:first')最初一个元素：$('xxx:last')第n个元素：$('xxx:eq(n)')大于/小于n的元素$('xxx:gt/lt(n)') 奇数个的元素：$('xxx:odd')偶数个的元素：$('xxx:even')从xxx中排除掉xx的选择器：$('xxx:not(xx)')题目标签的元素：$(':header')获取焦点的元素：$(':focus')获取根元素：$(':root')锚点正在指向的元素：$(':target')正在执行动画的元素：$(':animated')内容选择器：蕴含文本xx的元素：$('xxx:contains('xx')')含有xx选择器后辈元素的元素（不蕴含xx选择器自身的元素）：$('xxx:has('xx')')不能有内容和子元素的元素：$('xxx:empty')要么有内容，要么有子元素的元素（可作为父元素的元素）：$('xxx:parent')可见性选择器：可见的元素：$(':visible')不可见的元素：$(':hidden')属性选择器：xxx中xx属性的元素：$('xxx[xx]')xxx中xx属性等于n的元素：$('xxx[xx=n]')xxx中xx属性不等于n的元素：$('xxx[xx!=n]')xxx中xx属性的属性值以n结尾的元素：$('xxx[xx^=n]')xxx中xx属性的属性值以n结尾的元素：$('xxx[xx$=n]')xxx中xx属性的属性值蕴含n的元素：$('xxx[xx*=n]')xxx中含xx属性和n属性的元素：$('xxx[xx][n]')子元素选择器：抉择一个是所有兄弟元素外面第一个的xxx元素：$('xxx:first-child')抉择一个是所有兄弟元素外面最初一个的xxx元素：$('xxx:first-child')抉择一个是所有兄弟元素外面正向数第n个的xxx元素：$('xxx:nth-child(n)')抉择一个是所有兄弟元素外面反向数第n个的xxx元素：$('xxx:nth-last-child(n)')抉择一个没有兄弟元素的xxx元素：$('xxx:only-child')抉择一个是所有兄弟元素外面雷同类型的第一个xxx元素：$('xxx:first-of-type')抉择一个是所有兄弟元素外面雷同类型的第n个xxx元素：$('xxx:nth-of-type(n)')抉择一个是所有兄弟元素外面仅含这一个类型的xxx元素：$('xxx:only-of-type')表单选择器：所有的表单控件：input,select,textarea,button...$(':input')选中表单中的文本框的元素：$(':text')选中表单中的明码框的元素：$(':password')选中表单中的单选框的元素：$(':radio')选中表单中的复选框的元素：$(':checkbox')选中表单中的文件框的元素：$(':file')选中表单中的按钮的元素：$(':button')选中表单中的提交性能按钮的元素：$(':submit')选中表单中的重置性能按钮的元素：$(':reset')表单对象选择器:选中表单中禁用性能的元素：$(':disabled')选中表单中失常性能的元素：$(':enabled')选中表单中被选中的元素：$(':checked')选中表单中被抉择的元素：$(':selected')混同选择器：用于含一些特殊符号的选择器：$.escapeSelector(selector)JQuery属性操作
属性：attr,prop获取属性的值：xxx.attr('xx'); 操作所有的属性（自定义和内置）xxx.prop('xx'); 操作html元素内置的属性批改属性的值：xxx.attr('xx','批改的值')xxx.prop('xx','批改的值')增加属性：xxx.attr('新的属性','新的属性值')xxx.prop('新的属性(内置的属性)','新的属性值')删除属性：xxx.removeAttr('删除的属性值')xxx.removeProp('删除的属性值')（不能删除html元素上的属性）CSS类的属性操作：增加一个class值：addClass()移除一个class值：removeClass()切换一个class值：toggleClass()判断是否有某个class值：hasClass()获取css的属性值：xxx.css('属性名')设置css的属性值：xxx.css('属性名','属性值') / xxx.css({属性名：属性值})获取元素地位的间隔：xxx.offset().left/top：获取元素在页面的坐标（可读可写）xxx.position().left/top：获取元素在第一个定位的先人元素内的坐标（只读）获取滚动条的滑动间隔：xxx.scrollTop()：滚动条间隔顶部的滚动间隔xxx.scrollLeft()：滚动条间隔右边的滚动间隔HTML的属性操作：html([html])：设置或获取元素外面的html代码（相似JS的innerHTML）text([text])：设置或获取元素外面的文本内容（相似JS的innerText）val([value])：设置或获取表单控件里的值获取尺寸的操作：（括号中写值能够设值）width()/height()（内容的尺寸）innerWidth()/innerHeight() （内容的尺寸+padding）outerWidth()/outerHeight()（盒子的尺寸）JQuery筛选操作
过滤操作：xxx.first()xxx.last()xxx.eq()xxx.not()xxx.filter('xx')：只选中选择器为xx的元素xxx.slice(n) / xxx.slice(x,y)：选中从n开始的元素 / 选中从x到y范畴的元素（不包含y）xxx.has()查找操作：选取子元素中为xx的元素：xxx.children('xx')选取后辈元素中为xx的元素：xxx.find('xx')选取xxx的父元素：xxx.parent()选取xxx的所有先人元素：xxx.parents()选取xxx的所有先人元素（范畴是选择器xxx到选择器xx的元素（不包含xx））：xxx.parentsUntil('xx')选取xxx第一个定位的先人元素：xxx.offsetParent()选取后一个兄弟元素 / 选取后一个为xx的兄弟元素：xxx.next() / xxx.next('xx')选取前面所有的兄弟元素：xxx.nextAll()选取前面所有的兄弟元素（直到选择器为xx的元素）：xxx.nextUntil('xx')选取前一个兄弟元素：xxx.prev()选取后面所有的兄弟元素：xxx.prevAll()选取后面所有的兄弟元素（直到选择器为xx的元素）：xxx.prevUntil('xx')选取所有的兄弟元素（前后）：xxx.siblings()从所有的先人元素和自身外面找出第一个合乎xx的元素：xxx.closest('xx')串联：xxx.find('xx').add()：把选中的xx元素退出到以后汇合xxx.find('xx').addBack()：把选中xx的xxx元素退出到以后汇合end()：返回最初一次破坏性操作之前的dom（还原dom之前的状态） （破坏性操作：查找操作，过滤操作...）contents()：返回所有子节点的汇合JQuery DOM对象的办法
遍历：each,mapeachxxx.each(function(index,ele){...})map（会返回一个新的汇合）xxx.map(function(index,ele){...})xxx.length()：汇合中元素的数量xxx.index()：返回该元素在父元素的索引地位xxx.get()：返回xxx元素（可指定索引，不指定索引则返回全副）xxx.is('xx')：判断该JQdom是否满足某个xx条件，返回布尔值JQuery DOM操作
外部插入：（xx插到xxx里）后插：('xxx').append('xx')('xx').appendTo('xxx')前插：('xxx').prepend('xx')('xx').prependTo('xxx')内部插入：（xx插到xxx里）后插：('xxx').after('xx')('xx').insertAfter('xxx')前插：('xxx').before('xx')('xx').insertBefore('xxx')包裹：xxx.wrap('xx')：xx离开包裹xxx xxx.wrapAll('xx')：xx对立包裹xxxxxx.wrapInner('xx')：xx在xxx外面生成包裹xxx.unwrap()：xxx去掉包裹（不仅能去掉新生成的包裹，还能去掉原先就有的包裹）替换：xxx.replaceWith('xx')：xx替换掉xxxxx.replaceAll('xxx')：xx替换掉xxx删除：xxx.empty()：清空xxx的内容（仍保留其在dom中所占的地位）xxx.remove()：删除xxx的内容（但不会保留其所占的地位。复原后之前增加的事件都生效了）xxx.detach()：删除xxx的内容（但复原后之前增加的事件还会失效）克隆：xxx.clone()：克隆一个xxxJQuery事件
事件绑定：on绑定事件 / 多个事件：xxx.on('xxx',fn) / xxx.on({xxx:fn,xxx:fn})事件仅仅绑定一次：xxx.one('xxx',fn)把事件名作为办法：鼠标悬浮：xxx.mouseover(fn) 鼠标来到：xxx.mouseout(fn) 键盘按下：xxx.keypress(fn) ... 解除事件绑定：xxx.off('事件名') 事件委派：xxx.on('事件','委派的对象',fn)管制事件触发：trigger('事件名')（先前要定义好该事件执行的函数）（返回的是jqdom，能间断调用）（可触发元素自带事件）triggerHandle('事件名')（无奈触发元素自带事件（submit,focus...），不能间断调用）事件列表：ready：页面中DOM加载结束xxx.focusin(fn)：文本框聚焦触发（绑定给输入框的父元素xxx）xxx.focusout(fn)：文本框失焦触发（绑定给输入框的父元素xxx）xxx.mouseenter(fn)：代替mouseover（举荐应用）xxx.mouseleave(fn)：代替mouseout（举荐应用）xxx.hover(fn)：mouseenter和mouseleave的汇合事件对象：event.pageX：鼠标箭头的x坐标event.pageY：鼠标箭头的y坐标event.target：以后触发事件的元素event.which：键盘按键的ASCII码event.type：事件类型（事件名称）event.preventDefault()：阻止默认事件产生event.stopPropagation()：阻止事件冒泡return false：既可阻止事件冒泡，又可阻止默认事件产生 JQuery动画
根本成果：hide(过渡工夫,callback)：暗藏show(过渡工夫,callback)：显示toggle(过渡工夫,callback)：切换（相应的css属性变动：透明度，元素大小相干的款式（padding,border,width/height,margin））滑动成果：slideDown(过渡工夫,callback)：滑动显示slideUp(过渡工夫,callback)：滑动暗藏slideToggle(过渡工夫,callback)：滑动切换（垂直方向上的变动：height/padding-top/margin-top）淡入淡出成果：fadeIn(过渡工夫,callback)：淡入fadeOut(过渡工夫,callback)：淡出fadeToggle(过渡工夫,callback)：淡入淡出切换fadeTo(过渡工夫,透明度,fn)：扭转透明度（透明度的变动/突变）自定义动画：animate({属性名：属性值,...},过渡工夫,callback)stop()：使动画进行finish()：使动画实现delay()：提早动画的执行动画设置：JQuery.fx.off=true：敞开页面中的所有动画JQuery.fx.interval：设置动画显示的帧数动画队列：xxx.动画1.动画2...（顺次执行）JQuery动画与CSS3动画兼容性：CSS3的动画和过渡须要IE9+，JQuery可应用1.x版本的CSS3的动画或者过渡必须给元素指定具体的CSS属性值CSS3的过渡动画要与transition属性配合JQuery Ajax
疾速申请办法：$.get('url',fn(data){},[dataType])$.post('url',[data],fn(data){},[dataType]) ajax办法：$.ajax('url',（申请地址） type:'get/post',（申请形式） data:{}/'',（发送的数据） async:true,（是否异步） dataType:'json'（或其余类型）,（响应的内容格局） success:fn(data){},（响应胜利的回调） error:fn(err){}（响应失败的回调） )表单办法：xxx.serialize()：把表单xxx中有name属性的表单控件的值拼接成一个字符串JQuery 工具办法
数组：$.each(array,fn(index,item){})：遍历数组$.grep(array,fn(index,item){})：过滤数组（可返回一个过滤后的数组）$.map(array,fn(index,item){})：从数组取出信息，会返回新的汇合$.makeArray(类数组对象)：把类数组对象转换为纯数组$.inArray(ele,array)：判断元素在数组中的地位（不存在返回-1）$.merge(array1,array2)：合并数组xxx.toArray()：把JQuerydom(xxx)转为纯数组函数：$.proxy(fn,要指向的对象)：改编函数内的this指向类型判断：$.type()：判断类型$.isFunction()：判断是否为函数办法$.isEmptyObject()：判断是否为空对象$.isPlainObject()：判断是否为纯对象（数组就不是纯对象（构造函数是Object是纯对象））$.isWindow()：判断是否为window对象$.isNumeric()：判断是否为数字类型字符串：$.trim()：取出（去掉）两边的空格$.param()：（对象）序列化成字符串查看JQuery版本：JQuery.fn.jquery$.fn.jqueryJQuery插件
相干网站：官网：http://plugins.jquery.comJQuery插件库：https://www.jq22.com/JQuery之家：http://www.htmleaf.com/JQuery-school：http://www.jq-school.com/经典插件：select2（下拉框搜寻插件）：https://select2.org/datetimepicker（工夫日期插件）：https://xdsoft.net/jqplugins/datetimepicker/fullpack（全屏滚动插件）：https://alvarotrigo.com/fullPage/zh/lazyload（图片懒加载）：https://appelsiini.net/projects/lazyload/layer（弹窗插件）：http://layer.layui.com/?alonenice validator（表单验证）：https://validator.niceue.comJQuery-easing（JQ动画成果）：http://gsgd.co.uk/sandbox/jquery/easing/自定义插件：给JQuery DOM对象扩大办法：$.fn.extend({办法名:function(){...}}) $.fn.办法名=function(){...} 调用：$('xxx').办法名给JQuery对象自身扩大办法：$.extend({办法名:function(){...}}) 调用：$.办法名JQuery UI：https://jqueryui.com/ （很少用了）JQuery Mobile：https://jquerymobile.com/ （很少用了）sizzle：https://github.com/jquery/sizzle/wikizepto：http://zeptojs.com（与zepto相似）JQuery的一些案例
1. 手风琴式菜单膨胀开展： 成果：开展一个子菜单，另一个子菜单主动膨胀<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style> * { margin: 0; padding: 0; } body { font: 16px; } ul { list-style: none; } .nav-list { width: 220px; margin-left: 10px; border-bottom: 1px solid #ccc; } .nav-list ul{ display: none; } .nav-list h3 { padding: 10px 20px; background: #333; color:#fff; line-height:18px; border-top:1px solid #ccc; cursor: pointer; } .nav-list li{ padding:10px 20px; cursor: pointer; background: #f5f5f5; color:rgb(51, 100, 190); border:1px solid #ccc; border-bottom: none; } .nav-list li:hover{ background: #ccc; } </style></head><body> <div class='nav-list'> <h3>日漫</h3> <ul> <li>名侦探柯南</li> <li>樱桃小丸子</li> <li>蜡笔小新</li> <li>家庭教师</li> <li>妖精的尾巴</li> </ul> <h3>美剧</h3> <ul> <li>良医</li> <li>旺达幻视</li> <li>势力的游戏</li> <li>无耻之徒</li> </ul> <h3>国漫</h3> <ul> <li>刺客伍六七</li> <li>哪吒</li> <li>灵笼</li> </ul> </div> <script src="./jquery-3.5.1.min.js"></script> <script> $(function () { $('.nav-list h3').click(function(){ $(this).next('ul').slideToggle().siblings('ul').slideUp(); }) }) </script></body></html>2. 滚动祝愿墙： 成果：在可视范畴内的最初一个淡出，随后总体的最初一个增加到祝愿墙的后面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>祝愿语录</title> <style> body{ background:linear-gradient(45deg,#da60d3,#008c8c); } h1 { margin-left:-10px; margin-top: -10px; } .wrapper { margin: 100px auto; width: 800px; height: 400px; } .p1 { width: 800px; height: 390px; overflow: hidden; text-align: center; } .zhufu { margin-bottom: 10px; font-size: 18px; } .zhufu img { width: 25px; height: 25px; margin: 5px; vertical-align: middle; border-radius: 50%; box-sizing: border-box; } .zhufu span { color: #f40; font-weight: bold; } </style> </head> <body> <div class="wrapper"> <h1>一些人的祝愿</h1> <div class="bd"></div> <div class="p1"> <div class="zhufu"> 匿名网友A：祝贺你按时长大！叮！！！ </div> <div class="zhufu"> 匿名网友B：往年又是<del>20</del> 18 岁的生日呢，永远青春喔！！！ </div> <div class="zhufu"> <img src="imgs/3.jpg" />匿名网友C：生存清朗，万物可恶，而你又长大了！！！ </div> <div class="zhufu"> 匿名网友D：明天是你来到地球察看人类的第<del >20</del > 18 天！！！ </div> <div class="zhufu"> <img src="imgs/5.jpg" />匿名网友E：愿你每一岁都能奔波在本人的酷爱里，生日快乐！！！ </div> <div class="zhufu"> 匿名网友F：Anaway,you're almost a year away from retirement ！！！ </div> <div class="zhufu"> <span>刘昊然</span >：生日快乐，xxx！记得放弃对我的喜爱喔！ </div> <div class="zhufu"> <span>陈飞宇</span >：丫头，生日快乐！记得持续喜爱我！！！ </div> <div class="zhufu"> <span>胡一天</span >：十八一轮回,明天你几岁？勉强18吧！！！ </div> <div class="zhufu"> <span>何炅</span >：敌人请听好，祝你生日快乐！！！ </div> <div class="zhufu"> <span>张新成</span >：降级打怪，level+1 明天的总level为18！！！ </div> <div class="zhufu"> <span>张雨剑</span >：打搅一下，来为你这个小可爱送上生日祝愿！！！ </div> <div class="zhufu"> <span>王嘉尔</span >：愿你每一天都能奔跑在本人的酷爱里！！！ </div> <div class="zhufu"> <span>华晨宇</span >：祝贺你，入驻这个世界第18个年头！！！ </div> <div class="zhufu"> <span>关晓彤</span >：所谓20岁，只是心里住着两个10岁的小孩吧。不过我深信你有一个10岁，一个8岁的。 </div> <div class="zhufu"> <span>李沁</span >：生日快乐啊，咱们持续一起美上来吧！！！ </div> </div> </div> <script src="jquery-3.5.1.min.js"></script> <script> $(document).ready(function () { $(".zhufu:gt(8)").hide(); //确保页面显示8个祝愿 setInterval(function () { $(".zhufu").eq(8).fadeOut(600,function() { $(".zhufu").last().prependTo(".p1").delay(500).slideDown(500); }) }, 2000); }); </script> </body></html>3. 元素拖拽：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style> .item{ width:100px; height:100px; background: red; } </style></head><body> <div class='item'> </div> <script src="./jquery-3.5.1.min.js"></script> <script> $(function () { $('.item').mousedown(function(e){ $(this).css('opacity','0.6'); // 鼠标在元素上的地位 var offsetX=e.pageX-$(this).offset().left; var offsetY=e.pageY-$(this).offset().top; // 鼠标挪动 $(this).mousemove(function(e){ // 获取鼠标地位 var x=e.pageX-offsetX; var y=e.pageY-offsetY; // 扭转元素的地位 $(this).offset({ left:x, top:y }) }) }).mouseup(function(){ $(this).css('opacity','1'); // 解除mousemove事件 $(this).off('mousemove'); }) }) </script></body></html>以上是对JQuery的局部整顿和总结，心愿有用，有什么倡议欢送提出哦！
大家一起提高~