第一章 事件篇

鼠标事件

1. click与dbclick事件

click(): 监听用户的单机操作

$("#test").click(function() {
    //this指向 div元素
});

dbclick: 监听用户的双击操作

2. mousedown与mouseup

监听用户鼠标的按下和弹起。

$("button:eq(0)").mousedown(function(e) {
        alert('e.which: ' + e.which)
 })

** 用event 对象的which区别按键:**
敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3

3. mousemove 事件

监听用户鼠标移动的操作

$("#test").mousemove(function() {
    //this指向 div元素 
});

4. mouseover 和 mouseout 事件

移入和移除事件

5. mouseenter与mouseleave事件

监听用户移动到内部的操作
mouseenter事件和mouseover的区别
关键点就是：冒泡的方式处理问题
mouseover为例：

<div class="aaron2"> <p>鼠标离开此区域触发mouseleave事件</p> </div>

如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:

1. p元素响应事件
2. div元素响应事件
   这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发
   所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

6. hover 事件

鼠标划入和划出触发不同事件，相当于mouseover+mouseout或者mouseenter+mouseleave

$(selector).hover(handlerIn, handlerOut)

7. focusin 和 focusout 事件

focusin: 获得焦点时动作
focusout: 失去焦点时动作

$("#test").focusin(function() {
    //this指向 div元素
});

8. blur 与 focus 事件

用于处理表单焦点的事件，类似于 focusin 事件与 focusout 事件
不同: focus()在元素本身产生，focusin()在元素包含的元素中产生

9. change 事件

<input>元素，<textarea>和<select>元素的值发生变化时通过change事件去监听这些改变的动作

$('.target1').change(function(e) {
    $("#result").html(e.target.value)
});

10. select 事件

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
select事件只能用于<input>元素与<textarea>元素。

$("input").select(function(e){
    alert(e.target.value)
})

11. submit事件

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为。
传统的方式是调用事件对象e.preventDefault()来处理， jQuery中可以直接在函数中最后结尾return false即可。

$("#target").submit(function(data) { 
   return false; //阻止默认行为，提交表单
});

键盘事件

1. keydown()与keyup()

键盘按下和松手时触发的动作

2. keypress 事件

keydown 时，每次获取的内容都是之前输入的，当前的额获取不了。
keypress事件与keydown和keyup的主要区别:

• 只能捕获单个字符，不能捕获组合键
• 无法响应系统功能键（如delete，backspace）
• 不区分小键盘和主键盘的数字字符

3. on 的多事件绑定

之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个on方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

多个事件绑定同一个函数

$("#elem").on("mouseover mouseout",function(){ });
// 通过空格分离，传递不同的事件名，可以同时绑定多个事件

多个事件绑定不同函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});
// 通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法

将数据传递到处理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 
}
$( "button" ).on( "click", {name: "Tom"}, greet );
// 可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的

on 的事件委托机制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

//给body绑定一个click事件
    //没有直接a元素绑定点击事件
    //通过委托机制，点击a元素的时候，事件触发
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })

事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数。

4. 卸载事件off()方法

通过.on()绑定的事件处理程序；通过off()方法移除该绑定。

绑定2个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁
$("elem").off()

jQuery 事件对象

1. jQuery 事件对象的作用

<ul>     
    <li class="even1"></li>     
    <li class="even2"></li>     
    <li class="even2"></li>    
     ......... 
 </ul> 

ul有N个子元素li(这里只写了3个)，如果我要响应每一个li的事件，那么常规的方法就是需要给所有的li都单独绑定一个事件监听，这样写法很符合逻辑，但是同时有显得繁琐。因为li都有一个共同的父元素，而且所有的事件都是一致的，这里我们可以采用要一个技巧来处理，也是常说的『事件委托』，绑定到父元素ul。触发li的时候把这个事件往上冒泡到ul上，因为ul上绑定事件响应所以就能够触发这个动作了。唯一的问题怎么才知道触发的li元素是哪个一个？

这里就引出了事件对象了:

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁

event.target
event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

//多事件绑定一
$("ul").on('click',function(e){
   alert('触发的元素是内容是: ' + e.target.textContent)
})

2. jQuery事件的属性和方法

event.type：获取事件的类型
event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
event.preventDefault() 方法：阻止默认行为
这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了。
event.stopPropagation() 方法：阻止事件冒泡
event.which：获取在鼠标单击时，单击的是鼠标的哪个键
event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3。
**event.currentTarget : 在事件冒泡过程中的当前DOM元素 **
冒泡前的当前触发事件的DOM对象, 等同于this.
this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

自定义事件

1. trigger 事件

