jQuery详细教程一(个人整理)

1.onload和ready的区别

成都创新互联公司专注于丛台企业网站建设,响应式网站开发,商城开发。丛台网站建设公司,为丛台等地区提供建站服务。全流程按需设计，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

   在实际应用中，我们都很少直接去使用window.onload，因为他需要等待图片之类的大型元素加载完毕后才能执行JS代码。所以，最头疼的就是网速较慢的情况下，页面已经全面展开，图片还在缓慢加载，这时页面上任何的JS交互功能全部处在假死状态。并且只能执行单次在多次开发和团队开发中会带来困难。

2.将$符的所有权剔除

jQuery.noConflict();

3.bind(),live(),delegate(),on()的区别

1) bind()

.bind()注册的事件直接指向相对应的DOM元素

优点:

跨浏览器

非常方便和快捷地绑定事件

简单的实现方法（.click() .hover() ,etc…）让它用起来很方便

对于简单的ID选择器来说，使用.bind()不仅方便，而且当触发这个事件的时候能够即时响应。

缺点:

这个方法会附加相同的处理程序到每一个匹配到的元素上

对于动态添加的属于匹配到的元素，不会被触发事件的

性能问题，对于处理大量的匹配元素的时候

如果在页面加载前要处理添加事件的话，会影响加载效率的

2) live()

.live()方法使用的是事件委托的概念来执行所谓的“神奇方法”。

优点:

相对于.bind()的循环注册很多次事件处理程序来说，.live()只注册一次事件处理程序

从.bind()更新到.live()的方法对程序更改很少，只需要替换“bind”为”live”

对于动态添加的属于匹配到的元素，也能够“神奇”的执行处理程序

在document元素没有全部加载完之前都能够几乎不花时间地绑定并触发事件

缺点:

此方法在jQuery1.7的时候已经废除，你应该逐步从你的代码中替换掉该方法

链接不能够正常的支持这个方法

这个方法被抛弃是因为它只能够绑定事件处理程序到document上

event.stopPropagation()不再有效了，因为事件已经委托到了document上了

由于所有的选择器和事件信息都是附加到了document上的，所以一个确定的事件要触发，必须通过大量的存储信息来匹配到

由于事件都是委托到了document上的，所以如果DOM太深的话，会影响到性能的

3) delegate()

.delegate()方法的行为有点类似.live()。但是不是把选择器和事件的信息附加到了document上，而是可以自行选择它要附加的DOM元素，这个技术可以让事件的委托正常工作优点

优点:

可以自由选择附加的选择器和事件信息的位置

链接也可以有效的支持了

jQuery仍然需要循环访问选择器和事件数据来确定匹配，但是因为能够选择这些信息附加的位置，所以通过匹配的量小很多了

由于这种技术使用了事件委托，所以它能很好的动态处理添加到DOM元素

如果你委托事件到了document上，你也可以在document全部准备完之前绑定和调用

缺点:

方法从.bind()更改到.delegate()比较麻烦

如果把选择器和事件数据附加到了document上，仍然需要很多的匹配信息，但是相对于.live()的存储量要小很多了

4) on()

优点:

为各种事件绑定方法带来了统一性

简化了jQuery代码库，并删除一个界别的重定向，因为通过调用这个方法实现了 .bind() .live() 和 .delegate()

仍然提供了好用的.delegate()方法，但是也仍然对.bind()方法提供了支持

缺点:

因为调用这个方法的各个形式，会带来一些混乱

总结

使用.bind()方法是很浪费资源的，因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序

建议停止使用.live()方法，因为它已经被弃用了，由于他有很多的问题

.delegate()方法“很划算”用来处理性能和响应动态添加元素的时候

新的.on()方法主要是可以实现.bind() .live() 甚至 .delegate()的功能

建议使用.on()方法，如果你的项目使用了1.7+的jQuery的话

4.event 对象有很多可用的属性

5.冒泡和默认行为的一些方法

6.模拟事件

