网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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

1.onload和ready的区别

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

  

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

   在实际应用中,我们都很少直接去使用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 对象有很多可用的属性

jQuery详细教程一(个人整理)
5.冒泡和默认行为的一些方法

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

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 代表是否直接将正在执行的动画跳转到末状态。



分享标题:jQuery详细教程一(个人整理)
URL标题:http://bjjierui.cn/article/ipgoeo.html

其他资讯