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

發(fā)布時間：2020-07-03 22:04:07 來源：網(wǎng)絡(luò) 閱讀：2318 作者：藝晨光欄目：web開發(fā)

[window對象]

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

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

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

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

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

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

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

1.執(zhí)行時間
window.onload()即jquery寫法中的$(window).load(function(){})必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。
2.編寫個數(shù)不同
window.onload不能同時編寫多個，如果有多個window.onload方法，只會執(zhí)行一個(最后一個)
$(document).ready()可以同時編寫多個，并且都可以得到執(zhí)行
3.簡化寫法
window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){});

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

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

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

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

1、scroll()定義和用法：

當用戶滾動指定的元素時，會發(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ū)別不大，但所有瀏覽器基本都支持前者，但后者就不一定了。

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

;$(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();
    })
});

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