全面解析jQuery中的$(window)與$(document)的用法區(qū)別

更新時(shí)間：2017年08月15日 15:32:47 作者：藝晨光

這篇文章主要介紹了jQuery中的$(window)與$(document)的用法區(qū)別，具體內(nèi)容大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。

[window對象]

它是一個(gè)頂層對象,而不是另一個(gè)對象的屬性，即表示瀏覽器中打開的窗口。

1、屬性

　　defaultStatus 缺省的狀態(tài)條消息

　　document 當(dāng)前顯示的文檔(該屬性本身也是一個(gè)對象)

　　frame 窗口里的一個(gè)框架((FRAME>)(該屬性本身也是一個(gè)對象)

frames array 列舉窗口的框架對象的數(shù)組,按照這些對象在文檔中出現(xiàn)的順序列出(該屬性本身也是一個(gè)
對象)

history 窗口的歷史列表(該屬性本身也是一個(gè)對象)

length 窗口內(nèi)的框架數(shù)

location 窗口所顯示文檔的完整(絕對)URL(該屬性本身也是一個(gè)對象)不要把它與如document.location
混淆,后者是當(dāng)前顯示文檔的URL。用戶可以改變window.location(用另一個(gè)文檔取代當(dāng)前文檔),但卻不能改變

document.location (因?yàn)檫@是當(dāng)前顯示文檔的位置)

name 窗口打開時(shí),賦予該窗口的名字

opener 代表使用window.open打開當(dāng)前窗口的腳本所在的窗口(這是Netscape Navigator 3.0beta 3所引
入的一個(gè)新屬性)

parent 包含當(dāng)前框架的窗口的同義詞。frame和window對象的一個(gè)屬性

self 當(dāng)前窗口或框架的同義詞

status 狀態(tài)條中的消息

top 包含當(dāng)前框架的最頂層瀏覽器窗口的同義詞

window 當(dāng)前窗口或框架的同義詞,與self相同

　　2、方法

alert() 打開一個(gè)Alert消息框
　　clearTimeout() 用來終止setTimeout方法的工作
　　close() 關(guān)閉窗口
　　confirm() 打開一個(gè)Confirm消息框,用戶可以選擇OK或Cancel,如果用戶單擊OK,該方法返回true,單擊
Cancel返回false
　　 blur() 把焦點(diǎn)從指定窗口移開(這是Netscape Navigator 3.0 beta 3引入的新方法)
　　focus() 把指定的窗口帶到前臺(另一個(gè)新方法)
　　open() 打開一個(gè)新窗口
　　 prompt() 打開一個(gè)Prompt對話框,用戶可向該框鍵入文本,并把鍵入的文本返回到腳本
　　setTimeout() 等待一段指定的毫秒數(shù)時(shí)間,然后運(yùn)行指令事件處理程序事件處理程序
　　Onload() 頁面載入時(shí)觸發(fā)
　　Onunload() 頁面關(guān)閉時(shí)觸發(fā)[document 對象]

　　該對象是window和frames對象的一個(gè)屬性,是顯示于窗口或框架內(nèi)的一個(gè)文檔。

　　1、屬性

