jQuery是一个快速、简洁的JavaScript库，其设计宗旨为”writeless,domore“，提倡我们使用更少的代码去做更多的事情。
jQuery对我们常见的JavaScript原生代码进行了封装，优化了DOM操作、事件处理、动画设计和Ajax交互。
jQuery可以帮助前端人员加开开发速度，提高开发效率。
在jQuery中$就代表开始一段jQuery代码，等价于jQuery。
//下面二者等价$('div').hide();jQuery('div').hide();jQuery和DOM对象jQuery和DOM相互转换原生JS比jQuery更大，jQuery并没有完全将原生的属性和方法都进行封装。所以当我们要使用原生的方法时，需要对对象进行转换。
//$(DOM对象)$(document.querySelector('div')).hide();//1.第一种方式：$('div')[index]$('div')[0].style.display='none';//2.第二种方式：$('div').get(index)$('div').get(0).style.display='none';console.log($('div'));/*S.fn.init(2)[div,div,prevObject:S.fn.init(1)] 0:div 1:div length:2 prevObject:S.fn.init[document] [[Prototype]]:Object(0)*/入口函数jQuery的入口函数允许我们等待页面加载完毕后再去执行JS代码。
//1.第一种$(document).ready(function(){})//2.第二种$(function(){})链式编程链式编程是为了节省代码量，看起更优雅，允许我们连写代码。
$('div').css('color','red').sibling().css('color','')jQuery常用API基础选择器原生的JS获取元素的方式非常多，很复杂，而且有些方法需要考虑兼容性。因此jQuery给我们做了封装，统一了获取元素的标准，我们只需要直接使用CSS选择器的方法使用即可。
//我们在里面直接使用CSS选择器即可$("选择器")筛选选择器基础筛选当我们获取一系列元素时，jQuery允许我们对其进行筛选。筛选规则如下。
$('li:eq(0)').hide();高级筛选语法用法说明parent()$(”li”).parent()查找最近一级的父级children(selector)\((”ul”).children(”li”)|查找最近一级的孩子，相当于\)(”ul>li”)find(selector)\((”ul”).find(”li”)|查找后代，相当于\)(”ulli”)siblings(selector)$(”.first”).siblings(”li”)查找兄弟，不包括本身nextAll([expr])$(”first”).nextAll()查找当前元素之后的所有同辈元素prevtAll([expr])$(”.last”).prevAll()查找当前元素之前的所有同辈元素hasClass(class)$(”div”).hasClass(”protected”)检查当前的元素是否含有某个特定的类，如果有返回trueeq(index)\((”li”).eq(2)|相当于\)('li:eq(2)')隐式迭代当我们获取多个元素时，在JS原生方法中需要使用for循环遍历，来对获取到的元素进行操作。
在jQuery中具有隐式迭代的特性，当我们对获取到的一系列元素同时添加操作时，jQuery会自动遍历内部DOM元素，这个过程就叫做隐式迭代。
简单理解就是，jQuery会将获取到的元素在内部进行循环遍历，执行相应的操作，就不用我们在进行遍历操作。由于我们看不见其内部的遍历，所以称为隐式迭代。
//jQuery会将所有获取到的div元素进行隐藏操作$('div').hide()//JS原生方法letdivs=document.querySeletorAll('div');for(leti;i $("li").click(function(){//1.当前元素改变颜色$(this).css("color","red");//2.其余兄弟恢复颜色$(this).siblings().css("color","");});链式写法： $("li").click(function(){$(this).css("color","red").siblings().css("color","");});操作CSSjQuery可以使用css()方法来修改简单的元素样式。也可以操作类，修改多个样式。 console.log($('ul').css('color'));//rgb(0,0,0)$("li").css("color","red");$("li").css({color:"red","font-size":"20px",});操作类名jQuery允许我们操作类名的方式来改变CSS。 $(this).addClass("center");$(this).removeClass("pink");$(this).toggleClass("move");注意： show([speed,[easing],[fn]]);hide([speed,[easing],[fn]]);toggle([speed,[easing],[fn]]);滑动效果slideUp([speed,[easing],[fn]]);slideDown([speed,[easing],[fn]]);slideToggle([speed,[easing],[fn]]);事件切换hover(over,out);动画队列及停止方法动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。 所以我们需要停止动画排队。 $('div').children('ul').stop().slideDown(2000);淡入淡出效果fadeTo([[speed],opacity,[easing],[fn]])自定义动画animate(params,[speed],[easing],[fn])jQuery属性操作操作固有属性值prop()console.log($("div").prop("class"));$("div").prop("class","modefied");操作自定义属性值attr()如果使用prop()获取自定义属性，获取到的是undefined。应该使用attr()获取。 attr()也可以操作固有属性。 attr()也可以获取H5属性/ console.log($("div").attr("index"));$("div").attr("index","2");数据缓存data()data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。 使用data()存储的数据在元素的内存中。 $('.storage').data("name","brokyz");console.log($('.storage').data("name"));//brokyz这种方法还可以获取H5的数据。 //假如有个元素
$("div").each(function(index,domEle){xxx;})第一种遍历方法
$("div").each(function(index,domEle){console.log(index);console.log(domEle);});第二种遍历方法
$.each($("div"),function(index,domEle){console.log(index);console.log(domEle);});arr=["red","blue","pink"];$.each(arr,function(index,ele){console.log(index);console.log(ele);});创建动态创建一个元素。
$("
");添加元素$("ul").append($(""));$("ul").prepend($(""));$("ul").before($(""));$("ul").after($(""));删除元素$("ul").remove()$("ul").empty()$("ul").html("")jQuery尺寸、位置操作尺寸语法用法width()/height()取得匹配元素宽度和高度值只算width/heightinnerWidth()/innerHeight()取得匹配元素宽度和高度值包含paddingouterWidth()/outerHeight()取得匹配元素宽度和高度值包含padding、borderouterWidth(true)/outerHeight(true)取得匹配元素宽度和高度值包含padding、border、margin位置console.log($(".son").offset().top);console.log($(".son").offset().left);$(".son").offset({ top:200, left:200});console.log($(".son").position().top);console.log($(".son").position().left);$(window).click(function(){$(this).scrollTop(333);});$(window).scroll(function(){console.log($(this).scrollTop());})jQuery事件单个事件注册element.事件(function(){})$("div").click(function(){事件处理程序})其它事件与原生保持一致比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
on()方法在匹配元素上绑定一个或多个事件的事件处理函数。
element.on(events,[selector],fn)如果事件处理程序不一样：
$("div").on({mouseenter:function(){$(this).css("background-color","aliceblue");},click:function(){$(this).css("background-color","skyblue");}})如果事件处理程序相同：
$("div").on("mouseentermouseleave",function(){$(this).toggleClass("color");})on()的优势：可以事件委托
给父元素绑定事件，将触发对象委派给子元素，由于事件冒泡，会冒泡给父亲，这样就触发了事件处理函数。
$("ul").on("click","li",function(){alert(11);})on()的优势：on可以给动态创建的元素绑定事件
$("ul").on("click","li",function(){alert(11);})$("ul").append($("
$("div").one("click",function(){alert(11);})off()解绑事件解除所有事件：
$("div").off()解除普通事件：
$("div").off("click")解除事件委托：
$("ul").off("click","li");自动触发事件trigger()有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
element.click()$("div").trigger("click");$("div").triggerHandler("click");jQuery事件对象事件被触发，就会有事件对象产生。
element.on(events,[selector],function(event){})阻止默认行为：event.preventDefault()或者returnfalse
阻止冒泡：event.stopPropagation()
如果想把某个对象拷贝（合并）给另一个对象使用，此时可以使用$.extend()方法。
语法：
$.extend([deep],target,object1,[objectN])jQuery多库共存jQuery使用$作为标识符，便随着jQuery的流行，这可能会和其它库中的$冲突。导致无法使用。