根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。
trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数:

$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自触自定义时间")
 });
$('#elem').trigger('Aaron',['参数1','参数2'])

trigger触发浏览器事件与自定义事件区别？

• 自定义事件对象，是jQuery模拟原生实现的
• 自定义事件可以传递参数

<body>
        <h2>自定义事件trigger</h2>
        <div class="left">
            <div>
                <span></span>
                <span>0</span> 点击次数
            </div>
            <button>直接点击</button>
            <button>通过自定义点击</button>
        </div>
        <script type="text/javascript">
            //点击更新次数
            $("button:first").click(function(event, bottonName) {
                bottonName = bottonName || 'first';
                update($("span:first"), $("span:last"), bottonName);
            });

            //通过自定义事件调用，更新次数
            $("button:last").click(function() {
                $("button:first").trigger('click', 'last');
            });

            function update(first, last, bottonName) {
                first.text(bottonName);
                var n = parseInt(last.text(), 10);
                last.text(n + 1);
            }
        </script>
    </body>

2. triggerHandler 事件

尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替。

triggerHandler与trigger的用法是一样的，重点看不同之处：

• triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
• .trigger() 会影响所有与 jQuery 对象相匹配的元素，而.triggerHandler()仅影响第一个匹配到的元素
• 使用 .triggerHandler()触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
• 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

<h2>自定义事件triggerHandler</h2>
<div class="left">
    <div id="accident">
        <a>triggerHandler事件</a>
        <input type="text">
    </div>
    <button>事件冒泡,触发浏览器默认聚焦行为</button><br><br>
    <button>不会冒泡，不触发浏览器默认聚焦行为</button>
</div>
<script type="text/javascript">

    //给input绑定一个聚焦事件
    $("input").on("focus",function(event,title) {
        $(this).val(title)
    });

    $("#accident").on("click",function() {
        alert("trigger触发的事件会在 DOM 树中向上冒泡");
    });
    //trigger触发focus
    $("button:first").click(function() {
        $("a").trigger("click");
        $("input").trigger("focus");
    });

    //triggerHandler触发focus
    $("button:last").click(function() {
        $("a").triggerHandler("click");
        $("input").triggerHandler("focus","没有触发默认聚焦事件");
    });
</script>

第二章 动画篇

隐藏和显示

1. hide方法

让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法.hide()来达到这个效果。

$elem.hide()
提供参数
.hide( options )
这是一个动画设置的快捷方式,元素会执行200/600毫秒的动画后再隐藏
.hide("fast / slow")

$("#a2").hide({
    duration: 3000,
    complete: function() {
        alert('执行3000ms动画完毕')
    }
})

2. show方法

css中有display:none属性，同时也有display:block，所以jQuery同样提供了与hide相反的show。

$('elem').hide(3000).show(3000)

• show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置
• 如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式
• 如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度。

3. 隐藏切换toggle方法

切换显示或隐藏匹配元素

$('elem').toggle(3000);

4. 下拉动画slideDown

用滑动动画显示一个匹配元素

.slideDown( [duration ] [, complete ] )
// 持续时间（duration）是以毫秒为单位的，数值越大，动画越慢
// 字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。默认使用400 毫秒的延时。

$("ele").slideDown(1000, function() {
    //等待动画执行1秒后,执行别的动作....
});

5. 上卷动画slideUp

用法同 slideDown

6. slideToggle

slideToggle("fast")  // 200毫秒延迟
slideToggle("slow")   // 600毫秒延迟

淡入淡出效果

1. fdeOut 和 fadeIn

fadeOut(): 用于隐藏所有匹配的元素，并带有淡出的过渡动画效果.
fadeIn: 淡入效果

2. 淡入淡出切换fadeToggle

fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。

3. 淡入效果fadeTo

.fadeTo( duration, opacity ,callback)
duration:参数规定效果的时长.它可以取以下值:"slow","fast" 或毫秒
opacity :不透明度(介于0到1之间)
callback :函数完成后要执行的动作

4. toggle与slideToggle以及fadeToggle的比较

操作元素的显示和隐藏可以有几种方法。
例如：

• 改变样式display为none

• 设置位置高度为0

• 设置透明度为0
  toggle、sildeToggle以及fadeToggle的区别：

• toggle：切换显示与隐藏效果

• sildeToggle：切换上下拉卷滚效果

• fadeToggle：切换淡入淡出效果

当然细节上还是有更多的不同点:

toggle与slideToggle细节区别：

• toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
• slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法

• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
• 元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
• 元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。
• 注释：隐藏的元素不会被完全显示（不再影响页面的布局）

自定义动画

