`

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

 
阅读更多

8570人阅读评论(3)收藏举报

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(document).ready(function($) { });的几种表示方法

    `jQuery(document).ready()`函数是jQuery中的一个重要概念,它确保了在执行任何JavaScript代码之前,DOM已经完全加载和解析完成。这个特性使得开发者可以在不担心元素未定义的情况下操作DOM。以下是几种常见的表示...

    Jquery中$与$.fn的区别实例.zip

    在jQuery库中,`$`和`$.fn`都是核心组成部分,但它们有着不同的用途和功能。...通过实践和探索`Jquery中$与$.fn的区别实例`中的示例,你将能深入理解这两个核心组件的用法和它们在实际项目中的应用。

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

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

    Jquery.Messager弹出消息插件

    $(document).ready(function() { $.messager.defaults = { showType: 'slide', // 动画效果,如淡入、滑动等 timeout: 3000, // 消息显示后自动关闭的毫秒数 draggable: true // 是否可拖动 }; }); ``` 2. ...

    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-1.12.4-jquery.min.js.zip

    2. **事件处理**:jQuery 的事件处理比原生JavaScript更加直观,例如`$(document).ready(function() { ... })`用于页面加载完成后执行代码,`$("button").click(function() { ... })`用于监听按钮点击事件。 3. **...

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

    在学习jQuery框架时,了解$(document).ready()函数的作用至关重要。这一函数是管理页面加载顺序和时机的核心部分,它确保了页面的DOM元素完全加载并可被脚本操作之后,才执行包裹在其中的代码。 ### 知识点:jQuery...

    jquery.common通用方法

    $(document).ready(function() { $.common.showAlert('Hello, jQuery.common!'); }); ``` 四、自定义jQuery.common 每个项目的具体需求可能会有所不同,因此,开发者可以根据自己的项目特点定制jQuery.common。...

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

    本文着重讲解了在JQuery中使用$(document).ready()函数的详细方法和它的重要性。 在JQuery中,$符号是JQuery库的简写和引用。例如,$()函数等同于jQuery()函数。它为开发者提供了一种方便的方式来选择和操作文档中...

    jquery.marquee.js官方下载

    $(document).ready(function() { $('#yourElement').marquee(); }); ``` 其中,`#yourElement`是你想要添加滚动效果的HTML元素的ID。 在实际应用中,我们还可以通过设置参数来定制滚动效果,例如: ```...

    jquery.paginate.js

    $(document).ready(function() { $('#pagination').paginate({ items: 10, // 每页显示的条目数量 perPage: 5, // 每页显示的数量 display: 5, // 显示的页码按钮数量 }); }); ``` 3. 配置参数:`items`表示总...

    jquery.processing.plugin.js以及详细演示

    $(document).ready(function() { $('#mySketch').processing({ sketch: function(p) { // 这里写Processing.js的代码 } }); }); ``` 4. **添加交互性**:jQuery Processing Plugin.js允许你利用jQuery的强大...

    Jquery.jqprint-0.3.js

    $(document).ready(function(){ $('#printButton').click(function(){ $('.printableArea').jqprint(); }); }); ``` 在这个例子中,当用户点击ID为`printButton`的按钮时,类为`printableArea`的元素将被打印。`...

    jquery的$(document).ready()和onload的加载顺序

    3. 使用jQuery的`$.holdReady(true)`和`$.holdReady(false)`组合,来控制`$(document).ready`的执行时机。 4. 如果可能,避免在frame中加载页面,或者确保frame内页面的资源都能正确访问。 理解`$(document).ready...

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

    3. 如果可能,尝试将`$(document).ready()`中的代码移至`window.onload`事件中,看看是否能正常执行,以确定问题是否与DOM加载有关。 4. 如果有多个库在使用`$`,考虑使用`jQuery.noConflict()`来避免冲突。 通过...

    jquery中alert实现代码

    $(document).ready(function() { $('#custom-alert-btn').click(function() { $.alerts({ title: '警告', text: '这是一个使用jQuery Alerts插件的自定义警告信息!', confirmButton: '确定', cancelButton: ...

    jquery.address.js

    在jQuery的$(document).ready()函数内初始化address插件: ```javascript $.address.init(function(event) { // event对象包含了当前的URL信息 console.log(event.path); }); ``` 3. 绑定事件处理: 可以使用`....

    jquery.formautofill 表单填充控件

    $(document).ready(function() { $('#yourForm').formautofill({ data: { 'inputName1': 'value1', 'inputName2': 'value2', // 更多字段... } }); }); ``` 在这个例子中,`#yourForm`是表单的选择器,`data...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    - `$(document).ready(function() {...})`:页面加载完成时执行的函数。 - `$(element).on('event', function() {...})`:动态绑定事件,支持多种事件类型。 5. **动画效果** - `$(element).fadeIn()`/`.fadeOut...

    jquery.blockUI.js 使用示例

    $(document).ready(function() { $.blockUI(); }); ``` 这将阻塞整个页面,显示默认的灰色遮罩效果。要解除阻塞,只需调用`$.unblockUI()`: ```javascript $(document).ready(function() { $.blockUI(); ...

Global site tag (gtag.js) - Google Analytics