區別 (function($){...})(jQuery)、$(function(){ })和$.fn

一、(function($){…})(jQuery)
首先function(arg){...}定義了一個匿名函數,參數為arg,而調用時需要在函數后面寫上括號和實參,由于操作符的優先級,函數本身也需要括號,也就成了:
(function(arg){...})(param)
這就相當于定義了一個參數為arg的匿名函數,并將param作為參數來調用這個匿名函數
而(function($){...})(jQuery)則是一樣的,之所以只在形參使用$,是為了不與其他庫沖突,所以實參用jQuery,其實就等于其實可以這么理解,不過要注意的是fn是不存在的,函數直接定義,然后就運行了,然后就壓縮成如下:

(function($){...})(jQuery)

二、$(function(){})
是$(document).ready(function(){...})的簡寫形式,意思就是頁面載入后執行其中的代碼,也可以被寫成:

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

兩者相比:
jQuery(function(){...});用于存放操作DOM對象的代碼,執行其中代碼時DOM對象已經存在。不可用于存放開發插件的代碼,因為jQuery對象沒有得到傳遞,外部通過jQuery.method也調用不了其中的方法(函數)。
(function(){...}(jQuery);用于存放開發插件的代碼,執行其中代碼時DOM不一定存在,所以直接自動執行DOM操作的代碼,請小心使用。
簡單理解是(function($){...})(jQuery)用來定義一些需要預先定義好的函數
$(function(){...})則是用來在DOM加載完成之后運行/執行那些預先定義好的函數。

開發jQuery插件時,一般先看jQuery(function(){...}),意義為在DOM加載完畢后執行了ready()方法,再看(function(){...})(jQuery).

三、$.fn
$.fn是指jQuery的命名空間,加上fn的方法及屬性,會對每一個jquery實例有效。
如定義了$.fn.initPageMe(),即對jQuery擴展了一個abc方法,那么后面你的每一個jQuery實例都可以引用這個方法了。

$.fn.initPageMe=function(opts){...};   //定義擴展方法
$(function(){$(".pageMe").initPageMe();             //調用擴展方法
})

四、$與$.fn
$是jQuery的一種表現形式。
jQuery的擴展方式有:

1.$.func1=function(){}
2.$.extend({func1:function(){}})
3.$.fn.func1=function(){}
4.$.fn.extent({func1:function(){}})

$拓展的方法是靜態方法,可以使用$直接調用,其拓展的方式有兩種,一般使用$.extend({});;而$.fn拓展的方法是實例方法,必須由“對象”$("")來調用,其拓展的方式同樣有兩種,一般使用$.fn.extend({ })。

其中,fn與prototype等同使用;jQuery.fn = jQuery.prototype

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247433.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247433.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247433.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

git 清除緩存

清除git緩存 git config --local --unset credential.helpergit config --global --unset credential.helpergit config --system --unset credential.helper保存git緩存 git config --global credential.helper store轉載于:https://www.cnblogs.com/zhouyideboke/p/11211650.…

網頁里如何使用js禁用控制臺

網頁里如何禁用右擊事件&#xff1f;使用jQuery&#xff0c;幾句代碼就可以搞定了 document.oncontextmenu function(){return false;} 簡單示例&#xff1a; js實現&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><…

Java生鮮電商平臺-訂單中心服務架構與異常訂單邏輯

Java生鮮電商平臺-訂單中心服務架構與異常訂單邏輯 訂單架構實戰中闡述了訂單系統的重要性&#xff0c;并從訂單系統的信息架構和流程上對訂單系統有了總體認知&#xff0c;同時還穿插著一些常見的訂單業務規則和邏輯。上文寫到訂單的拆單部分時擱置了&#xff0c;現在接上文繼…

Vuex的全面用法總結

1. vuex簡介 vuex是專門用來管理vue.js應用程序中狀態的一個插件。他的作用是將應用中的所有狀態都放在一起&#xff0c;集中式來管理。需要聲明的是&#xff0c;這里所說的狀態指的是vue組件中data里面的屬性。了解vue的同學應該是明白data是怎么回事的吧&#xff0c;如果不懂…

vue中通過第三方代理解決跨域問題

最近在學node&#xff0c;遇到了跨域的問題&#xff0c;來記錄下方法 首頁服務端的框架是通過express-generator 搭建起來的 npm install -g express-generator 具體接下來的細節不多說&#xff0c;今天主要說跨域 的問題 左側為服務端項目結構&#xff0c;www為可執行文件&am…

使用V-chart時配置踩過的一些坑

如何配置圖表信息 echart的配置項可謂是相當的海量&#xff0c;能不看就不看。而v-chart對其進行了不少的簡化&#xff0c;所以我們想要自定義一個圖表時&#xff0c;最好按照以下步驟來檢查&#xff1a; 圖表私有屬性 v-chart每一個圖表都有自己獨有的設置項&#xff0c;想…

ZDOzMRVAOq

11 轉載于:https://www.cnblogs.com/wc529065/p/11212226.html

vue 出現Elements in iteration expect to have 'v-bind:key' directives

是由于eslint檢測出現bug 解決方法有兩種 v-for 后添加 :keyitem <li v-for"item in list" :key"item"> 在build處關閉eslint檢測 ...(config.dev.useEslint ? [createLintingRule()] : []),

requestAnimationFram

window.requestAnimationFrame() 告訴瀏覽器——你希望執行一個動畫&#xff0c;并且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數&#xff0c;該回調函數會在瀏覽器下一次重繪之前執行 注意&#xff1a;若你想在瀏覽器下次重繪之…

vue/return-in-computed-property Enforce that a return statement is present in computed property

此規則強制return語句在computed屬性中得完整存在。 <script> export default {computed: {/* ? GOOD */foo () {if (this.bar) {return this.baz} else {return this.baf}},bar: function () {return false},/* ? BAD */baz () {if (this.baf) {return this.baf}},ba…

vue-cli3 一直運行 /sockjs-node/info?t= 解決方案

首先 sockjs-node 是一個JavaScript庫&#xff0c;提供跨瀏覽器JavaScript的API&#xff0c;創建了一個低延遲、全雙工的瀏覽器和web服務器之間通信通道。 服務端&#xff1a;sockjs-node&#xff08;https://github.com/sockjs/sockjs-node&#xff09; 客戶端&#xff1a;so…

Java生鮮電商平臺-生鮮供應鏈(采購管理)

Java生鮮電商平臺-生鮮供應鏈(采購管理) 在生鮮供應鏈系統中采購中心這一模塊&#xff0c;它是電商公司管理采購的模塊&#xff0c;包含供應商管理&#xff0c;采購訂單管理&#xff0c;采購商品管理&#xff0c;在該模塊中采購訂單是采購中心的核心模塊。在其他的比如供應商的…

鏈式調用setTimeout()與setInterval()的區別

使用 setTimeout()和 setInterval()創建的定時器可以用于實現有趣且有用的功能。執行時機是不能保證的&#xff0c;因為在頁面的生命周期中&#xff0c;不同時間可能有其他代碼在控制 JavaScript 進程。在頁面下載完后的代碼運行、事件處理程序、Ajax 回調函數都必須使用同樣的…

Multiple Dispatch

今天在看文章的時候遇到了multiple dispatch這個術語。看看了wiki&#xff0c;寫得云里霧里。最后搜了搜資料&#xff0c;基本上搞清楚了。 multiple dispatch的混淆之處在于其和object system結合在一起。當然wiki上寫得很清楚&#xff1a;“a function or method can be dyna…

如何讓Element UI的Message消息提示每次只彈出一個

Element UI的Message消息提示是點擊一次觸發一次的。在開發的時候經常會作為一些校驗提示&#xff0c;但是公司的測試人員在進行測試時會一直點&#xff0c;然后就會出現如下圖的情況。雖然客戶使用的時候一般來說不會出現這種情況&#xff08;畢竟客戶不會閑著沒事一直點點點&…

jsp頭文件的內容/response.setHeader

轉載的&#xff01;&#xff01;&#xff01;做一個記錄!!!! response.setHeader 是用來設置返回頁面的頭 meta 信息, 使用時 response.setHeader( name, contect ); meta是用來在HTML文檔中模擬HTTP協議的響應頭報文。meta 標簽用于網頁的<head>與</head>中 1、&l…

css3實現科技感的呼吸燈效果

呼吸燈效果是一種常見的燈光效果&#xff0c;比如網頁的按鈕&#xff0c;現實生活中比如電腦的開機按鈕。 使用CSS3的animation方法可以實現很多迷人的網頁動畫特效。 使用CSS3 配合box-shadow即可實現類似的效果 樣式代碼如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18…

WIX(20121031) 應用設置默認變量

花了了好長時間找到的 這樣可以將變量信息定義到wxs中&#xff0c;方便應用 <?xml version"1.0" encoding"UTF-8"?> <?define ProductName"Wix CY"?> <Wix xmlns"http://schemas.microsoft.com/wix/2006/wi">&l…

百度Echarts折線圖tooltip里數據添加單位

option {title: {text: 折線圖堆疊},tooltip: {trigger: axis,//在這里設置formatter: {a0}:{c0}萬},legend: {data:[郵件營銷,聯盟廣告,視頻廣告,直接訪問,搜索引擎]},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxi…

VUE組件 之 Drawer 抽屜

一、源碼地址 https://github.com/imxiaoer/DrawerForVue 二、效果圖 三、具體代碼 drawer.vue <template><div class"drawer"><div :class"maskClass" click"closeByMask"></div><div :class"mainClass"…