jquery基础
【文档处理方法】
（0.）.wrap():为每一个选中的节点，都套一个父节点
$("#div1").wrap("<p>哈哈哈哈</p>");
（1.）.unwrap()：删除选中节点的父节点
（2.）.wrapInner()：将选中节点中的所有子元素，包裹在一个新的父节点中，新的父节点依然是当前元素的唯一子节点
（3.）.replaceWith():将选中的节点替换为新的节点 用后者替换前者
（4.）.replaceAll(): 把前者替换为后者
（5.）.empty()：清空当前节点中的内容，但会保留当前节点标签
（6.）.remove()：删除当前节点，以及当前节点的子节点，删除后返回被删除的节点
（7.）.detach()：删除当前节点，以及当前节点的子节点，删除后返回被删除的节点
[remove和detach区别]
使用remove删除的节点，如果恢复以后，将不再保留节点所绑定的事件；
detach相反
[JS中cloneNode()与JQ中clone()区别]
（1.）cloneNode 如果不传参数或者参数传入false，表示只克隆当前节点，不克隆子节点；参数传入true，表示克隆当前节点以及所有子节点；
（2.）clone() 无论传入true还是false都会克隆当前节点以及所有子节点；传入true表示克隆节点的同时将包括节点所绑定的事件，
否则，只表示克隆节点，不克隆事件
【属性方法】
（1.）$("#div").attr("class","cls")：设置/添加节点属性，如果html标签中有属性值，新添加的会替换已有的属性值
console.log($("#div").attr("id")：取到节点属性
同时设置多对属性，括号内添加对象：
$("img").attr({
src: "test.jpg",
alt: "Test Image"
});
（2.）.prop()和.attr()一样，都可以对节点属性进行读取和设置。
[两者的不同]
在读取 属性名="属性值"的属性时，attr将返回属性值和undefind；而prop将返回true和false.
也就是说，attr要取到的属性，必须是在标签上已经写明的属性，否则无法取到。
（3.）.addClass()：在原有class的基础上新增class名字
（4.）.removeClass()：删除指定的class名称，其余未删除的class名，依然保留。
$("#div1")..removeClass("cls");
（5.）.toggleClass()：切换class，如果有指定class就删除，如果没有就新增。
（6.）.html()：取到或设置节点中html代码 设置html在括号（）里面设置
（7.）.text()：取到或设置节点中文本
（8.）.val()：取到或设置表单元素<input></input>的value值
$("input").val("哈哈哈")；
【css方法】
（1.）.css()：给节点添加css样式，属于行级样式表权限
同时给一个节点添加多对css样式，括号中传入匿名对象：
通过回调函数返回值，修改css样式。
（2.）.height() / .width()：取到或者设置节点的宽高：
（3.）.innerHeight()/.innerWidth()：取到节点的宽度+padding，不包含border和margin
（4.）.outerHeight()/.outerWidth()：不传参数，表示宽高+padding+border；传入参数true，表示表示宽高+padding+border+margin
（6.）.offset()：返回一个节点，相对于浏览器左上角的偏移量，返回一个对象{top:20,left:20}
此方法测量时，会将margin算作偏移量的距离
（7.）.position()：返回一个节点，相对于父容器的偏移量。
注意：使用此方法，要求父元素必须是定位元素，如果父元素不是定位元素，则依然是相对于浏览器左上角进行测量；
此方法，测量偏移时，将不考虑margin，而会将margin视为当前容器的一部分。
（8.）.scrollTop()：设置或取到指定节点的滚动条的位置。
【jQuery 对象访问】
（1.）.each()：用于遍历jquery中的对象数组。
在回调函数中，使用return true相当于continue；return false相当于break。
（2.）.size() / .length：返回所查询出元素数组的个数
（3.）.get()：将jQuery对象转为JS对象，传入index表示取出第几个，并转为JS对象，不传index，表示将jQuery对象数组中所有元素，都转为JS对象。
【数组和对象操作】
（1.）$.each(arr/obj,function(){})：对传入的数组或对象进行遍历，可以是jQuery对象数组，也可以是JS中的数组和对象
（2.）$.map():
（3.）$.inArray()检测一个值是否在数组中，返回下标；没有找到返回-1；第三个参数表示查找的起始下标。
（4.）.toArray()：将选中的jQuery Dom集合，恢复成数组，数组的每一个是JS对象。
（5.）$.merge( [0,1,2], [2,3,4] )：合并两个数组
（6.）$.parseJSON(str)：将一个JSON字符串转成JSON对象。
（7.）$.contains(c,c)：检测一个节点，是否包含另一个节点：接收两个JS对象，第一个是父对象，第二个是子对象。
（8.）$.type(obj)： 检测obj的数据类型。
[各种检测函数]
【筛选】
（1.）hasClass(class) ：检测一个节点是否包含指定class。
1.事件绑定的快捷方式：
$("button:eq(0)").dblclick(function(){
alert("hahaah")
});
缺点：绑定的事件无法取消。
2.使用on进行事件绑定。
2.1使用on进行单事件绑定。
$("button:eq(0)").on("click",function(){
alert("haha");
});
2.2使用on进行多事件绑定。
$("button:eq(0)").on("click dblclick mouseover",function(){
console.log("123");
});
2.3使用on同时给多个事件分别绑定不同的函数。
$("button:eq(0)").on({
"click":function(){
console.log("click");
},
"mouseover":function(){
console.log("mouseover");
}
});
2.4 使用on给回调函数传参，要求是对象格式，传递的参数可以在e.data中取到。
$("button:eq(0)").on("click",{"name":"zhangsan"},function(e){
console.log(e);
console.log(e.data);
console.log(e.data.name);
});
3.事件委派
1.事件委派：将原来绑定在DOM节点上的事件，改为绑定在其父节点甚至根结点上，然后委派给当前节点执行。
2.事件委派的作用：
(1)将事件直接绑定在根结点上，可以减少事件绑定次数，更加节省资源。
(2)使用事件委派绑定的事件当页面新增同类型标签时，新的标签也可以获得绑定的已有事件。
4.事件解绑
$("button:eq(0)").off("click");//清除所有的click事件
$("button:eq(0)").off("click",func);//只清除绑定了func函数的click事件
$("button:eq(0)").off("click dblclick");//清除多个事件
$("button:eq(0)").off("click","p");//清除事件委派
$("p").off();//清除绑定的所有事件
5.one()：使用one绑定的事件只能执行一次
$("button:eq(0)").one("click",function(){});//使用one绑定是事件只能执行一次
6.trigger():自动触发某个节点绑定的事件
接收三个参数：
1.需要触发的事件类型。
2.数组格式：表示传递给事件回调函数的参数。
注意：①事件回调函数的第一个参数必须是事件对象，因此我们传递的第二个开始接收。
②传递的参数可以使用arguments进行读取。
7.triggerHandler():用法与tirgger()相同
triggerHandler()与trigger()的区别
(1)triggerHandler() 不能触发HTML事件，例如表单的submit事件.而trigger()可以触发所有事件。
(2)triggerHandler() 只能触发所匹配元素中的第一个元素的事件；trigger()，将触发所有匹配元素的事件。
(3)triggerHandler() 的返回值是事件回调函数的返回值，如果事件回调函数没有返回值，则返回undefined；trigger的返回值永远是调用事件的DOM对象，符合JQ的链式语法。
8.hover() 接受两个函数： 分别表示mouseover()和mouseout()两个事件。如果只写一个函数，表示mouseover()。
$("p:eq(0)").hover(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","blue");
});
9.toggle():
①如果不传入参数，表示当前元素如果为显示状态，则隐藏，如果为隐藏状态，则显示。
②传入一个动画执行效果： "ease" ,"slow"，"fast"。
③传入一个函数，表示动画执行完成后显示的回调函数。
④接受一个boolean类型的参数，true为显示，fasle表示隐藏
$("button:eq(0)").on("click",function(){
$("p:eq(0)").toggle();
$("p:eq(0)").toggle("ease");
$("p:eq(0)").toggle("ease",function(){alert(1)});
$("p:eq(0)").toggle(true/false);
});
--------------------------------------------------------------------------------
show()方法： 让隐藏元素显示。同时修改宽度，高度，透明度(width/height/opacity)
①不传参。直接显示，而不进行动画。
②参数传入时间毫秒，或者表示速度的字符串“slow”,"normal","fast"则将在制定时间内完成动画。
③参数也可以传入回调函数，表示动画完成后执行的回调函数。
hide()：让显示的元素隐藏，效果与show()相反，其他一样。
slideXX():
slideDown()：让隐藏的元素显示，修改height属性。
slideUp()：让显示的元素隐藏，修改height属性。
slideToggle（()：让显示的元素隐藏，让隐藏是元素显示
fadeXX():
fadeOut()：让显示的隐藏，修改透明度(opacity)
fadeIn()：让隐藏的显示，修改透明度(opacity)
fadeToggle()：让显示的元素隐藏，让隐藏是元素显示,改透明度(opacity)
fadeTo()：作用月fadeToogle()相同，多了第二个参数，表示动画完成后的最终透明度。
animate()
animate()动画：自定义动画，接受4个参数
①动画完成后最终状态的CSS键值对集合。注意：css的样式，要求使用驼峰命名法。
②动画完成的时间，可以是毫秒，可以是“slow”,"normal","fast"。
③动画完成的效果： 可选值"linear","swing"
④动画完成后的回调函数。
stop()：停止当前节点的所有动画，后续动画不再执行，动画回调不再调用
finish()：直接结束当前节点的所有动画，动画直接进入最后状态，直接调用动画回调。
delay()：延时动画，表示延时多少毫秒后再执行动画。
1.事件绑定的快捷方式：
$("button:eq(0)").dblclick(function(){
alert("hahaah")
});
缺点：绑定的事件无法取消。
2.使用on进行事件绑定。
2.1使用on进行单事件绑定。
$("button:eq(0)").on("click",function(){
alert("haha");
});
2.2使用on进行多事件绑定。
$("button:eq(0)").on("click dblclick mouseover",function(){
console.log("123");
});
2.3使用on同时给多个事件分别绑定不同的函数。
$("button:eq(0)").on({
"click":function(){
console.log("click");
},
"mouseover":function(){
console.log("mouseover");
}
});
2.4 使用on给回调函数传参，要求是对象格式，传递的参数可以在e.data中取到。
$("button:eq(0)").on("click",{"name":"zhangsan"},function(e){
console.log(e);
console.log(e.data);
console.log(e.data.name);
});
3.事件委派
1.事件委派：将原来绑定在DOM节点上的事件，改为绑定在其父节点甚至根结点上，然后委派给当前节点执行。
2.事件委派的作用：
(1)将事件直接绑定在根结点上，可以减少事件绑定次数，更加节省资源。
(2)使用事件委派绑定的事件当页面新增同类型标签时，新的标签也可以获得绑定的已有事件。
4.事件解绑
$("button:eq(0)").off("click");//清除所有的click事件
$("button:eq(0)").off("click",func);//只清除绑定了func函数的click事件
$("button:eq(0)").off("click dblclick");//清除多个事件
$("button:eq(0)").off("click","p");//清除事件委派
$("p").off();//清除绑定的所有事件
5.one()：使用one绑定是事件只能执行一次
$("button:eq(0)").one("click",function(){});//使用one绑定是事件只能执行一次
6.trigger():自动触发某个节点绑定的事件
接收三个参数：
1.需要触发的事件类型。
2.数组格式：表示传递给事件回调函数的参数。
注意：①事件回调函数的第一个参数必须是事件对象，因此我们传递的第二个开始接收。
②传递的参数可以使用arguments进行读取。
7.triggerHandler():用法与tirgger()相同
triggerHandler()与trigger()的区别
(1)triggerHandler() 不能触发HTML事件，例如表单的submit事件.而trigger()可以触发所有事件。
(2)triggerHandler() 只能触发所匹配元素中的第一个元素的事件；trigger()，将触发所有匹配元素的事件。
(3)triggerHandler() 的返回值是事件回调函数的返回值，如果事件回调函数没有返回值，则返回undefined；trigger的返回值永远是调用事件的DOM对象，符合JQ的链式语法。
8.hover() 接受两个函数： 分别表示mouseover()和mouseout()两个事件。如果只写一个函数，表示mouseover()。
$("p:eq(0)").hover(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","blue");
});
9.toggle():
①如果不传入参数，表示当前元素如果为显示状态，则隐藏，如果为隐藏状态，则显示。
②传入一个动画执行效果： "ease" ,"slow"，"fast"。
③传入一个函数，表示动画执行完成后显示的回调函数。
④接受一个boolean类型的参数，true为显示，fasle表示隐藏
$("button:eq(0)").on("click",function(){
$("p:eq(0)").toggle();
$("p:eq(0)").toggle("ease");
$("p:eq(0)").toggle("ease",function(){alert(1)});
$("p:eq(0)").toggle(true/false);
});
--------------------------------------------------------------------------------
show()方法： 让隐藏元素显示。同时修改宽度，高度，透明度(width/height/opacity)
①不传参。直接显示，而不进行动画。
②参数传入时间毫秒，或者表示速度的字符串“slow”,"normal","fast"则将在制定时间内完成动画。
③参数也可以传入回调函数，表示动画完成后执行的回调函数。
hide()：让显示的元素隐藏，效果与show()相反，其他一样。
slideXX():
slideDown()：让隐藏的元素显示，修改height属性。
slideUp()：让显示的元素隐藏，修改height属性。
slideToggle（()：让显示的元素隐藏，让隐藏是元素显示
fadeXX():
fadeOut()：让显示的隐藏，修改透明度(opacity)
fadeIn()：让隐藏多少显示，修改透明度(opacity)
fadeToggle()：让显示的元素隐藏，让隐藏是元素显示,改透明度(opacity)
fadeTo()：作用月fadeToogle()相同，多了第二个参数，表示动画完成后的最终透明度。
animate()
animate()动画：自定义动画，接受4个参数
①动画完成后最终状态的CSS键值对集合。注意：css的样式，要求使用驼峰命名法。
②动画完成的时间，可以是毫秒，可以是“slow”,"normal","fast"。
③动画完成的效果： 可选值"linear","swing"
④动画完成后的回调函数。
stop()：停止当前节点的所有动画，后续动画不再执行，动画回调不再调用
finish()：直接结束当前节点的所有动画，动画直接进入最后状态，直接调用动画回调。
delay()：延时动画，表示延时多少毫秒后再执行动画。