　　alinkColor 活動鏈接的顏色(ALINK)
　　anchor 一個(gè)HTMI錨點(diǎn),使用<A NAME=>標(biāo)記創(chuàng)建(該屬性本身也是一個(gè)對象)
　　anchors array 列出文檔錨點(diǎn)對象的數(shù)組(<A NAME=>)(該屬性本身也是一個(gè)對象)
　　bgColor 文檔的背景顏色(BGCOLOR)
　　cookie 存儲于cookie.txt文件內(nèi)的一段信息,它是該文檔對象的一個(gè)屬性
　　fgColor 文檔的文本顏色(<BODY>標(biāo)記里的TEXT特性)
　　form 文檔中的一個(gè)窗體(<FORM>)(該屬性本身也是一個(gè)對象)
　　forms anay 按照其出現(xiàn)在文檔中的順序列出窗體對象的一個(gè)數(shù)組(該屬性本身也是一個(gè)對象)
　　lastModified 文檔最后的修改日期
　　linkColor 文檔的鏈接的顏色,即<BODY>標(biāo)記中的LINK特性(鏈接到用戶沒有觀察到的文檔)
　　link 文檔中的一個(gè)<A HREF=>標(biāo)記(該屬性本身也是一個(gè)對象)
　　links array 文檔中l(wèi)ink對象的一個(gè)數(shù)組,按照它們出現(xiàn)在文檔中的順序排列(該屬性本身也是一個(gè)對象)
　　location 當(dāng)前顯示文檔的URL。用戶不能改變document.location(因?yàn)檫@是當(dāng)前顯示文檔的位置)。但是,
可以改變 window.location (用其它文檔取代當(dāng)前文檔)window.location本身也是一個(gè)對象,而
document.location不是對象
　　referrer 包含鏈接的文檔的URL,用戶單擊該鏈接可到達(dá)當(dāng)前文檔
　　title 文檔的標(biāo)題((TITLE>)
　　vlinkColor 指向用戶已觀察過的文檔的鏈接文本顏色,即<BODY>標(biāo)記的VLINK特性

　　2、方法

　　clear 清除指定文檔的內(nèi)容
　　close 關(guān)閉文檔流
　　open 打開文檔流
　　write 把文本寫入文檔
　　writeln 把文本寫入文檔,并以換行符結(jié)尾

一、jQuery中的$(window).load()與$(document).ready()的區(qū)別

1.執(zhí)行時(shí)間

window.onload()即jquery寫法中的$(window).load(function(){})必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。

2.編寫個(gè)數(shù)不同

window.onload不能同時(shí)編寫多個(gè)，如果有多個(gè)window.onload方法，只會執(zhí)行一個(gè)(最后一個(gè))
$(document).ready()可以同時(shí)編寫多個(gè)，并且都可以得到執(zhí)行

3.簡化寫法

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

二、$(window).height()和$(document).height()的區(qū)別

jQuery(window).height()代表了當(dāng)前可見區(qū)域的大小，
jQuery(document).height()則代表了整個(gè)文檔的高度，可視具體情況使用.

注意：當(dāng)瀏覽器窗口大小改變時(shí)(如最大化或拉大窗口后) ，
jQuery(window).height() 隨之改變，但是
jQuery(document).height()是不變的。

三、$(window).scroll()和$(document).scroll()的區(qū)別

1、scroll()定義和用法：

當(dāng)用戶滾動指定的元素時(shí)，會發(fā)生 scroll 事件。
scroll 事件適用于所有可滾動的元素和 window 對象（瀏覽器窗口）。

2、兩者在使用效果上區(qū)別不大，但所有瀏覽器基本都支持$(window).scroll()，但$(document).scroll()就不一定了。

四、$(window).scrollTop()和$(document).scrollTop()的區(qū)別

1、scrollTop()定義和用法：

scrollTop() 方法返回或設(shè)置匹配元素的滾動條的垂直位置（即：滾動條最上方與該元素頂部的距離）。
輸入?yún)?shù)比如： $(window).scrollTop(100)，將垂直位置設(shè)置為100px;
不輸入?yún)?shù)比如： $(window).scrollTop(100)，返回匹配元素的滾動條的垂直位置。

2、$(window).scrollTop()和$(document).scrollTop()兩者在使用效果上區(qū)別不大，但所有瀏覽器基本都支持前者，但后者就不一定了。

附：一個(gè)返回頂部功能，對以上知識的應(yīng)用

$(function(){
 "use strict";
 var backButton=$('.back-to-top ');//css中請事先將按鈕隱藏
 //返回頂部按鈕點(diǎn)擊事件
 backButton.on('click',function(){
 $('html,body').animate({
 scrollTop:0
 },800)
 });
 //窗口向下滾動一屏后顯示‘返回頂部按鈕'
 $(window).on('scroll',function(){
 if($(window).scrollTop() > $(window).height())
 backButton.fadeIn();
 else
 backButton.fadeOut();
 })
});

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持!

您可能感興趣的文章: