JQuery的基本概念
JQuery是一个javascript库，JQuery凭借着简洁的语法和跨平台的兼容性，极大的简化了js操作DOM、处理事件、执行动画等操作。JQuery强调的理念是：'write less, do more'(写的少，做的多)。
1.JQuery的版本
2.JQuery的使用
1.使用JQuery必须先导入jquery-x.x.x.js文件。
<script src="js/jquery-3.1.1.js"></script>
2.JQuery中的选择器
$("选择器名称").函数名();
例子：console.log($("#div1"));
注意：$是JQuery的缩写，也就是说，选择器可以使用JQuery(":input")
选择器：查帮助文档，这里就不再赘述了。
3.JQuery中的文档就绪函数： $(document).ready(function(){});
//JS中的文档就绪函数 window.onload= function(){ } //JQuery的文档就绪函数 $(document).ready(function(){ console.log($("#div1")); }); //简写模式 $(function(){})
| 类别 | window.onload | $(document).ready() |
| 执行时机 | 必须等待网页中所有的内容加载完毕后(包括图片，视频)才能执行 | 网页中所有DOM结构绘制完毕后就执行，并不会等待图片、文件的加载 |
| 编写个数 | 只能写一个，不能同时写多个，如果同时写了多个，下面的会把上面的覆盖 | 能同时编写多个，两个入口函数互不影响 |
| 简化写法 | 无 | $(function(){}); |
5.JS对象和JQuery对象：
①使用$取到的节点为JQuery对象，只能调用JQuery方法，不能调用原生JS方法。
正确的：$("#div1").click(function(){})
错误的：$("#div1").onclick = function(){}（使用JQuery对象调用原生JS）
同理，使用getElement系列函数取到的为原生JS对象，也不能调用JQuery函数。
【JQuery对象与JS对象的相互转换】
(1)JQuery转JS：
方法一(常用)：[index] var $box = $("#box"); // JQuery获取到的对象 var box = $box[0]; // 转成JS对象 box.innerHTML = "哈哈哈"; // 使用JS的方法 方法二：get(index) var $box = $('#box'); // JQuery获取到的对象 var box = $box.get(0); // 转成JS对象 box.innerHTML = "哈哈哈"; // 使用JS对象的方法
(2)JS转JQuery：
JS对象转成JQuery对象的十分简单，只需要用$()把JS对象包裹起来就是一个JQuery对象。
var box = document.getElementById("#box"); // 获取的JS对象 $(box).click(function(){}); // 转成JQuery对象
6.解决JQuery多库冲突问题：
页面中如果同时引入多个JS框架，可能导致$冲突。
解决办法：
(1)使用jQuery.noConflict()：使用JQuery放弃在全局使用$。
(2)使用jQuery关键字代替$,或者使用一个自执行函数：
!functio($){ //在自执行函数中，可以使用$替代jQuery //除自执行函数外的其他区域，禁止JQuery使用$ }(jQuery);
DOM操作
1.添加节点
| 名称 | 用法 | 描述 |
| append() |
$("#div1").append("<img src='../01-HTML基本标签/img/Female.gif' />"); | 在div的内部最后追加一个图片 |
| appendTo() |
$("<img src='../01-HTML基本标签/img/Female.gif' />").appendTo("#div1") | 把一个图片追加到div1的内部最后 |
| prepend() |
$("#div1").prepend("<img src='../01-HTML基本标签/img/Female.gif_temp.bmp' />"); | 在div的内部最前边加入一张图片 |
| prependTo() |
$("<img src='../01-HTML基本标签/img/Female.gif_temp.bmp' />").prependTo("#div1"); |
把一个图片追加到div1的内部最前边 |
| after() | $("#div1").after("<p>这是一个P标签</p>") | 在div1的外部最后，插入节点 |
| insertAfter() | $("<p>这是一个P标签</p>").insertAfter("#div1"); | 将一个节点插入div1的外部的最后 |
| before() |
$("#div1").before("<p>这是一个P标签</p>"); | 在div1外部的前边插入一个节点 |
| insertBefore() |
$("<p>这是一个P标签</p>").insertBefore("#div1"); | 将一个节点插入到div1的外部的最前面 |
2.包裹节点
| 名称 | 用法 | 描述 |
wrap() |
$("div").wrap('<i></i>') | 为每一个选中的节点都套一个父节点 |
| wrapAll() | $("div").wrapAll('<i></i>') | 将选中的所有节点包裹在同一个父节点中 |
unwrap() |
$("#div1 p").unwrap() | 删除选中节点的父节点 |
wrapInner() |
$("#div1").wrapInner('<div></div>') | 将选中的节点中的所有子元素包裹在一个新的父节点中（新的父节点依然是当前元素的子节点，而且是当前元素的唯一子节点） |
3.替换节点
| 名称 | 用法 | 描述 |
| replaceWith() | $("#div1 p").replaceWith("<span>1</span>") | 将选中的节点重新替换成新的节点 |
replaceAll() |
$("<span>1</span>").replaceAll("#div1 p"); | 用新的节点替换所有选中的节点 |
4.删除节点
| 名称 | 用法 | 描述 |
| empty() | $("#div1").empty(); | 清空当前节点中的内容，但会保留当前节点标签 |
| remove() | $("#div1").remove(); | 删除当前节点已经当前节点的子节点 |
detach() |
$("#div1").detach() | 删除当前节点已经当前节点的子节点，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。 |
remove()和detach()的区别：
使用remove()删除的节点，在恢复后，将不再保留节点所绑定的事件。
使用detach()删除的节点，在恢复后，可以保留节点之前所绑定的事件。
5.复制节点
clone()：拷贝复制节点，它也有深拷贝和浅拷贝。深拷贝和浅拷贝的区别就是，深拷贝会复制绑定的事件，而浅拷贝不会复制绑定的事件。
写法：clone(true)为深拷贝，默认不传或者传false就是浅拷贝。
JS中的cloneNode()和JQuery中的clone()的区别：
(1)cloneNode()如果不传入参数或者参数传入false，表示只克隆当前节点，不克隆子节点。传入true表示克隆当前节点以及子节点。
(2)clone()无论传入的是true还是false，都克隆当前节点以及子节点，传入true表示克隆节点的同时将保留节点的事件，否则表示只克隆节
6.查找节点
使用JQuery选择器，查找到需要的元素后，可以使用attr()方法来获取它的各种属性的值，text()方法来获取它的文本内容。
console.log($("#div1 p").attr("title"));//查询div1下面的p标签的title属性值。
console.log($("#div1 p").text())；//查询div1下面的p标签的文本内容
7.创建节点
创建元素节点很简单，直接使用 $(html)，html就是需要添加的元素。$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
var li = $("<li title="城市">深圳</li>");
$("#div1").append(li);
属性和CSS类的操作
1.attr操作
(1)attr()，可以用来获取属性也可以用来设置属性。当attr()参数为一个的时候，即属性名称，表示的是获取属性。当attr()里面的参数是两个的时候，即属性名称和对应的值，表示的是设置属性。如果想要设置多个属性，参数就是一个json对象（键值对的形式）。
//获得属性 $("#div1").attr("id"); //添加属性 $("#div1").attr("class","cls"); //添加多个属性 $("#div1").attr({ "class":"cls1", "name":"name1", "style":"color:blue" });
除了attr方法类似的还有：html()、text()、height()、width()、val()、css()等方法，不传参则是获取值，传参则是设置值。
(2)removeAttr()：删除节点属性。（删除多个属性用空格隔开）
$("#div1").remove("cls")
2.prop操作
(1)获取、设置属性时用prop()方法与attr()方法一样，当prop()参数为一个的时候，即属性名称，表示的是获取属性。当prop()里面的参数是两个的时候，即属性名称和对应的布尔值。
(2)在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr()方法，只能用prop()方法。
(3)removeProp()：删除节点属性
prop()和attr()的不同：在读取 属性名="属性值"的属性时，attr将返回属性值和undefinded；而prop返回true或false。也就是说attr()要取到的属性必须是在标签上已经写明的属性，否则无法取到。
3.CSS类的操作
addClass()：在原有class的基础上新增class名。
removeClass()：删除指定的class名称，其余未删除的class名依然保留。
toggleClass()：切换指定的class名称。如果类名存在则删除它，如果类名不存在则添加它。
hasClass()：用来判断是否包含一个class的名称。返回值为true或false。
CSS样式操作
1.通过css()设置属性
(1)通过css()的方法设置或者获取样式，无论样式属性是从外部导入的，还是直接写在HTML标签里面的，属于行级样式表。添加多个样式的时候，css()，里面的参数是一个对象。传入一个参数的时候是表示获得当前CSS样式的属性值。
(2)通过回调函数返回值修改CSS的样式
2.取到或者设置节点的宽高
1 $("#div1").height(); // 获取 p 元素的高度值 2 $(window).height(); // 获取页面可视区的高度 3 $("#div1").width(); // 获取 p 元素的高度值 4 $(window).width(); // 获取页面可视区的高度 5 $("#div1").innerHeight(); //取到节点的高+padding，不包含border和margen 6 $("#div1").innerWidth(); //取到节点的宽+padding，不包含border和margen 7 $("#div1").outerHeight(); //取到节点的高+padding+border（不传参），不包含margen 8 $("#div1").outerWidth(true); //取到节点的宽+padding+border+margen（传参数：true）
3.位置
1 $("#div1").offset()：返回一个节点相对于浏览器左上角的偏移量，返回的是一个对象{top:20,left:20}。 2 注意：此方法测量时会将margen算入偏移量的距离。 3 4 $("#div1").position()：返回一个节点相对于父容器的偏移量。
5 注意： (1)使用此方法，要求父元素必须是定位元素。如果父元素不是定位元素，则依然是相对于浏览器左上角进行测量。 6 (2)此方法，测量偏移时，将不考虑margen，而会将margen视为当前容器的一部分。 7 $(window).scrollTop(200)：设置或取到滚动节点的滚动条的位置。
JQuery函数
(1)each()：用于遍历JQuery中的对象数组，在回调函数中,可以使用return true相当于continue，return false相当于break；
1 //each类似于foreach 2 $("#ul1 li").each(function(index,item){ 3 //true 类似continue false 类似于break 4 if(index%2 != 0){ 5 return true; 6 7 } 8 console.log(index) 9 console.log($(item).text()) 10 //在回调函数中，this指向当前调用函数的节点对象 11 //this是一个JS对象，如果要用JQ对象，需要使用$(this) 12 $(this).text($(this).text()+"12314"); 13 });
(2)$("#ul1 li").size()/$("#ul1 li").length：返回查询元素的个数
(3)get()：将JQuery对象转换为JS对象。传入index表示取出第几个，返回一个JS对象。如果不传入参数那么返回全对象的数组。
(4)$.each(arr/obj,function(index,item){})：对传入的数组或对象进行遍历，可以是JQuery对象数值，也可以是JS中的数组和对象。
(5)$.map(arr,function(index,item){return item}):数组映射，返回一个新数组.
(6)$.inArray()：检测一个值是否在数组中，返回下标。参数1：值，参数2：数组，参数3：查找的起始下标。（没找到为-1）
(7).toArray()：将选中的JQuery的DOM集合，恢复成数组，数组的每一个是JS对象。
(8).marge()：合并俩个数组。
(9)parseJSON：将一个JSON字符串转换成JSON对象。
(10)$.contains(父对象，字对象)：父对象和子对象必须是JS对象
