jquery--事件[1]_jquery.onconfilct-优快云博客

本文介绍了$(document).ready()和window.onload的区别，探讨了在一个页面中执行多个脚本的方法及技巧，展示了如何优化事件处理程序并利用事件上下文提高代码效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一代码执行的实际选择

$(document).ready()和window.onload的区别
页面加载执行任务方式：

 1. $(document).ready()
 2. window.onload

区别在于：

$(document).ready()用于加载完dom文档，而window.onload是用于加载所有的资源，包括图片之类的.
两者在加载不多的资源时没有什么区别。但是资源一多，onload显然有点逊色了。但这两者都可以在同一个文件内引用

注意一点
使用$(document).ready()时，图片的width，height不一定有效，因为资源还没加载完。

二基于一个页面执行多个脚本

在第一种情况下，我们定义了一个函数：

function do(){}

可以在html里面调用：

<body onload="do();">

也可以在js里面调用:

window.onload=do;

比较两者：第二种方式能使行为更加从标记中分离出来。

在第二种情况下，我们定义了多个函数：

function doing(){}

我们选择window.onload执行:

window.onload=doing;

会发生什么呢？
第二次指定的函数doing会取代第一个函数do。
why？
因为.onload属性一次只能保存对一个函数的引用，而do函数无效
怎么解决？
调用$(document).ready()函数，因为每次调用它会向内部的行为队列中添加一个新函数，当页面加载完成之后，所有函数都会被执行，而且会按注册顺序依次执行。

三 .ready()的简写

$(document).ready(function(){});

简写形式:

$(function(){});

四向.ready()回调函数中传入函数

在很多实际开发中同一个页面中使用多个javascript库.因为很多库也使用$，一次要一种方式来避免名称冲突。
jQuery提供了jQuery.onConfilct()方法的一般模式:

<script src="prototype.js"></script>
<script src="jQuery.js"></script>
<script>
jQuery.noConfilct();
</script>

这里jQuery.noConfilct();使jQuery取得jQuery函数的使用权，然后调用.noConfilct()让出jQuery函数的使用权,以便将控制权交还给最先包含的库(Prototype)。
但是，在需要使用jQuery方法时，必须记住要用jquery而不是$来调用
在这种情况下，还有一个在.ready()方法中使用$的技巧，传递给他的回调函数可以解锁一个参数—-jQuery对象本身。

jQuery(document).ready(function($){});
或者
jQuery(function($){});

五处理简单的事件

希望通过在触发某个事件后执行某种行为，我们需要引入.on()方法，次方法可以指定任何DOM事件，并为该事件添加一种行为。

$(docuemnt).ready(function(){
  $('div').on('click',function(){
  $('body').addClass('act');
})
});

多次调用.on（）也没用任何问题。
但是不是完成的最优雅或者最有效的方式。

六利用事件处理程序的上下文

当触发任何事件处理程序时，关键字this引用的都是携带相应行为的dom元素。通过在事件处理程序中使用$(this),可以为相应的元素创建jQuery对象，然后就如同使用css选择符找到该元素处理。
高效代码:

$(document).ready(function(){
  $('#swit')
  .addClass('select')
  .on('click',function(){
  $('body').removeClass('narrow').removeClass('large');

  });
$('switcher-large').on('click',function(){
$('body').addClass('narrow').removeClass('large');
});
$('#switcher button').on('click',function(){

$('#switcher button').removeClass('select');
$(this).addClass('select');
})

})

这一步优化了3中jQuery特性。

在通过对.on()的一次调用为每个绑定的单击事件处理程序时，隐式迭代机制再次发挥了作用。
行为队列机制让我们在同一个单击事件上绑定了两个函数，而且第二个函数不会覆盖第一个函数。
使用jQuery的连缀能力将每次添加和移出类的操作压缩到了一行代码中

使用事件上下文重构

$(document).ready(function(){
  $('#swit')
  .addClass('select')
  .on('click',function(){
  $('body').removeClass();

  });
$('#switcher-large').on('click',function(){
$('body').removeClass().addClass('narrow');
});
$('#switcher button').on('click',function(){

$('#switcher button').removeClass('select');
$(this).addClass('select');
})

})

为了适应更通用的移出类的操作，做了一些改变——-先执行.removeClass(),以便它不会撤销几乎同时执行的.addClass()。
但是在里面仍然有执行相同的代码。

$(document).ready(function(){
  $('#swit')
  .addClass('select')
  .on('click',function(){
  $('body').removeClass();

  });
$('#switcher-large').on('click',function(){
$('body').addClass('narrow');
});
$('#switcher button').on('click',function(){
$(this).addClass('select');
})

})

根据自己的实际代码，还可以优化：

$(document).ready(function(){
  $('#swit')
  .addClass('select')
  .on('click',function(){
  $('body').removeClass();

  });
$('#switcher button').on('click',function(){
var bodyclss = this.id.split('-')[1];
$('body').removeClass().addClass(bodyclass);
$('#switcher button').removeClass('selected');
$(this).addClass('select');
});


})