4.2 函数节流
所谓的函数节流，就是我们希望一些函数不要连续的触发。甚至于规定，触发这个函数的最小间隔是多少时间。
这个就是函数节流。
方法1：
经典的函数节流模型：
var lock = true; input.onclick = function(){ if(!lock) return; lock = false; setTimeout(function(){ lock = true; },1000); }
方法2：
改变我们的运动框架，在运动框架里面加上一个逻辑：运动开始了，就给elem加上一个属性isanimated，表示是否在运动，改为true。然后运动停止之后，停表之后，把elem.isanimated设为false
.onclick = function(){ if(m_unit.isanimate) return; //如果点击按钮的时候运动机构在动，那么return }
是一个a标签，但是我们不希望点击之后有任何默认的事情，默认事情通常是刷新当前页：
<a href="javascript:;" class="leftBtn" id="leftBtn"></a>
中级
是一个a标签，但是我们不希望点击之后有任何默认的事情，默认事情通常是刷新当前页：
<a href="javascript:;" class="leftBtn" id="leftBtn"></a>
打点标签后得到的数组不能用数组pop push。。。。等方法，得转换一下子
****！
五、$()函数
5.1 jQuery对象不是原生JS对象
$()函数，是招牌功能，能够根据CSS选择元素。
比如：
$("#box")
选择页面上id为box的盒子。
注意，选择出来的东西，是一个类数组对象，是jQuery自己的对象，这个jQuery对象后面不能跟着原生JS的语法：
$("#box").style.backgroundColor = "red";
因为.style.backgroundColor是原生JS语法，$()原则的对象是jQuery对象，不能跟着原生。
所以，如果想把jQuery对象，转为原生JS对象，要加[0]就行了：
$("#box")[0].style.backgroundColor = "red";
这里我们补充一点，jQuery选择的如果是很多元素，那么[0]转化的是一个元素。[1]、[2]、[3]……
$等价于jQuery
jQuery("#box") 等价于 $("#box")
Siblings()
查找每个 p 元素的所有类名为 "selected" 的所有同胞元素：
$("p").siblings(".selected")//可以加选择器
5.2 引号问题
$("选择器")
注意引号不能丢！！在jQuery世界中，只有三个东西不能加引号，其他必须加引号：
$(this) $(document) $(window)
上述的三个东西，不能有引号，干吗用的，后面说。5.3 支持的选择器
jQuery支持所有CSS2.1的选择器：
$("p") $(".box") $("#box") $("#box ul li") $("li.special") $("ol , ul") $("*")
也支持部分CSS3的选择器，我们CSS3的选择器在CSS3课程介绍，所以也不讲了。
5.4 筛选器
这些都是关于序号的：
$("p") 所有的p $("p:first") 第一个p $("p:last") 最后一个p $("p:eq(3)") 下标为3的p $("p:lt(3)") 下标小于3的p $("p:gt(3)") 下标大于3的p $("p:odd") 下标是奇数的p $("p:even") 下标是偶数的p
特别的，eq可以单独提炼为方法，可以连续打点：
$("p").eq(3).animate({"width":400},1000);
等价于
$("p:eq(3)").animate({"width":400},1000);
提炼出来的好处是，可以用变量
var a = 3; $("p").eq(a).animate({"width":400},1000);
！！！！
别的不行了，但是可以切割下面这样
********$("p:lt("+a+")")
CSS函数
Css可以连续打点
css函数可以读样式，可以设样式。
读样式，可以读取计算后样式，写一个参数，是不是驼峰，无所谓，但是必须加引号：
$("p:first").css("background-color"); $("p:first").css("backgroundColor");
设置样式，设置样式，有两种语法，如果你只想设置一个样式，逗号隔开k和v：
$("p:odd").css("backgroundColor","blue");
如果想设置很多样式，就写JSON:
$("p:odd").css(JSON);
所有的数值，不需要单位：
$("p:lt(4)").css({ "width" : 20, "height" : 20, "backgroundColor" : "red" })
特别的，还支持+=写法：
$("p:eq(5)").css("width","+=20px");
七、animate函数
！！！有好多东西animate不能完成
$("p").animate({"left":1000},2000,function(){ $(thisut).css("background-color","red"); });
我们骄傲的告诉大家，我们封装的animate语法基本和jQuery一样，只不过jQuery是对象打点：
$("选择器").animate(终点JSON,动画时间,回调函数);
有没有缓冲呢，有，jQuery需要插件来完成，我们日后说。
jQuery默认不是匀速，是easeInOut
和我们封装的框架不一样，jQuery默认有一个处理机制，叫做动画排队。当一个元素接收到了两个animate命令之后，后面的animate会排队：
$("p").animate({"left":1000},2000); $("p").animate({"top":400},2000);
先2000毫秒横着跑，然后2000毫秒竖着跑。动画总时长4000。
如果想让元素斜着跑，就是同时变化left和top，就写在同一个JSON里面：
$("p").animate({"left":1000,"top":400},2000);
不同的元素，不排队，是同时的。
你要记住这个事情，background-color是不能渐变的。页面上如果想要使用background-color的过渡效果，慢慢从红色变为蓝色，必须使用css3。
jQuery中提供了非常牛逼的动画队列功能，相同元素的animate()方法会累积
*不同元素的动画是同时进行的
八、事件监听
$(".box1").click(function(){ //点击box1之后做的事情 });
事件名一律不写on。特别的，鼠标进入改成了mouseenter，鼠标离开改为了mouseleave。
Onclick 单击
Onmouseover 鼠标进入mouseenter
Onmouseout 鼠标离开mouseleave
Ondblclivk 双击
Onfouse 得到焦点
Onblue 失去焦点
Onmousedown 鼠标按下
Onmouseup 鼠标按键抬起
2.2 index()方法
返回这个元素在亲兄弟中的排名，无视选择器怎么选。
$(this).index()是一个很常见的写法，表示触发这个事件的元素，在自己亲兄弟中的排名：
2.3 each()
$("p").each(function(i){ $(this).animate({"width":50 * i},1000); });
Children：自己的儿子中的啥啥啥
2.4 size()方法和length属性
jQuery 对象中元素的个数。
前面$()的元素页面上一共有几个，length、size()返回的都是同一个数值，就是个数。
$("p").length $("p").size()
2.5 get()方法
get()方法和eq()方法基本一致，都仰赖$()的序列。
eq()返回的是jQuery对象，而get()返回的是原生JS对象。jQuery对象后面要跟着jQuery方法，原生对象后面要跟着原生属性、方法：
Html改变的两种方法！！！！
原生里面的innerHTML加倍增加
***.innerHTML+=***.innerHTML
jQuary中
$(“”).html($(“”).html()+$(“”).html());
$(“”).html()~!!!! html是个方法函数必须加小括号调用！！！！！
$("p").eq(2).html("哈哈哈哈哈哈");
等价于：
$("p").get(2).innerHTML = "哈哈哈哈哈哈";
等价于：
$("p").eq(2)[0].innerHTML = "哈哈哈哈哈哈";
3.1 内置show()、hide()、toggle()方法
show()显示、hide()隐藏、toggle()切换
$("div").show(); //让一个本身是play:none;元素显示 $("div").hide(); //隐藏元素play:none; $("div").toggle(); //切换显示状态。 //自行带有判断，如果可见，就隐藏；否则显示。
$("div").show([时间],[回调函数]);
特别的，如果show()、hide()、toggle()里面有数值，将变为动画：
[]表示这个参数可选。
3.2 slideDown()、slideUp()、slideToggle()方法
slideDown : 下滑展开//如果定义的对象是position定位top的话那么向下展开，bottom的话那么向上展开！！！！！！！
slideUp：上滑收回
slideToggle : 滑动切换
$("div").slideDown();
slideDown()的起点一定是play:none换句话说，只有play:none的元素，才能够调用slideDown()
相反的，slideUp()的终点就是play:none;
同样的，slideDown、slideUp、slideToggle里面可以写动画时间、回调函数。
默认时间为1000
*****
如果不加>号那么就是选中的后代
加了就是选中的儿子
注意水平菜单的html结构：
<div class="nav"> <ul> <li> <a href=""></a> <div class="dropdown"> <div class="inner"> </div> </div> </li> </ul> </div>
3.3 fadeIn()、fadeOut()、fadeTo()、fadeToggle()方法
fadeIn()淡入
fadeOut()淡出
fadeTo() 淡到那个数
fadeToggle() 淡出入切换
fadeIn()的起点是play:none;换句话说，只有play:none的元素，才能执行fadeIn()
$("div").fadeIn(5000);
动画机理：
一个play:none的元素，瞬间可见，然后瞬间变为opacity:0，往自己的opacity上变。如果没有设置opacity，就往1变。
fadeTo有三个参数，第一个参数是动画的时间，第二个参数是要变到的透明度，第三个参数是回调函数。
$("div").fadeTo(1000,0.3);
fadeTo的起点不一定是play:none;
3.4 stop()
stop()挺有意思的：
停止当前的animate动画，但是不清除队列，立即执行后面的animate动画：
$("div").stop(); //等价于$(“div”).stop(false,false);
停止当前的animate动画，并且清除队列，盒子留在了此时的位置：
$("div").stop(true); //等价于$(“div”).stop(true,false);
瞬间完成当前的animate动画，并且清除队列：
$("div").stop(true,true);
瞬间完成当前的animate动画，但是不清楚队列，立即执行后面的动画：
$("div").stop(false,true);
公式：
stop(是否清除队列,是否瞬间完成当前动画)
如果没有写true或者false，默认是false
改变图片路径
$().attr(“读取的属性”,”变更的属性”);
得到自己定义的属性
3.6 delay()
delay延迟，可以使用连续打点，必须放在运动语句之前。
$("div").delay(1000).animate({"left":500},1000); $("div").delay(1000).slideUp(); $("div").delay(1000).hide(1); //必须写1，写1了就是运动
小窍门，让所有的img元素，都延迟不同的时间入场：
$("img").each(function(i){ //attr就表示得到标签内的属性 $(this).delay(i * 1000).fadeIn(1000);
});
3.7 is(":animated")
is()方法表示身份探测，返回true、false。
比如，判断点击的这个p是不是有t这个类：
$("p").click(function(){ alert( $(this).is(".t") ); });
is里面可以写筛选器：is(：visible)//可见的
判断点击的这个p是不是序号是奇数：
$(this).is("p:odd")
判断点击的这个p是不是序号小于3：
$(this).is("p:lt(3)")
还可以写
is(":animated")
判断这个元素是否在运动中。判断是否在运动中，可以防止动画的积累：
if($(this).children(".dropbox").is(":animated")){ return; }
4.2 原生JS中的节点关系-childNodes
任何节点都有childNodes属性，是一个类数组对象，存放着所有自己的儿子。
注意，这里有重大兼容性问题：
结构
<div id="box"> <p></p> </div>
Chrome、IE9、IE10……高级浏览器，认为：
box.childNodes[0].nodeType //3
高级浏览器认为box的大儿子是文本节点。当然是空文本。
IE6、7、8认为：
box.childNodes[0].nodeType //1
IE6、7、8认为box的大儿子是p。
所以为了没有兼容问题，需要遍历节点的时候，HTML结构就不能有空格。
面试题：
<div id="box"> <p></p> <p></p> <p></p> <p></p> </div>
document.getElementById(“box”).childNodes.length; //高级浏览器9，低级浏览器4
怎么解决这个差异呢？放弃原有的数组，重新遍历儿子数组，把所有nodeType为1的元素组成一个新的数组
var childs = []; for(var i = 0 ; i < box.childNodes.length ; i++){ if(box.childNodes[i].nodeType == 1){ childs.push(box.childNodes[i]); } } childs[1].style.background = "red";
4.3 原生JS中的节点关系-parentNode
注意childNodes儿子可以有很多 ，parendNode父亲只能有1个
某个元素.parentNode
4.4 previousSibling、nextSibling
上一个同胞兄弟，下一个同胞兄弟。
需要注意的是，天大的浏览器兼容问题出现了：
<div id="box"> <p>AAA</p> <p>BBB</p> <p>CCC</p> <p>DDD</p> </div>
ps[2].previousSibling //低级浏览器就是BBB那个p，高级浏览器是空文本节点
onchange事件
addClass removeClass hasClass 增加class移除class 是否有class类名
2.2 jQuery中的节点关系
● children()方法
所有亲儿子节点。就是儿子，孙子不在children()里面。
让box的所有儿子变红：
$("#box").children().css("background-color","red");
儿子有很多，我们可以用选择器来表示怎么样的儿子：
$("#box").children("h3").css("background-color","red");
还可以用筛选器：
$("#box").children(":odd").css("background-color","red");
jQuey屏蔽掉了浏览器兼容问题，不存在空文本节点也是儿子了，事实上children()返回的只能是节点，所有的文本都不算做是儿子了。
● find()
所有后代元素。和children()不一样，children()返回的是自己的亲儿子元素列表，而find()返回的是自己的后代所有元素的列表。
$("#box").find("p").css("background-color","red");
注意，和children()方法不一样，find()方法里面，必须写参数，表示后代的谁？
说白了find是寻找的意思，就是你要在后代寻找谁。
● parent()
亲爸爸。任何元素都只有一个亲爸爸。
$("p").parent().css("background-color","red");
● parents()
这个元素的所有的祖先节点。
● siblings()
亲兄弟
$(".xiaoming").siblings().css("background-color","red");
同样的，jQuery只返回节点元素，对于文本、注释都不视为兄弟。
可以加选择器、筛选器：
$(".xiaoming").siblings(":odd").css("background-color","red");
排他，妈妈再也不用担心我写for循环了：
$(this).addClass("cur").siblings().removeClass("cur");
我加cur，我的兄弟们去cur。///常用到
● prev()、next()、prevAll()、nextAll()
前一个兄弟、后一个兄弟、前所有兄弟、后所有兄弟。
总结：感恩！jQuery屏蔽了所有的不兼容，只选择nodeType=1的元素，不选择文本、注释等等。
三、节点操作
3.1 原生JavaScript节点操作
3.1.1 createElement()和appendChild()
var ul = document.getElementsByTagName("ul")[0]; //创建一个li标签，用变量oLi来表示。创建出来的节点不是任何节点的儿子， //也就是说没有在DOM树上， var oLi = document.createElement("li"); oLi.innerHTML = "DDDD"; //改变这个节点里面的内容 //把新创建的节点，追加到DOM树上 ul.appendChild(oLi);
创建节点的API：
document.createElement()
create创建，Element元素。接收一个参数，就是创建的标签是什么。
追加节点的API：
创建出来的节点不在DOM树上，所以就应该用appendChild()来添加到DOM树上：
父亲.appendChild(新儿子);
appendChild()一般来说就是用来追加新创建的节点。如果你试图把页面上已经有的节点，appendChild()到别的地方，那么这个节点将移动。也就是说，同一个节点不可能在页面上的两个地方出现。
比如结构：
<div id="box1"> <p id="xiaoming">我是小明</p> </div> <div id="box2"> </div>
语句：
box2.appendChild(xiaoming);
将使xiaoming移动位置，从box1里面移动到box2里面。
事实上，工作的时候很少使用createElement。因为innerHTML足够好用，innerHTML也可以用来创建节点，甚至效率比createElement还高。
box.innerHTML = "<ul><li>哈哈哈</li><li>做顿饭</li></ul>";
3.1.2 insertBefore
我们刚才说的appendChild是把新节点在父亲的所有儿子后添加，也就是说添加的节点就是父亲的最后一个儿子。
我们可以在任意一个位置添加节点。
父亲.insertBefore(新儿子,原有标杆儿子);
会在原有标杆儿子之前插入。
如果想每次添加都在开头添加，那么就是：
ul.insertBefore(oLi, lis[0]);
lis这个变量是动态的，这次添加的li，下回就是lis[0]
3.1.3 removeChild()
父亲.removeChild(儿子);
如果要自杀，也要找到爸爸
this.parentNode.removeChild(this);
3.1.4 replaceChild()
替换节点
父亲.replaceChild(新儿子, 老儿子);
3.1.5 cloneNode()
克隆节点，参数true表示深复制，节点里面的所有内容一同复制。
复制之后的节点是个孤儿节点，所以也需要使用appendChild、inserBefore、replaceChild来添加上DOM树。
ul.appendChild(lis[0].cloneNode(true));
