!function ($) { $(function(){ }) }(window.jQuery) 的作用是什么?

2023-11-29

我正在使用 twitter bootstrap 创建一个网站,并尝试初始化工具提示。除了添加以下内容之外:


 $("[rel=tooltip]").tooltip()    
in application.js , unless I retain, the following piece of code used in bootstrap docs, my tooltips don't initialize.


!function ($) {

  $(function(){  

  })

}(window.jQuery)
  

上面的代码做了什么?


让我们通过分解代码来解释

function () {
}()

或者经常写成

(function () {
})()

Is a self-invoking anonymous函数,也称为立即调用函数表达式 (IIFE)。它立即内联执行匿名函数。

阅读更多相关信息,请访问解释封装的匿名函数语法.

匿名函数是一个强大的功能,并且具有范围界定(“变量名称间距”)等优点,请参阅javascript 中自执行函数的目的是什么?.


现在他们正在使用

function ($) {

}(window.jQuery)

让我们跳过!目前。

所以他们路过,window.jQuery进入该函数作为参数并接受为$.

这是做什么的$的别名window.jQuery(原始 jQuery 对象),因此确保$将始终参考jQuery object里面closure,无论其他图书馆是否采用了该方法($) 外部。

因此,您在该闭包内编写的代码使用$永远会起作用。

另一个好处是$作为匿名函数中的参数,这使得它更接近于scope chain因此 JS 解释器花费更少的时间来找到$闭包内的对象比我们使用全局的对象要多$.


$(function(){  

})

您可能已经知道,它是 jQuery 的文档就绪块,它确保此函数内的代码将在以下情况下运行:dom is ready,因此所有event binding's将正常工作。

阅读更多内容http://api.jquery.com/ready/

那是什么!确实已经得到了很好的解释here or at 函数前面的感叹号有什么作用?

简而言之:

为了展示的好处!,让我们考虑一个案例,

(function() {
    alert('first');
}())


(function() {
    alert('second');
}())

如果将上面的代码粘贴到console,您将收到两个警报,但随后您将收到此错误

TypeError: undefined is not a function

为什么会出现这种情况?我们来模拟一下JS引擎是如何执行上面的代码块的。它执行这个匿名函数function() {alert('first');}()显示警报,因为它没有返回任何内容undefined返回内部()。第二个函数也会发生同样的情况。所以在执行这个块之后,它最终会得到类似的东西

(undefined)(undefined)

因为它的语法就像self-invoking anonymous函数,它尝试调用该函数,但第一个,(undefined)不是一个函数。所以你得到undefined is not a function error. !修复此类错误。会发生什么!。我引用了上面答案链接中的内容。

当您使用 ! 时,该函数将成为一元的单个操作数 (逻辑)NOT 运算符。

这强制将函数计算为表达式,其中 允许立即内联调用它。

这解决了上面的问题,我们可以使用重写上面的块! like

!(function() {
    alert('first');
}())


!(function() {
    alert('second');
}())

对于您的情况,您可以简单地将工具提示代码放入文档就绪块中,如下所示

$(function(){  
    $("[rel=tooltip]").tooltip();  
});

它会工作得很好。

如果你只是使用$("[rel=tooltip]").tooltip()没有任何doc ready block,那么当这段代码运行时,有可能没有任何元素rel=tooltip还没有在 DOM 中。所以$("[rel=tooltip]")将返回一个空集并且tooltip行不通的。

一个示例标记,如果没有它就无法工作doc ready block,

.
.
.
<script type="text/javascript">
    $("[rel=tooltip]").tooltip();
</script>
.
.
.
.
<a href="#" rel="tooltip">Something</a>
<a href="#" rel="tooltip">Something</a>
<a href="#" rel="tooltip">Something</a>

作为浏览器,顺序解释标记,它一遇到它就会执行js代码。当它执行这里的JS块时,它还没有解析a rel="tooltip"标签还没有出现,因为它出现在 JS 块之后,所以它们当时不在 DOM 中。

所以对于上面的情况$("[rel=tooltip]")为空,因此工具提示不起作用。因此将所有 JS 代码放入其中始终是安全的document ready块状

$(function){
    // put all your JS code here
});

希望这一切现在对你来说有意义。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

