JQuery的ready函數與JS的onload的區別詳解

JQuery的ready函數與JS的onload的區別:
1.執行時間
window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。
$(document).ready()是DOM結構繪制完畢后就執行,不必等到加載完畢。


2.編寫個數不同
window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個
$(document).ready()可以同時編寫多個,并且都可以得到執行


3.簡化寫法
window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){});

?

在我以前的開發中,一般用到javascript,我都是采用jquery的模式,也就是大多數時候,第一行寫的是:

?$(document).ready(function(){

});

這個時候,不一定要等所有的js和圖片加載完畢,就可以執行一些方法,不過有些時候,必須要等所有的

元素都加載完畢,才可以執行一些方法的時候,比如說,部分圖片或者什么其他方面還沒有加載好,這個時候,點擊某些按鈕,會導致出現意外的情況,這個時候,就

需要用到:

$(window).load(function() {

});

?

eg:?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

??? <head>

??????? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

??????? <title>ready和js中的onload的區別</title>

??????? <script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>

?

??????? <script type="text/javascript">

?

??????????? //js中window對象的onload屬性執行jsFunction1函數

??????????? window.οnlοad=jsFunction1;

?

??????????? //js中window對象的onload屬性執行jsFunction2函數

??????????? window.οnlοad=jsFunction2;

?

??????????? //jquery的ready方法執行jqFunction1函數

??????? $(document).ready(jqFunction1);

?

??????? //jquery的ready方法執行jqFunction2函數

??????? $(document).ready(jqFunction2);

?

??????? //jsFunction1函數

??????? function jsFunction1(){

??????????????? alert("jsFunction1");????????

??????? }

?

??????? //jsFunction2函數

??????? function jsFunction2(){

??????? alert("jsFunction2");

??????? }

?

??????? //jqFunction1函數

??????? function jqFunction1(){

?????????? alert("jqFunction1");

??????? }

?

??????? //jqFunction2函數

??????? function jqFunction2(){

??????? alert("jqFunction2");

??????? }

??????? </script>

?

??? </head>

??? <body>

??????? <h1>ready和js中的onload的區別</h1>

??? </body>

</html>

轉載于:https://www.cnblogs.com/supereast/p/10840504.html

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

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

相關文章

Vue — 第四天(components組件)

問題導入 下面的代碼是一個折疊面板的效果。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Docu…

iOS開發常用的RGB色值和宏

iOS中RGB常用的色值,同時可將對顏色的設置定義成宏,方便開發應用,如: // name 顏色相關 // 參數格式為&#xff1a;0xFFFFFF #define kColorWithRGB(rgbValue) \ [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16)) / 255.0 \ …

防火墻綜合實驗

防火墻技術綜合實驗 一、實驗目的&#xff1a;本次實驗是將多種訪問控制列表以及防火墻部分的知識做一個匯總 二、實驗內容 A&#xff1a;Established控制列表 拓撲圖 配置步驟 1:配置各端口ip地址&#xff0c;配置登陸密碼 R4: 登陸賬號&#xff1a;ys 密碼&#xff1a;123 2:…

iOS獲取當前設備型號等信息總結 包含iPhone7和iPhone7P

#include <sys/types.h> #include <sys/sysctl.h>//獲得設備型號(NSString *)getCurrentDeviceModel {int mib[2];size_t len;char *machine;mib[0] CTL_HW;mib[1] HW_MACHINE;sysctl(mib, 2, NULL, &len, NULL, 0);machine malloc(len);sysctl(mib, 2, mac…

Vue — 第五天(路由)

前端路由 問題導入 在前面完成的資產管理案例中&#xff0c; 我們是把列表區域和添加表單區域實現在了一個區域。當頁面功能比較復雜時&#xff0c;我們需要它們拆分開來&#xff1a;一個頁面中只顯示一個區域。 一個比較直觀的解決方案是把它們分別做成兩個獨立的網頁文件&…

獲取網絡時間,在不同時間觸發事件

<!DOCTYPE html><html lang"en"><head>   <meta charset"UTF-8">   <title>時間事件</title></head><body></body><script> var int_timenew Date();//使用Date獲取網絡時間;   functi…

iOS獲取手機的IP地址

1.添加這五個庫&#xff08;在聯網的情況下&#xff09; #import <sys/socket.h> #import <sys/sockio.h> #import <sys/ioctl.h> #import <net/if.h> #import <arpa/inet.h>2.寫一個方法 - (NSString *)getDeviceIPIpAddresses {int sockfd soc…

Vue — 第六天(vue-cli-介紹)

vue-cli-介紹 vue-cli是官方提供的開發vue項目的腳手架工具。 腳手架是為了保證各施工過程順利進行而搭設的工作平臺。 在開發過程中&#xff0c;腳手架工具是有用的&#xff0c;開發完成&#xff08;項目上線&#xff09;&#xff0c;它就沒有用了。 vue-cli可以提供基于vue項…

