jQuery中的$(window)與$(document)的用法區別

時間 2020-05-28

標籤 jquery window document 用法區別欄目 JQuery 简体版

原文原文鏈接

[window對象]
css

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

一、屬性
　　defaultStatus 缺省的狀態條消息
　　document 當前顯示的文檔(該屬性自己也是一個對象)
　　frame 窗口裏的一個框架((FRAME>)(該屬性自己也是一個對象)
　　frames array 列舉窗口的框架對象的數組,按照這些對象在文檔中出現的順序列出(該屬性自己也是一個
對象)
　　history 窗口的歷史列表(該屬性自己也是一個對象)
　　length 窗口內的框架數
　　location 窗口所顯示文檔的完整(絕對)URL(該屬性自己也是一個對象)不要把它與如document.location
混淆,後者是當前顯示文檔的URL。用戶能夠改變window.location(用另外一個文檔取代當前文檔),但卻不能改變
document.location (由於這是當前顯示文檔的位置)
　　name 窗口打開時,賦予該窗口的名字
　　opener 表明使用window.open打開當前窗口的腳本所在的窗口(這是Netscape Navigator 3.0beta 3所引
入的一個新屬性)
　　parent 包含當前框架的窗口的同義詞。frame和window對象的一個屬性
　　self 當前窗口或框架的同義詞
　　status 狀態條中的消息
　　top 包含當前框架的最頂層瀏覽器窗口的同義詞
　　window 當前窗口或框架的同義詞,與self相同jquery

　　二、方法
　　alert() 打開一個Alert消息框
　　clearTimeout() 用來終止setTimeout方法的工做
　　close() 關閉窗口
　　confirm() 打開一個Confirm消息框,用戶能夠選擇OK或Cancel,若是用戶單擊OK,該方法返回true,單擊
Cancel返回false
　　 blur() 把焦點從指定窗口移開(這是Netscape Navigator 3.0 beta 3引入的新方法)
　　focus() 把指定的窗口帶到前臺(另外一個新方法)
　　open() 打開一個新窗口
　　 prompt() 打開一個Prompt對話框,用戶可向該框鍵入文本,並把鍵入的文本返回到腳本
　　setTimeout() 等待一段指定的毫秒數時間,而後運行指令事件處理程序事件處理程序
　　Onload() 頁面載入時觸發
　　Onunload() 頁面關閉時觸發數組

[document 對象]
　　該對象是window和frames對象的一個屬性,是顯示於窗口或框架內的一個文檔。瀏覽器

　　一、屬性
　　alinkColor 活動連接的顏色(ALINK)
　　anchor 一個HTMI錨點,使用<A NAME=>標記建立(該屬性自己也是一個對象)
　　anchors array 列出文檔錨點對象的數組(<A NAME=>)(該屬性自己也是一個對象)
　　bgColor 文檔的背景顏色(BGCOLOR)
　　cookie 存儲於cookie.txt文件內的一段信息,它是該文檔對象的一個屬性
　　fgColor 文檔的文本顏色(<BODY>標記裏的TEXT特性)
　　form 文檔中的一個窗體(<FORM>)(該屬性自己也是一個對象)
　　forms anay 按照其出如今文檔中的順序列出窗體對象的一個數組(該屬性自己也是一個對象)
　　lastModified 文檔最後的修改日期
　　linkColor 文檔的連接的顏色,即<BODY>標記中的LINK特性(連接到用戶沒有觀察到的文檔)
　　link 文檔中的一個<A HREF=>標記(該屬性自己也是一個對象)
　　links array 文檔中link對象的一個數組,按照它們出如今文檔中的順序排列(該屬性自己也是一個對象)
　　location 當前顯示文檔的URL。用戶不能改變document.location(由於這是當前顯示文檔的位置)。可是,
能夠改變 window.location (用其它文檔取代當前文檔)window.location自己也是一個對象,而
document.location不是對象
　　referrer 包含連接的文檔的URL,用戶單擊該連接可到達當前文檔
　　title 文檔的標題((TITLE>)
　　vlinkColor 指向用戶已觀察過的文檔的連接文本顏色,即<BODY>標記的VLINK特性cookie

　　二、方法
　　clear 清除指定文檔的內容
　　close 關閉文檔流
　　open 打開文檔流
　　write 把文本寫入文檔
　　writeln 把文本寫入文檔,並以換行符結尾框架

1、jQuery中的$(window).load()與$(document).ready()的區別ide

1.執行時間
window.onload()即jquery寫法中的$(window).load(function(){})必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。
2.編寫個數不一樣
window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個(最後一個)
$(document).ready()能夠同時編寫多個，而且均可以獲得執行
3.簡化寫法
window.onload沒有簡化寫法
$(document).ready(function(){})能夠簡寫成$(function(){});spa

2、$(window).height()和$(document).height()的區別orm

jQuery(window).height()表明了當前可見區域的大小，
jQuery(document).height()則表明了整個文檔的高度，可視具體狀況使用.

注意：當瀏覽器窗口大小改變時(如最大化或拉大窗口後) ，
jQuery(window).height() 隨之改變，可是
jQuery(document).height()是不變的。

3、$(window).scroll()和$(document).scroll()的區別

一、scroll()定義和用法：

當用戶滾動指定的元素時，會發生 scroll 事件。

scroll 事件適用於全部可滾動的元素和 window 對象（瀏覽器窗口）。

二、二者在使用效果上區別不大，但全部瀏覽器基本都支持$(window).scroll()，但$(document).scroll()就不必定了。

4、$(window).scrollTop()和$(document).scrollTop()的區別

一、scrollTop()定義和用法：

scrollTop() 方法返回或設置匹配元素的滾動條的垂直位置（即：滾動條最上方與該元素頂部的距離）。

輸入參數好比： $(window).scrollTop(100)，將垂直位置設置爲100px;

不輸入參數好比： $(window).scrollTop(100)，返回匹配元素的滾動條的垂直位置。

二、$(window).scrollTop()和$(document).scrollTop()二者在使用效果上區別不大，但全部瀏覽器基本都支持前者，但後者就不必定了。

附：一個返回頂部功能，對以上知識的應用

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