1. animate

精确的控制样式属性从而执行动画

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )
properties:一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的

特别注意单位，属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用

.animate({ left: 50,   width: '50px'   opacity: 'show',   fontSize: "10em", }, 500);

除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏

.animate({ width: "toggle" });

如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的

.animate({      left: '+=50px' }, "slow");

duration时间

动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。

easing动画运动的算法

jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件

complete回调
动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发、

.animate( properties, options )

options参数

• duration - 设置动画执行的时间
• easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
• step：规定每个动画的每一步完成之后要执行的函数
• progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
• complete：动画完成回调

其中最关键的一点就是：

如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

列出常用的方式：

$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

 <select id="animation">
        <option value="1">动画step动画</option>
        <option value="2">动画progress回调</option>
</select>
    <a></a>
    <input id="exec" type="button" value="执行动画">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //观察每一次动画的改变
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一个动画都会调用
                step: function(now, fx) {
                   $aaron.text('高度的改变值:'+now)
                }
            })
        } else if (v == "2") {
            //观察每一次进度的变化
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一步动画完成后调用的一个函数，
                //无论动画属性有多少，每个动画元素都执行单独的函数
                progress: function(now, fx) {
                   $aaron.text('进度:'+arguments[1])
                    // var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
                    // alert(data)
                }
            })
        } 
    });

2. 停止动画stop

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

stop还有几个可选的参数，简单来说可以这3种情况

• .stop(); 停止当前动画，点击在暂停处继续开始
• .stop(true);如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
• .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)

1. stop()：只会停止第一个动画，第二个第三个继续
2. stop(true)：停止第一个、第二个和第三个动画
3. stop(true ture)：停止动画，直接跳到第一个动画的最终状态

jQuery 核心

1. each方法的应用

语法

jQuery.each(array, callback )
jQuery.each( object, callback )

第一个参数传递的就是一个对象或者数组，第二个是回调函数

$.each(["Aaron", "Hello"], function(index, value) { 
    //index是索引,也就是数组的索引 
    //value就是数组中的值了
 });

jQuery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。

$.each(["Aaron", "Hello"], function(index, value) {
     return false; //停止迭代 
 });

jQuery方法可以很方便的遍历一个数据，不需要考虑这个数据是对象还是数组。

$("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        $aaron.empty();
        if (v == "1") {

            // 遍历数组元素
            $.each(['Aaron', 'Hello','aaa','bbb'], function(i, item) {
                $aaron.append("索引=" + i + "; 元素=" + item);
            });
        } else if (v == "2") {
            // 遍历对象属性
            $.each({
                name: "张三",
                age: 18
            }, function(property, value) {
                $aaron.append("属性名=" + property + "; 属性值=" + value);
            });
        } 
    }

2. 查找数组中的索引 inArray

jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
语法：

jQuery.inArray( value, array ,[ fromIndex ] ) 

用法非常简单，传递一个检测的目标值，然后传递原始的数组，可以通过fromIndex规定查找的起始值，默认数组是0开始

例如：在数组中查找值是5的索引

$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4

注意：

如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断

3. 去空格神器trim方法

jQuery.trim()函数用于去除字符串两端的空白字符

4. DOM元素的获取get方法

jQuery是一个合集对象，如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到

以下有3个a元素结构：

<a>1</a>
<a>2</a> 
<a>3</a>

通过jQuery获取所有的a元素合集$("a")，如果想进一步在合集中找到第二2个dom元素单独处理，可以通过get方法

语法：

.get( [index ] )

注意2点

1. get方法是获取的dom对象，也就是通过document.getElementById获取的对象
2. get方法是从0开始索引

所以第二个a元素的查找：$(a).get(1)

负索引值参数

get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1

同样是找到第二元素，可以传递$(a).get(-2)

5. DOM元素的获取index方法

.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。

语法：参数接受一个jQuery或者dom对象作为查找的条件

.index()  // 返回值时jQuery对象中第一个元素相对于它同辈元素的位置
.index( selector )  //  返回值时原生元素相对于选择器匹配的位置
.index( element ) // 返回值时传入的元素相对于原生集合的位置。如果找不到匹配的元素，则 .index() 返回 -1

<ul>    
     <a></a>     
     <li id="test1">1</li>     
     <li id="test2">2</li>     
     <li id="test3">3</li> 
 </ul>

$("li").index()没有传递参数，反正的结果是1，返回同辈的排列循序，第一个li之前有a元素,同辈元素是a开始为0，所以li的开始索引是1

如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理

$("li").index(document.getElementById("test2")) //结果：1 
$("li").index($("#test2")) //结果:1