!function ($) { $(function(){ }) }(window.jQuery) 的作用是什么? 的相关文章

  • 如何在返回的 AJAX 调用上使用 django 模板标签?

    我有一个简单的 AJAX 脚本 它在名为的搜索字段中获取输入的字符串AJAXBox并调用一个视图函数 该函数使用过滤器查询数据库并返回与输入参数匹配的所有 User 对象的查询集 当我使用 django 模板标签迭代查询集时 它不起作用 我
  • HTTP请求的内容长度>正文大小

    我正在管理一个网站 该网站过去几个月在使用 MVC 3 0 ASP net 构建的 IIS 7 5 上运行良好 当我们的 AJAX POST 请求 通过 jQuery 触发 因发布的 JSON 被截断而失败时 我们时不时地会遇到一个问题 到
  • 扩展html表格突出显示行和列并使当前单元格具有不同的颜色

    我找到了用鼠标悬停时突出显示行和列的示例 https stackoverflow com a 28312853 139698 https stackoverflow com a 28312853 139698 如何使鼠标悬停的一个单元格变为
  • 交换两个文本框的值

    我有两个文本框值 var pickup txt pickup var destination txt destination 我想交换这两个值 如下所示 pickup val destination val destination val
  • 带有延迟的 jQuery 切换类只能运行一次

    当涉及到 jQuery 匿名函数和延迟时 我显然错过了一些基本的东西 下面的代码每次页面加载只能运行一次 它将添加该类 然后在 1 秒后将其删除 如果我再次单击 它将添加该类 但在页面持续时间内永远不会删除该类 除非我重新加载页面 var
  • jQuery 选择首屏上方的图像

    我目前正在使用 jQuery 延迟加载插件来加载图像 我正在使用 javascript 来替换 src 和 data original 属性 这会导致负载上出现轻微闪烁 我想知道是否有一种方法可以使用 jquery 仅选择折叠下方或折叠上方
  • 页面中的所有 css 类都使用 js

    我希望能够获取页面上所有CSS文件的所有类名 是否存在任何现有的可能性 或者我必须自己阅读并解析它 浏览器没有api吗 也许是重复的请求 如何使用 JavaScript 读取 CSS 规则值 https stackoverflow com
  • jQuery .slideRight 效果

    我需要一个 div 标签在屏幕右侧滑出 如何使用 jQuery 获得这种效果 我一直在这里寻找 http api jquery com category effects sliding http api jquery com categor
  • 通过 jquery 设置 type="file" 的值[重复]

    这个问题在这里已经有答案了 Note 下面的答案反映了 2009 年旧版浏览器的状态 现在 您实际上可以在 2017 年使用 JavaScript 动态 编程地设置文件输入元素的值 有关详细信息以及演示 请参阅此问题中的答案 如何以编程方式
  • 根据推荐链接自动选择联系表单 7 中的字段

    我一直在使用 Aurovrata 的这个答案 WordPress联系表单7根据url动态选择下拉字段 https stackoverflow com questions 63251548 wordpress contact form 7 d
  • Chrome 中的 jQuery 动画问题

    我使用 jQuery 1 3 2 和 jQuery 颜色插件为 jQuery 中的 a 元素设置动画 我同时对 颜色 和 背景颜色 属性进行动画处理 在 IE8 和 FF 中它运行得很好 Chrome 对鼠标悬停颜色进行动画处理 然后停止
  • 当来源为 http 且目标 url 为 https 时,如何在本地网络中发出 POST 请求?

    我需要从 POS 销售点 http 向支付终端 https 发出 POST 请求 它们连接在我的本地网络中 当我向邮递员发出请求时 一切正常 但每当我从 POS 发出请求时 我都会收到错误 POSThttps 我的IP地址 8443 nex
  • Google 登录回调 - 获取姓名和电子邮件

    我试图在登录时将基本的谷歌帐户信息 姓名 电子邮件 ID 捕获到数据库中 我通过为他们的个人资料信息设置变量并通过 AJAX 更新数据库来做到这一点 参见下面示例中的变量 if authResult access token The use
  • 当多个元素具有相同的 ID 值时,jQuery 如何工作?

    我从 Google 的 AdWords 网站获取数据 该网站有多个具有相同元素的元素id 您能否解释一下为什么以下 3 个查询没有得到相同的答案 2 现场演示 http jsfiddle net P2j3f 1 HTML div span
  • 隐藏行时更新奇数/偶数行颜色

    我在一页上有几个表格和一个复选框 用于根据其中一个单元格的内容显示 隐藏行 虽然所有行都是可见的 但一切都很完美 并且行颜色根据需要交替 当我隐藏行时 交替的行颜色不再正确 显然 如何轻松更新类以在选中复选框时保持交替行颜色 然后在取消选中
  • 渲染后更改 Fullcalendar 事件源

    我一直在使用 FullCalendar v1 5 3 来替代 MS SharePoint 我正在尝试重新渲染日历事件的源 例如 当页面默认加载时 这是 ajax 调用 日历 事件 feedTasks start 1338094800 end
  • 将对象传递给jquery中的回调函数

    我最近正在开发小型聊天模块 该模块需要不断检查服务器是否有新消息 我正在向服务器发送 ajax 请求 服务器将保持连接 直到找到新消息 长轮询 Code var chatController function other variable
  • 我可以使用 javascript 生成 JSON 文件吗?

    我想在域 example1 com 上创建一个页面 并获取 解析另一个域 example2 com json json 上的 JSON 文件 可以使用 javascript 生成 json 文件 在 example2 com 上 吗 我认为
  • Jquery 对话框部分视图服务器端验证“保存”按钮单击

    我有一个显示数据的表格 表格的每一行都有编辑按钮 单击编辑按钮时 将出现一个 jquery 对话框 其中包含用于编辑用户信息的表单以及保存和取消按钮 表单只不过是部分视图 按钮是部分视图的一部分
  • 尝试将 jquery 加载到 tampermonkey 脚本中

    我正在编写一个脚本 在加载登录页面时登录到我的大学网络 代码如下 UserScript name My Fancy New Userscript namespace http use i E your homepage version 0

随机推荐