jQuery --------(2)stop内不传值，点击则立即停止当前animate，执行下一个animate，传一个

.each()方法

<form action="">        
    username: <input type="text" name="username">        
    password: <input type="password" name="password">        
    <button>submit</button>    
</form>

$("input").each(function (index, ele) {                
    obj[$(ele).prop('name')] = $(ele).val();            
})

注意each第一个参数是index，第二个是DOM（.prop方法返回元素属性，.val返回value值）

$("button").on("click", function () {            
    console.log(111)            
    var obj = {};            
    $("input").each(function (index, ele) {                
        obj[$(ele).prop('name')] = $(ele).val();            
    })             
    console.log(obj)                                  
    return false;        
})

renturn false能阻止默认事件（阻止表单提交刷新页面）

$("form").serialize() 能将表单数据直接转成字符串

$("form").serializeArray() 能将表单数据转换成数组的格式（[{name：xxx，value : xxx} , {name：xxx，value : xxx}]）

.one()

简单的demo

.show{            
    display: none;            
    width: 500px;            
    height: 500px;            
    left: 50%;            
    top: 200px;            
    border: 1px solid black;        
}

<div class="btn">        
    <button>btn</button>    
</div>    
<div class="show">            
    username: <input type="text" name="username">            
    password: <input type="password" name="password">            
    <button>x</button>    
</div>

$("button", ".btn").one("click", function () {            
    $(".show").css("display", "block")            
    $("button", ".show").on("click", function () {                
        $(".show").css("display", "none")            
    })        
})

.one方法只触发一次

.offset()

$("#demo").offset() 返回相对于浏览器边框的距离

.position()

$("#demo").position() 返回相对于父级的距离

.parent() / .parents() / .offsetParent()

<div>        
    <ul>            
        <li class="li">                
            <div class="div">                    
                <em></em>                
            </div>            
        </li>        
    </ul>    
</div>

console.log($("em").parent());//返回父级        
console.log($("em").offsetParent());//返回有定位(position)的最近的父级        
console.log($("em").parents(".li"));//返回所有父级

.length

$("em").length 返回em的长度，没有()

.wrap()

四种种传值方法

$("em").wrap(document.getElementById("demo1"))        
$("em").wrap($("#demo1")) 
$("em").wrap($("<div>div</div>"))      
$("em").wrap(function (index) {            
    switch (index) {                
        case 0: {                    
            return "<div>div</div>"                
        };                
        case 1: {                    
            return "<li>li</li>"                
        };                
        case 2: {                    
            return "<span>span<span>"                
        }                            
     }        
})

将选中的DOM包裹在被选的节点上（第三行为例，每一个em标签外面都包裹一层div，如果div绑定了事件，那么事件也会复制过去，其实是深度克隆的原理）

$("em").wrapAll("#demo1")//注意可能会改变页面结构

最好别用，因为如果DOM节点是这样的话，那么最后span会在所有em的下面

<em>em</em>    
<span>span</span>    
<em>em</em>    
<em>em</em>    
<em>em</em>    
<em>em</em>

关于.wrapInner(),就是将里面包裹，但有问题我也没弄清楚

<em>em</em>    
<em>em</em>    
<em>em</em>    
<em>em</em>    
<em>em</em>    
<em>em</em>    
<div id="demo1">123</div>

$("em").wrapInner("#demo1")

浏览器显示，从第二个em开始em内的div的文本内容变成了123emem（为什么多了一个em？？？）

123em

123emem

取消wrap

$("em").unwrap($("div"))

.end()

<ul>        
    <li></li>        
    <li></li>        
    <li></li>        
    <li></li>        
    <li></li>        
    <li></li>    
</ul>

$("ul").find("li").eq(2).css("background", "red").end().end().css("background", "green")

这段代码你可以理解为当执行到end时，向前回跳两步，到find前，把css执行一次，所以ul是绿色，第三个li是红色

.closest()

只返回父级ID名为demo1的DOM元素

console.log($("li").closest("#demo1"))

.sibling() / .prevAll() / .nextAll()

$("li").eq(2).siblings().css("background", "red")//返回所有兄弟节点        
$("li").eq(2).prevAll().css("background", "red")//返回元素上面的所有兄弟节点        
$("li").eq(2).nextAll().css("background", "red")//返回元素下面的所有兄弟节点

.until()

<ul>        
    <li></li>        
    <li></li>        
    <li></li>        
    <li></li>        
    <li></li>        
    <li></li>    
</ul>

$("li").eq(3).prevUntil($("li").eq(0)).css("background", "red")//向前，从3到0，选中2和1        
$("li").eq(3).nextUntil($("li").eq(5)).css("background", "red")//向后，从3到5，选中4

.clone()

 <div id="demo4">div</div>

$("#demo4").on("click", function () {            
    console.log(111)        
})        
var oDemo = $("#demo4").clone(true)//参数为true的时候事件也能克隆，上文wrap用的就是深度克隆 
$("body").append(oDemo)

.add()

<ul>        
    <li></li>        
    <li></li>        
    <li></li>        
    <li></li>        
    <li></li>        
    <li></li>    
</ul>

<div id="demo4">div</div>

$("li").add("#demo4").css({height: 100, width: 100, background: "red"})
//将demo4选出来和li集中操作

.animate()

$("#demo").animate({
    width: 200, 
    height: 200, 
    opacity: 0.5, 
    left: 200, 
    top: 200
}, 5000, 
   "easeInBounce", 
   function () {                
        console.log(111)            
    })       //动态变化，第二个参数是时间ms，也可以是normal，quick，slow,第三个参数是速率，
             //推荐用easing插件,里面有各种各样的速率样式
.delay(2000)      //第一个动画和第二个动画间的延迟            
.animate({                
    width: 50,                
    height: 50,                
    opacity: 1,                
    left: 400,                
    top: 0            
}, 5000, "easeInOutBounce")

$(document).on("click", function () {                
     $("#demo").stop(true, true);          
})

stop内不传值，点击则立即停止当前animate，执行下一个animate，传一个true，则点击立马停止运动，传两个true则立即结束当前animate，跳到当前animate的末端位置，后面的animate不继续执行。

$(document).on("click", function () {                
       $("#demo").finish()             
})

不论是在第几个animate的位置，立即结束动画，直接跳到最后一个animate的最终位置