方法一,$('.box').click(function(){console.log(111)}).trigger('click');使用trigger()可以在打开页面的时候就模拟点击事件

方法二就是$('.box').click(function(){console.log(111)}).click();直接使用click()模拟点击事件,当然不局限点击事件,jQ提供了基本上所有事件的模拟事件:

blur focusin mousedown resize change focusout mousenter scroll click keydown mouseleave select dblclick keypress mousemove submit error keyup mouseout unload focus load mouseover

.trigger()和.triggerHandler()的区别

1..triggerHandler()方法并不会触发事件的默认行为，而.trigger()会

$('form').trigger('submit'); //模拟用户执行提交，并跳转到执行页面

$('form').triggerHandler('submit'); //模拟用户执行提交，并阻止的默认行为

如果我们希望使用.trigger()来模拟用户提交，并且阻止事件的默认行为，则需要这么写：

$('form').submit(function (e) {

    e.preventDefault(); //阻止默认行为

}).trigger('submit');

2..triggerHandler()方法只会影响第一个匹配到的元素，而.trigger()会影响所有。

3..triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined；而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。

alert($('input').click(function () {

    return 123;

}).triggerHandler('click')); //返回 123，没有 return 返回

4..trigger()在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是jQuery 扩展于 DOM 的机制，并非 DOM 特性。而.triggerHandler()不会冒泡。

$('div').bind('myEvent',function(){

    alert('自定义事件' + index);

    index++;

});

$('.div3').trigger("myEvent");

7.命名空间

有时，我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦，这个时候，可以使用事件的命名空间解决。

$('input').bind('click.abc', function () {

    alert('abc');

});

$('input').bind('click.xyz', function () {

        alert('xyz');

});

$('input').unbind('click.abc'); //移除 click 实践中命名空间为 abc 的

注意：也可以直接使用('.abc')，这样的话，可以移除相同命名空间的不同事件。对于模

拟操作.trigger()和.triggerHandler()，用法也是一样的。

    $('input').trigger('click.abc');

8.jQuery 提供了一组改变元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顾名滑动、卷动

思义，向上收缩(卷动)和向下展开(滑动)。

$('.down').click(function () {

        $('#box').slideDown();

});

$('.up').click(function () {

        $('#box').slideUp();

});

$('.toggle').click(function () {

        $('#box').slideToggle();

});

注意：滑动、卷动效果和显示、隐藏效果一样，具有相同的参数。

9.三．淡入、淡出

$('.in').click(function () {

        $('#box').fadeIn('slow');

});

$('.out').click(function () {

        $('#box').fadeOut('slow');

});

$('.toggle').click(function () {

        $('#box').fadeToggle();

});

上面三个透明度方法只能是从 0 到 100，或者从 100 到 0，如果我们想设置指定值就没

有办法了。而 jQuery 为了解决这个问题提供了.fadeTo()方法。

$('.toggle').click(function () {

        $('#box').fadeTo('slow', 0.33); //0.33 表示值为 33

});

注意：淡入、淡出效果和显示、隐藏效果一样，具有相同的参数。对于.fadeTo()方法，

如果本身透明度大于指定值，会淡出，否则相反。

10.自定义动画

，jQuery 提供了一个.animate()方法来创建我们的自定$('.animate').click(function () {义动画，满足更多复杂多变的要求。

$('#box').animate({

                  'width' : '300px',

                'height' : '200px',

                'fontSize' : '50px',

            'opacity' : 0.5

        });

注意：一个 CSS 变化就是一个动画效果，上面的例子中，已经有四个 CSS 变化，已经实现了多重动画同步运动的效果。

很多时候需要停止正在运行中的动画，jQuery 为此提供了一个.stop()方法。

它有两个可选参数：.stop(clearQueue, gotoEnd)；clearQueue 传递一个布尔值，代表是否清空未执行完的动画列队，gotoEnd 代表是否直接将正在执行的动画跳转到末状态。