概念
jQuery是javascript实现的一个库。设计宗旨是”Write Less，Do More”,即写的少，做的多优点
跨浏览器兼容链式编程，隐式迭代简化DOM操作，支持事件、样式、动画支持插件扩展开发开源免费入口函数
第一种： $(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; 第二种： $(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 }); 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装；相当于原生 js 中的 DOMContentLoaded；不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码；推荐使用第一种方式；jQuery顶级对象
jQuery:$;jQuery对象
原生js获取的对象为DOM对象；jQuery获取的对象为jQuery对象； $('div');//对DOM对象包装后产生的对象（伪数组存储的）jQuery对象、DOM对象转换
DOM对象转换jQuery对象； $('div'); jQuery对象转换DOM对象； //方法1 $('div')[index]; //index是索引号 //方法2 $('div').get(index); //index是索引号jQuery基本选择器
名称用法描述ID选择器$(’#id’)获取指定ID的元素全选选择器$(’*’)匹配所有元素类选择器$(’.class’)获取同一类class的元素标签选择器$(‘div’)获取同一类标签的所有元素并集选择器$(‘div,p,li’)选取多个元素交集选择器$(‘li.current’)交集元素jQuery层级选择器
名称用法描述子代选择器$(‘ul>li’)使用>号，获取亲儿子层级的元素，注意：不会获取孙子层级的元素后代选择器$(‘ul li’)使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等jQuery设置样式
$('div').css('属性',‘值’)隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代；给匹配到的所有元素进行循环遍历，执行相应的方法；筛选选择器
语法用法描述:first$(‘li:first’)获取第一个li元素:last$(‘li:last’)获取最后一个li元素:eq(index)$(‘li:eq(2)’)获取到的li元素中，选择索引号为2的元素，索引号index从0开始:odd$(‘li:odd’)选择索引号为奇数的元素:even$(‘li:even’)选择索引号为偶数的元素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’)检查当前元素是否含有某个特定的类，如果有，返回trueeq(index)$(‘li’).eq(2)相当于$(‘li:eq(2)’),index从0开始排他思想
<body> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <script> $(function() { // 1. 隐式迭代 给所有的按钮都绑定了点击事件 $("button").click(function() { // 2. 当前的元素变化背景颜色 $(this).css("background", "pink"); // 3. 其余的兄弟去掉背景颜色 隐式迭代 $(this).siblings("button").css("background", ""); }); }); </script> </body>链式编程
原理：实现链式编程的核心，是对象中的每一个方法都会返回当前对象 $("#content div").eq(index).show().siblings().hide();css方法
参数只写属性名，返回属性值； console.log($('div').css('width')); 参数是属性名，属性值，逗号分隔，加引号，数字不用跟单位和引号； $('div').css('backgroundColor','red'); $('div').css('width','200px'); $('div').css('height',200); 参数可以是对象形式； $('div').css({ width:400, height:400, });设置类样式操作
语法描述$(‘div’).addClass(‘current’)添加类$(‘div’).removeClass(‘current’)删除类$(‘div’).toggleClass(‘current’)切换类 添加不会覆盖原有的类；tab代码
<script> $(function() { // 1.点击上部的li，当前li 添加current类，其余兄弟移除类 $(".tab_list li").click(function() { // 链式编程操作 $(this).addClass("current").siblings().removeClass("current"); // 2.点击的同时，得到当前li 的索引号 var index = $(this).index(); console.log(index); // 3.让下部里面相应索引号的item显示，其余的item隐藏 $(".tab_con .item").eq(index).show().siblings().hide(); }); }); </script>show()
show([speed],[easing],[fn])；参数可省略；speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；easing：用来切换效果，默认swing，可用参数linear；fn：回调函数，在动画完成时执行的函数，每个元素执行一次；hide()
hide([speed],[easing],[fn])；参数可省略；speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；easing：用来切换效果，默认swing，可用参数linear；fn：回调函数，在动画完成时执行的函数，每个元素执行一次；toggle()
toggle([speed],[easing],[fn])；参数可省略；speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；easing：用来切换效果，默认swing，可用参数linear；fn：回调函数，在动画完成时执行的函数，每个元素执行一次；slideDown()
slideDown([speed],[easing],[fn])；参数可省略；speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；easing：用来切换效果，默认swing，可用参数linear；fn：回调函数，在动画完成时执行的函数，每个元素执行一次；slideUp()
slideUp([speed],[easing],[fn])；参数可省略；speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；easing：用来切换效果，默认swing，可用参数linear；fn：回调函数，在动画完成时执行的函数，每个元素执行一次；slideToggle()
slideToggle([speed],[easing],[fn])；参数可省略；speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；easing：用来切换效果，默认swing，可用参数linear；fn：回调函数，在动画完成时执行的函数，每个元素执行一次；hover(fn(),fn())
$('.nav>li').hover(function(){ $(this).children('ul').stop().slideDown(); },function(){ $(this).children('ul').stop().slideUp(); });stop()
stop()方法用于停止动画或效果；写到动画前面，相当于停止结束上一次动画；fadeIn()
fadeIn([speed],[easing],[fn])；参数可省略；speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；easing：用来切换效果，默认swing，可用参数linear；fn：回调函数，在动画完成时执行的函数，每个元素执行一次；fadeOut()
fadeOut([speed],[easing],[fn])；参数可省略；speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；easing：用来切换效果，默认swing，可用参数linear；fn：回调函数，在动画完成时执行的函数，每个元素执行一次；fadeToggle()
fadeToggle([speed],[easing],[fn])；参数可省略；speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；easing：用来切换效果，默认swing，可用参数linear；fn：回调函数，在动画完成时执行的函数，每个元素执行一次；fadeTo()
fadeToggle([speed],opacity,[easing],[fn])；参数可省略；speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；easing：用来切换效果，默认swing，可用参数linear；fn：回调函数，在动画完成时执行的函数，每个元素执行一次；animate()
animate(params,[speed],[easing],[fn])；params：想要更改的属性，以对象形式传递，必须写，属性名可以不带引号，复合用驼峰命名； $(function() { $("button").click(function() { $("div").animate({ left: 500, top: 300, opacity: .4, width: 500 }, 500); }); }); speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；easing：用来切换效果，默认swing，可用参数linear；fn：回调函数，在动画完成时执行的函数，每个元素执行一次；prop()
设置或获取元素固有属性值；prop(‘属性’)：获取属性值；prop(‘属性’,‘属性值’)：设置属性值；attr()
设置或获取元素自定义属性值；attr(‘属性’)：获取自定义属性值，类似getAttribute()；attr(‘属性’,‘属性值’)：设置自定义属性值setAttribute()；数据缓存
data()可以在指定元素上存储数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除；这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型；data(‘属性’)：获取属性值；data(‘属性’,‘属性值’)：设置属性值；内容文本值
html()text()val()获取设置元素内容获取设置元素文本内容获取设置表单值parents()
祖先元素；元素操作
语法描述$(‘div’).each(function(index,domEle){xxx;})each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个，回调函数里两个参数，index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象$.each(object,function(index,element){xxx;}$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组、对象，index是每个元素的索引号，element遍历内容$(’’)动态创建元素element.append(‘内容’)内部添加，把内容放入匹配元素内部最后面，类似原生appendChildelement.prepend(‘内容’)内部添加，把内容放入匹配元素内部最前面element.before(‘内容’)外部添加，把内容放入匹配元素内部最前面element.after(‘内容’)外部添加，把内容放入匹配元素内部最后面element.remove()删除匹配的元素自身element.empty()清空匹配的元素，删除子节点element.html(’’)清空匹配的元素，删除子节点 内部添加元素，生成之后，是父子关系；外部添加元素，生成之后，是兄弟关系；事件绑定
单个事件绑定； //单个事件注册 $('div').click(function(){ $(this).css('backgroundColor','purple'); }); $('div').mouseenter(function(){ $(this).css('backgroundColor','skyblue'); }) 事件处理on；可绑定多个事件； $('div').on({ mouseenter:function(){ $(this).css('backgroundColor','skyblue'); }, click:function(){ $(this).css('backgroundColor','purple'); }, mouseleave:function(){ $(this).css('backgroundColor','pink'); } }); //如果事件程序相同 $('div').on('mouseenter mouseleave',function(){ $(this).toggleClass('current'); }); 可事件委托操作； <body> <ul> <li>lubenweiniubi</li> <li>lubenweiniubi</li> <li>lubenweiniubi</li> <li>lubenweiniubi</li> <li>lubenweiniubi</li> </ul> <script src="./jquery-3.5.1.min.js"></script> <script> $('ul').on('click','li',function(){ alert('卢本伟牛逼'); }); </script> </body> on可对未来创建的元素绑定事件； $('ol').on('click','li',function(){ alert(11); }); var li = $('<li>未来创建的li</li>'); $('ol').append(li);事件解除
语法描述$(“div”).off()解除了div身上的所有事件$(“div”).off(“click”)解除了div身上的点击事件$(“ul”).off(“click”, “li”)解绑事件委托 one()；事件绑定，只触发一次，用法同on()；自动触发事件
语法描述element.click()元素.事件()，会触发元素的默认行为element.trigger(‘事件’)会触发元素的默认行为element.triggerHandler(‘事件’)不会触发元素的默认行为事件对象
阻止默认行为：event.preventDefault()或者return false；阻止冒泡：event.preventDefault()；对象拷贝
$.extend([deep],target,object1,[objectN])；deep：如果设为true为深拷贝，默认为false，浅拷贝；target：要拷贝的目标对象；object1：待拷贝到第一个对象的对象；objectN：待拷贝到第N个对象的对象；浅拷贝
把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象；拷贝对象会覆盖原来的数据；深拷贝
前面加true，完全克隆（拷贝的对象，不是地址），修改目标对象不会影响被拷贝对象；如果里面有不冲突的属性，拷贝对象原有数据会和被拷贝对象数据合并；多库共存
使用jQuery.方法； . n o C o n f l i c t ( ) : 释 放 对 .noConflict():释放对 .noConflict():释放对 控制权，自己决定； $(function() { function $(ele) { return document.querySelector(ele); } console.log($("div")); // 1. 如果$ 符号冲突 我们就使用 jQuery jQuery.each(); // 2. 让jquery 释放对$ 控制权 让用自己决定 var suibian = jQuery.noConflict(); console.log(suibian("span")); suibian.each(); });jQuery尺寸
jQuery位置
