javascript与jQuery对比
入口函数：js只能有一个入口函数（window.οnlοad=function(){}）（如果写多个，后面的会覆盖前面的）。。jquery可以有多个入口函数，并且不会发生覆盖的情况。代码容错性：js代码容错性差，代码出现错误会影响后面的代码运行。。。而jQuery代码容错性好，会屏蔽错误，并且不会影响后面代码的运行。（找错比较难找，只能打断点）。浏览器兼容性：js兼容性差。。。jQuery对浏览器兼容性做了封装，因此不存在兼容性问题。操作复杂性：js DOM操作复杂，对于一些简单动画效果，实现起来比较麻烦。。。jQuery DOM操作简单，支持隐式迭代，实现动画效果非常简单。JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。
大版本分为1.x 2.x 3.x
区别：2.x 3.x版本不再支持IE6/7/8
jQuery每个版本分为压缩版和为压缩版。
jQuery.js是未压缩版。代码可读性高，在开发和学习时使用。方便查看源码。
jQuery.min.js是压缩版本。除去了注释，换行，空格，并将一些变量替换成了a，b，c之类的简单字符。基本没有可读性。（一般都在生产环境下使用，减少流量的使用，增加效率）
这些版本基本上没有什么区别，只是2.3.不兼容IE6/7/8了。如果需要兼容IE6/7/8，可以继续使用1.x版本。
对比javascript的入口函数和jQuery的入口函数的执行时机。
javascript的入口函数要等到页面中所有的资源（图片，文件）加载完成后才开始执行。jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片，文件的加载。有两种写法： 第一种写法：、 $(document).ready(function(){
});第二种写法：
$(function(){ });补充： ===jQuery，就是说能用 的地方，全部可以用jQuery，$只是简写形式。
使用javascript中的方法获取到页面中的元素的返回对象就是DOM对象。比如使用document.getElement*系列的方法返回的对象就是DOM对象
var btn = document.getElementById(“btnShowDiv”); var divs = document.getElementsByTagName(“div”);DOM对象只能使用DOM对象的方法和属性。
domObject.innerHTML = “dom对象设置文本”; domObject.style.display= “block”;//dom对象显示对象 domObject.onclick = function() {}//dom对象绑定事件jQuery对象就是使用jQuery的方法获取页面中的元素返回的对象就是jQuery对象。比如使用$()方法返回的对象都是jQuery对象。
$(“div”);//标签选择器返回的jquery对象。 $(“#btnShowDiv”);//id选择器返回的jquery对象。jQuery对象只能使用jQuery对象的方法
var $obj = $(“div”); $obj.html(“jquery对象设置文本的方法”); $obj.show();//jquery对象显示文本 $obj.click(function() {});//jquery对象绑定事件错误的用法：
$(“div”).innerHTML;//jquery对象不能调用dom方法 document.getElementById(“btnShowDiv”).show();//dom对象不能调用jquery方法。这个直接用$(domObj)也可以。
var $obj = $(domObj); // $(document).ready(function(){});就是典型的DOM对象转jQuery对象ID选择器：获取指定id的元素
$("#id");类选择器：获取同一类class的元素
$(".class");标签选择器：获取同一类标签所有的元素
$("div");并集选择器：使用逗号分开，只要符合条件之一就可，
$("div,p,li");交集选择器（标签指定值选择器）:注意选择器a和选择器b之间没有空格，class为redClass的div元素，注意区分后代选择器
$("div.redClass");子代选择器：使用>号，获取儿子层级的元素，注意并不会获取孙子层级的元素，
$("ul>li");后代选择器：使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等。
$("ul li");这类选择器都带冒号：；
：eq(index) 获取li元素中选择索引号为2的元素，索引号index从0开始。
$("li:eq(2)").css("color","red");:odd 获取到的li元素中，选择索引号为奇数的元素
$("li:odd").css("color","red");:even 获取到li元素中，选择索引号为偶数的元素
$("li:even").css("color","red");筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
children(selector) 相当于$("ul>li"),子类选择器
$("ul").children("li");find(selector) 相当于$("ul li"),后代选择器
$("ul").find("li");siblings(selector) 查找兄弟节点，不包括自己本身。
$("#first").siblings("li");parent() 查找父亲
$("#first").parent();eq(index) 相当于 $("li:eq(2)") ，index从0开始
功能：设置或者修改样式，操作的是style属性
设置单个样式：
$("#one").css("background","gray");//将背景色修改为灰色设置多个样式：参数是一个对象，对象包含了需要设置的样式名和样式值
$("#one").css({ "background":"red", "width":"400px", "height":"200px" });获取样式，jQuery对象是一个伪数组(获取样式只会返回第一个元素对应的样式的值)
$("div").css("backgroundColor");添加类样式
addClass(name);//name：需要添加的样式类名，注意参数不要带点. $(“div”).addClass(“one”);//例子,给所有的div添加one的样式。移除所有的样式类
removeClass()//不带参数，移除所有的样式类 $(“div”).removeClass();//例子，移除div所有的样式类移除单个样式类
removeClass(“name”);//name:需要移除的样式类名 $(“div”).removeClass(“one”);//例子，移除div中one的样式类名判断是否有样式类
hasClass(name)//name:用于判断的样式类名，返回值为true false $(“div”).hasClass(“one”);//例子，判断第一个div是否有one的样式类切换样式类
toggleClass(name);//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。 //例子 $(“div”).toggleClass(“one”);jQuery提供了三组基本动画，这些动画都是标准的，有规律的效果，jQuery还提供了自定义动画的功能。
toggle();显示隐藏切换，如果显示状态执行隐藏操作，否则执行显示操作。
show([speed], [callback]); //speed(可选)：动画的执行时间 1.如果不传，就没有动画效果。 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐) 3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。 //callback(可选):执行完动画后执行的回调函数slidToggle()滑入滑出切换
slideUp(speed, callback); //speed(可选)：动画的执行时间 1.如果不传，默认为normal，注意区分show/hide。 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐) 3.固定字符串，slow(200)、normal(400)、fast(600) //callback(可选):执行完动画后执行的回调函数fadeToggle():淡入淡出切换
fadeIn(speed, callback); //speed(可选)：动画的执行时间 1.如果不传，默认是normal。 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐) 3.固定字符串，slow(200)、normal(400)、fast(600) //callback(可选):执行完动画后执行的回调函数jQuery给我们提供了三组动画，show/hide、slideDown/slideUp、fadeIn/fadeOut
show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。
在同一个元素上执行多个动画，对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完了才会执行。（这时候就会有bug，所以要解决，有个停止动画的方法，）
stop(); 停止当前正在执行的动画效果。
stop(clearQueue, jumpToEnd); //第一个参数：是否清除队列(true/false) //第二个参数：是否跳转到最终效果(true/false)stop();里面也可以指定某一个对象的动画，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 400px; height: 400px; background-color: pink; display: none; } </style> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#btn1").click(function () { $("#box").slideDown(4000).slideUp(4000); }); $("#btn2").click(function () { //$("#box").stop(); //stop(clearQueue, jumpToEnd) //是否清除动画队列 true, false //是否跳转到当前动画的最终效果 true, false //$("#box").stop(false, false);//stop() //$("#box").stop(true, false); //$("#box").stop(false, true); $("#box").stop(true, true); }); }); </script> </head> <body> <input type="button" value="开始动画" id="btn1"> <input type="button" value="停止动画" id="btn2"> <div id="box"></div> </body> </html>添加新建的元素：
//方法一：将jQuery对象添加到调用者内部的最后面。 var $span = $(“<span>这是一个span元素</span>”); $(“div”).append($span); //方法二：参数传字符串，会自动创建成jquery对象 $(“div”).append(“<span>这是一个span元素</span>”);添加已经存在的元素：（就是之前div外面有一个p，相当于把这个p剪切到了div里面）
类似的有：append 、prepend 、after 、before
var $p = $(“p”); $(“div”).append($p); //注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。使用html方法创建元素；text方法与DOM对象的方法一样
//设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html()empty();清空指定节点的所有元素，自身保留。
$(“div”).empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码，事件）第二种方法：
$(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。remove(); 相比于empty，自身也删除
$("div").remove();深度复制就是包括里面绑定的事件也都复制（参数传true）
// 复制$(selector)所匹配到的元素（深度复制） // 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。 $(selector).clone();