python安裝pyautogui遇到的gbk異常解決

一開始使用pip install pyautogui,報錯,大概信息如下: Collecting pygetwindow (from pyautogui) Using cached https://files.pythonhosted.org/packages/01/ed/56d4a369c6e18f6b239d9ef37b3222ba308bfebf949571b2611ff7d64f1d/PyGetWindow-0.0.4.tar.gz ERROR: Complete …

NSString的各種用法總結(創建、截取、判斷比較、轉化數據類型、拼接、替換、添加、追加、讀取、寫入、刪去、改變)

1、創建字符串1&#xff09;NSSring *str ”adf”;2&#xff09;NSString *str1 [NSString new];NSString *str2 [[NSString alloc] initWithString:”adf”]; &#xff08;等同于1&#xff09;4&#xff09;NSString *str3 [NSString stringWithFormat:”name is %”,”小…

Vue — 第七天(vue-cli-案例)

資料獲取地址&#xff1a; github: https://gitee.com/wang_yu5201314/VUE_vuecli SSH&#xff1a; gitgitee.com:wang_yu5201314/VUE_vuecli.git hero案例-項目介紹 功能介紹&#xff1a; 三個模塊 英雄列表(只做這個)裝備列表技能列表 英雄列表 列表組件刪除功能添加組件編…

postman測試工具

做文件上傳測試的時候可以選擇輸入方式為文件 做文件下載測試的時候&#xff0c;可以選擇 轉載于:https://www.cnblogs.com/thesun/p/10853226.html

webpack — 概述介紹

webpack概述 webpack是一個流行的前端項目構建工具&#xff08;打包工具&#xff09;&#xff0c;可以解決當前web 開發中所面臨的困境。 webpack提供了友好的模塊化支持&#xff0c;以及代碼壓縮混淆、處理js兼容問題、性能優化等強大的功能&#xff0c;從而讓程序員把工作的…

徹底解決iOS項目中 _OBJC_CLASS_$_XXXService, referenced from: 的類似問題

這是大家熟悉的開發過程中可能遇到的問題 這是提交源碼到appStore不支持64位設備的提示 本人在提交項目到appStore時發生的的錯誤&#xff0c;提示必須要支持64的設備&#xff0c;然后自己趕緊進行相關的適應&#xff0c;出現了類似標題的問題&#xff0c;解決方法如下: 1、…

THUPCCTSAPIO2019:Far Away

流水賬~ THUPC nmdwsmduliu&#xff01; THUPC Day -INF~Day -2 大概就是自己做題和每周兩次的考試&#xff0c;lsy和fcw兩個外校的來吊打我們qwqqq THUPC Day -1 Z208 長沙->北京 在車上看gzy/tjj/xzz打擺&#xff1f; THUPC Day 0 從火車站出來做地鐵的時候和tjj做反了可海…

UIDocumentInteractionController之程序間文檔共享

iOS中的沙盒可以讓平臺更加的安全&#xff0c;這也是沙盒給用戶帶來的最主要好處。不過由于沙盒的嚴格限制&#xff0c;導致程序之間共享數據比較麻煩。一般在程序間共享文檔可以通過UIDocumentInteractionController類實現通訊。它支持在你的app中用其他app預覽和顯示文檔。同…

webpack — 概述 (2)

webpack學前必備 webpack中文網 webpack官網 1. Webpack 介紹 Webpack 是什么?? (面試) 前端模塊化打包工具WebPack可以看做是模塊打包機&#xff1a;它做的事情是&#xff0c;分析你的項目結構&#xff0c;找到JavaScript模塊、其它的一些瀏覽器不能直接運行的拓展語言…

VUE安裝依賴命令總結

以下是個人用到過的vue安裝包以及依賴命令&#xff08;在接觸項目時&#xff0c;有未寫到的會隨時補充&#xff09; 1. vuex 作用&#xff1a;vue狀態管理 安裝&#xff1a;npm install vuex --save 開源地址&#xff1a;github 文檔&#xff1a;https://vuex.vuejs.org/zh/ 2.…

SQL總結(快速參考)

SQL 語句 語句 語法 AND / OR SELECT column_name(s) FROM table_name WHERE condition AND|OR condition ALTER TABLE (add column) ALTER TABLE table_name ADD column_name datatype ALTER TABLE (drop column) ALTER TABLE table_name DROP COLUMN column_name AS (alias…

Vue -項目創建(rem適配項的設置)

3. 項目rem 配置 ####3.1 rem介紹 小米、京東、攜程 m.mi.com/m.jd.com/m.ctrp.com 核心原理 1rem 當前 html 的fontSize也就是說 : rem是相當于根元素的字體大小// 使用div {width:2rem;height:2rem}// 媒體查詢media (min-width:320px) {html {font-size : 20px}}media (mi…