《从零玩转jQuery》李南江https://study.163.com/course/courseMain.htm?courseId=1005220017
简书笔记https://www.jianshu.com/nb/23491401
中文jQueryhttp://hemin.cn/jq/
学习该课程，参考上述笔记和API，自己总结锤炼吸收，以后方便参考。
1、增加节点 2、删除节点 3、替换节点 4、复制节点 5、包裹节点
四、jQuery事件
1、事件处理
（1）绑定与解绑
eventName(function(){})编码时有提示，开发效率略高；部分事件jQuery未实现，不能通过该方式添加。优先使用。
on(“eventName”, function(){})更通用，所有js事件都可以添加。
可以添加多个事件且不会覆盖。
$("button").click(function(){});
$("button").on("click",function(){});
off(“eventName”,function(){})如果不传参数，移除所有事件；传递一个参数，移除所有同类型事件；传递两个则移除指定类型的指定事件。
function test1(){alert("yc");}
function test2(){alert("love");}
function test3(){alert("you");}
$("button").click(test1);
$("button").click(test2);
$("button").mouseleave(test3);
//$("button").off();
//$("button").off("click");
$("button").off("click",test2);
（2）自动触发
trigger(“eventName”)自动触发事件，包括触发事件冒泡和默认行为；
triggerHandler(“eventName”)自动触发事件，不触发事件冒泡和默认行为。
<a href="http:www.baidu.com"><span>百度</span></a>
<form action="http:www.taobao.com">
<input type="text">
<input type="submit">
</form>
$(function(){
$("input[type='submit']").click(function(){
alert("submit");
});
$("input[type='submit']").trigger("click");//跳转
$("input[type='submit']").triggerHandler("click");//不跳转
//对<a>标签，二者均不触发默认行为，但对于冒泡和其它标签相同
$("a").click(function(){
alert("a");
});
$("a").trigger("click");//不跳转
$("a").triggerHandler("click");//不跳转
$("span").click(function(){
alert("a");
});
$("span").trigger("click");//跳转
$("span").triggerHandler("click");//不跳转
});
（3）自定义事件
自定义事件即定义一个js中不存在的事件，通过事件名称触发对应的方法执行。必须通过on绑定，通过trigger或triggerHandler触发。
$(".test").on("myClick",function(){
alert("myClick");
});
$(".test").triggerHandler("myClick");
（4）事件命名空间
一个元素可以绑定多个相同类型的事件，企业多人协同开发中，如果多人同时给某个元素绑定了相同类型的事件，但处理方式不同，可能引起事件混乱。事件命名空间用于区分相同类型的事件，判别在不同情况下触发哪个人编写的事件。
事件通过on绑定，on(“eventName.命名空间”,function(){})，通过trigger或triggerHandler触发。
带命名空间的事件被trigger调用，只触发带命名空间的事件，包括父元素；不带命名空间的事件被trigger调用，触发带和不带命名空间的同类型事件，包括父元素。
$(".test").on("click",function(){
alert("click");
});
$(".test").on("click.sg",function(){
alert("sg click");
});
$(".test").trigger("click.sg");
2、事件委托
$(parentSelector).delegate(childrenSelector,eventName,callback)。减少监听数量，且可以给在入口函数执行前就存在的元素添加事件，使新增元素也有该事件。
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<button>新增一个li</button>
$(function(){
$("button").click(function(){
$("ul").append("<li>我是新增的li</li>")
});
/*如果核心函数找到的元素不止一个，添加事件时会给每个元素添加
DOM加载完毕执行，新增的li未添加该事件
$("ul>li").click(function(){
console.log($(this).html());
});*/
$("ul").delegate("li","click",function(){
console.log($(this).html());
});
});
3、事件切换
hover()内容监听移入和移出，内部实现就是调用mouseenter和mouseleave。
//传入两个回调函数，分别监听移入和移出
$(".test").hover(function(){
console.log("test被移入");
},function(){
console.log("test被移出");
});
//只传一个回调函数则既监听移入又监听移出
$(".test").hover(function(){
console.log("移入移出");
});
五、jQuery效果
1、基本动画
| 显示、隐藏、切换 |
show() |
hide() |
toggle() |
|
| 展开、收起、切换 |
slideDown() |
slideUp() |
slideToggle() |
|
| 淡入、淡出、切换 |
fadeIn() |
fadeOut() |
fadeToggle() |
fadeTo() |
上述动画参数相同，本质是改变display的值，只是动画效果不同。
第一个参数是动画时长，单位为ms，也可以是slow（600ms）、normal（400ms，默认）或fast（200ms）；
第二个参数是动画节奏，默认”swing”两头慢中间快，可用参数”linear”。
第三个参数是动画执行完毕后调用的函数。以上三个参数均可选。
fadeTo()淡入到，第二个参数是淡入到指定透明度（0~1），必填。
$("button").eq(0).click(function(){
//$("div").css("display","block");无动画效果
$("div").show(1000,function(){
alert("显示动画执行完毕");
});
});
2、自定义动画
animate()接收四个参数，第一个参数必填，是一个对象，在对象中修改属性，可以同时操作多个属性，属性的值也可以修改为字符串值”hide”、”show”或”toggle”。其余三个参数与基本动画参数相同。
每次开始运动都必须是初始状态，如果想在上一次状态下再进行动画，可以累加动画。
$("button").eq(1).click(function(){
$(".two").animate({
marginLeft:"+=200",//累加动画
width:"toggle"
},1000,"linear",function(){
//alert("自定义动画执行完毕");
});
});
delay()设置动画延迟时长。
$("button").eq(0).click(function(){
$(".one").animate({
width:300
},1000).delay(1000).animate({
height:300
});
});
stop()停止指定元素上正在执行的动画。
//立即停止当前动画, 继续执行后续的动画
$("div").stop();
$("div").stop(false);
$("div").stop(false, false);
//立即停止当前和后续所有的动画
$("div").stop(true);
$("div").stop(true, false);
//立即完成当前的, 继续执行后续动画
$("div").stop(false, true);
//立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);
3、动画队列
queue()把非动画方法添加到动画方法执行的队列中，如果想在queue()后面直接再添加queue()，必须在前面queue()方法中添加next()。
//多个动画方法链式编程，依次执行
$("div").slideDown(1000).slideUp(1000).show(1000);
$(".one").slideDown(1000,function(){
$(".one").slideUp(1000,function(){
$(".one").show(1000);
});
});
//但是如果后面紧跟一个非动画方法则会被立即执行
//立刻变为黄色,然后再执行动画
$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");
//如果想使非动画方法也依次执行
$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function(){
$(".one").css("background","yellow")
});
//next()方法使用
$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function(next){
$(".one").css("background","yellow");
next(); // 关键点
}).queue(function(){
$(".one").css("width","500px")
});
4、设置
jQuery.fx.off打开或关闭页面上所有动画。默认false，设置为true之后关闭所有动画，如电脑配置较低、用户由于动画效果遇到了可访问性问题。
jQuery.fx.interval设置动画的显示帧速。默认13ms，值越小动画越流畅，越消耗浏览器性能。
六、节点操作
1、增加节点
（1）内部插入
append()和appendTo()均是将元素添加至指定元素内部的最后，二者只是格式不同。
prepend()和prependTo()均是将元素添加至指定元素内部的最前面，二者只是格式不同。
var $li=$("<li>新增的li</li>");//创建节点
$("ul").append($li); //添加节点
$li.appendTo("ul");
$("ul").prepend($li);
$li.prependTo("ul");
（2）外部插入
after()和insertAfter()均是将元素添加至指定元素外部的后面，二者只是格式不同。
before()和insertBefore()均是将元素添加至指定元素外部的前面，二者只是格式不同。
2、删除节点
empty()删除指定元素的内容及子元素，指定元素自身不会被删除；
remove(), detach()删除指定元素，remove()元素上的事件会移除，detach()元素上的事件被保留。
$("div").empty();
$("div").remove();
$("ul").remove(".item");//=$("ul .item").remove();
3、替换节点
replaceWith(), replaceAll()把所有匹配元素替换为指定元素，二者只是格式不同。
replaceWith()参数可以是html代码片段或DOM元素。
var $h3=$("<h3>我是h3</h3>");//创建元素
$("h1").replaceWith($h3);//替换元素
$h3.replaceAll($("h1"));
4、复制节点
clone()复制一个节点。参数为true或false，表示深复制或浅复制，浅复制时不会复制节点的事件。
var $li=$("li:first").clone(true);5、包裹节点
wrap(html|ele|fn)将所有匹配的元素分别用html结构包裹；
wrapInner(html|ele|fn)将所有匹配元素的子内容分别用html结构包裹；
wrapAll(html|ele)将所有匹配的元素用单个元素包裹；
nowrap()移除元素的父元素。
$("p").wrap("<div class='wrap'></div>");//参数为html代码字符串
$("p").wrap(document.getElementById("content"));//参数为DOM元素
$("p").wrap($("#content"));
$("p").wrap(function(){//参数为函数
return '<div></div>'
})