`
frank1998819
  • 浏览: 731317 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类

jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})()

 
阅读更多

原作者:http://blog.csdn.net/szwangdf/article/details/43153077

 

1、(function($) {…})(jQuery);

1)、原理:

这实际上是匿名函数,如下:

function(arg){…}
这就定义了一个匿名函数,参数为arg

而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:
(function(arg){…})(param)
这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数

而(function($){…})(jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery
相当于funtion output(s){…};output(jQuery);或者var fn=function(s){…};fn(jQuery);

2)、作用(非常有用):

这种写法的最大好处是形成闭包。在(function($) {…})(jQuery)在内部定义的函数和变量只能在此范围内有效。

形成是否函数函数、私有变量的概念。比如:

 

[javascript] view plaincopyprint?
  1. var i=3;
  2. function init(){
  3. alert("外层init:"+i);
  4. }
  5. (function($) {
  6. var i=2;
  7. function init(){
  8. alert("内层init:"+i);
  9. }
  10. init();
  11. })(jQuery);
  12. init();
var i=3;
function init(){
    alert("外层init:"+i);
}
(function($) {
	var i=2;
	function init(){
	    alert("内层init:"+i);
	}

	init();
})(jQuery);
init();


执行结果:

内层init:2

外层init:3

 

2、$(function(){…}); jQuery(function($) {…}); $(document).ready(function(){…})

这三个的作用是一样的,本人比较需要用第一种、书写简单。

文档载入完成后执行的函数。

###################################################################

jQuery(function($){ }) 与 $(document).ready(function(){}) 有什么区别??

没区别都是页面加载运行

要说真正的区别 就是 jQuery(function($){ }) 这样写可以防止和其他的库产生冲突

因为$ 在其他的库中很多运用到

分享到:
评论

相关推荐

    jQuery(document).ready(function($) { });的几种表示方法

    在写jquery的时候,因为平时用sublime text快捷键生成jQuery(document).ready(function($) { });,所以忘记了其他的几种表示方法,今天花了几分钟特意记录了一下。

    Jquery中$(document).ready(function(){ })函数的使用详解

    jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧,就是它了)的操作. 比如jquery写法:$(“div p”); // (1)$(“div.container”); // ...

    jquery.table2excel.js

    $(document).ready(function() { //导出excel $("#output").click(function(){ var myDate = new Date(); $("#example").table2excel({ exclude: ".noExl", name: "Excel Document Name.xlsx", filename: ...

    jQuery之$(document).ready()使用介绍

    学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载,并且在页面内容加载...

    jquery操作菜单

    $(document).ready(function(){ $(".menu ul li ul").hide(); $(".menu>ul>li>a").on('click',function(){ $(".menu>ul>li>a").css('background-image',"url('../image/collapsed.gif')"); $(".menu ul li ul...

    jQuery回到顶部插件jQueryGoUp

    $(document).ready(function () { $.goup({ trigger: 100, bottomOffset: 20, //距底部偏移量 locationOffset: 30, //距右部偏移量 title: '返回顶部', titleAsText: true //是否显示title }); });

    jQuery使用$.get()方法从服务器文件载入数据实例

    本文实例讲述了jQuery使用$.get()方法从服务器文件载入数据。分享给大家供大家参考。具体如下: <!DOCTYPE html> <html> <head> [removed] [removed] [removed] $(document).ready(function(){ $...

    jQuery 的 ready()的纯js替代方法

    ready 方法是 jQuery 实现的在 html 页面在 DOM...$(document).ready(function() { // 在 .ready() 被触发时执行. }); 在 jQuery 3.0 中 ready() 的变化 在 jQuery 3.0 发布之前, 有以下几种 ready 方法的使用方式:

    Jquery中"$(document).ready(function(){ })"函数的使用详解

    本篇文章主要是对Jquery中"$(document).ready(function(){ })"函数的使用进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    jQuery-ui Demo 官方UI插件

    $(document).ready(function(){ $(".block").draggable(); }); draggable(options)可以跟很多选项 选项说明:http://docs.jquery.com/UI/Draggables/draggable#options 选项实例:...

    jquery.ui.datepicker.js

    $(document).ready(function() { var yearFrom=new Date().getYear()-60+1900; var yearTo=new Date().getYear()-18+1900; $('#dateinput').datepicker({ dateFormat: 'yy-mm-dd', buttonImage: 'calendar...

    jquery中的$(document).ready()与[removed]的区别

    所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就...在jQuery中让这一实现变得可行: 代码如下: //jQuery 使用动态创建的$(document).ready(function)方法 $(documen

    Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready

    还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支 //document ready简便写法$(function(){…}) } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); }  所以$(fn)=...

    JQuery 引发两次$(document.ready)事件

    页面大概是这样的,一个Partial View,而这个View包含了一小段绑定Search的Javascript,并且用... 做了实验,代码如下: 代码 代码如下: [removed] $(document).ready(function() { $(“#a1”).appendTo($(“#a2”));

    jquery中的$(document).ready()使用小结

    $(document).ready(function(){…. })这个函数是用来取代页面中的[removed]; document.ready()和传统的方法<body onload=”load()”> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和...

    jQuery多级无限级导航下拉菜单代码.zip

    $(document).ready(function() { $("ul.nav li").hover(function(){ $(this).addClass("on"); }, function(){ $(this).removeClass("on"); }) }); $(document).ready(function() { $("ul....

    $(document).ready(function() {})不执行初始化脚本

    今天发现一个页面始终不执行初始化...$(document).ready(function() { alert(1); }); [removed] 后来发现问题仅仅是因为引用JQuery的时候闭合写法问题,只需要修改闭合方法,如下所示: [removed] 改为 <

    jquery消息插件

    $(document).ready(function(){ $.messager.show(0,'送你一个Jquery Messager消息弹出插件!'); $("#showMessager300x200").click(function(){ $.messager.lays(300, 200); $.messager.show(0, '300x200的消息...

    比Jquery的document.ready更快的方法

    个是上次在博客园看到的一篇文章,经测试,确实比jquery的$(document).ready(function(){....})更快,并且在ie和火狐等主流浏览器上都没问题

    jquery.cycle.all.js 幻灯片轮换

    $(document).ready(function() { $('#goods').cycle({ timeout: 2000, speed: 200, pause: true }); });

Global site tag (gtag.js) - Google Analytics