前端教程：在瀏覽器中啟用JavaScript

有現代瀏覽器都使用了JavaScript的內置支持。很多時候，你可能需要啟用或手動禁用此支持。

本教程將讓您知道如何啟用和禁用JavaScript支持，在您的瀏覽器：IE瀏覽器，Firefox和Opera。

JavaScript在InternetExplorer(IE)中：

下面是簡單的步驟給打開或關閉JavaScript在您的InternetExplorer：

1、按照從菜單"工具"->"Internet選項"

2、從對話框中選擇"安全"選項卡

3、點擊"自定義級別"按鈕

4、向下滾動，直到找到"腳本選項"

5、選擇啟用"活動腳本"單選按鈕

6、最后點擊"確定"，然后退出來

要禁用JavaScript支持在InternetExplorer，需要在“活動腳本”給選擇“禁用”單選按鈕。

JavaScript在Firefox：

下面是簡單的步驟給打開或關閉JavaScript在Firefox：

1、從菜單按照"工具" ->"選項"

2、從對話框的“內容”選項

3、選擇啟用JavaScript的復選框

4、最后點擊確定，然后退出來

要禁用Firefox的JavaScript支持，應該選擇禁用JavaScript的復選框。

JavaScript在Opera:

下面是簡單的步驟給打開或關閉JavaScript在Opera：

1、從菜單按照"工具"->"首選項"

選擇對話框中的"高級"選項

2、從列出的項目選擇"內容"選擇啟用JavaScript 復選框

3、最后點擊"確定"，然后退出來

要禁用在Opera中支持JavaScript，那么不要選擇啟用JavaScript的復選框。

警告對非JavaScript的瀏覽器：

如果你有使用JavaScript做一些重要的事情，那么可以顯示一條警告消息，使用<noscript>標簽顯示給用戶。

可以在腳本塊后，如下立即加入noscript noscript 塊：

<html>
<body>

<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>

<noscript>
  Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>

12345678910111213141516復制代碼類型：[javascript]

現在，如果沒有啟用用戶的瀏覽器不支持JavaScript或JavaScript，然后</noscript>會在屏幕上顯示的消息。

開課吧廣場-人才學習交流平臺

前面兩篇文章，學習了JavaScript中DOM、BOM相關基礎知識后，今天我們將結合前面所學內容，利用DOM操作實現常見的網頁動畫效果；結合知識點有相關案例效果演示，另外本文所設計的源碼和配套素材可在文末獲取；

JavaScript網頁特效

學習目標

offset的屬性與作用
client的屬性與作用
scroll的屬性與作用
封裝簡單動畫函數
網頁輪播圖

I、元素偏移量

獲得元素距離帶有定位父元素的位置

獲得元素自身的width和height

1.offset常用的屬性

2.offset與style的區別

案例：獲取鼠標在盒子內的坐標

思路：盒子內的坐標可以通過鼠標事件的e.pageX獲取到頁面坐標再減去element.offsetLeft來得到；

var box=document.querySelector('.box');
box.addEventListener('click',function(e){
    var x=e.pageX - this.offsetLeft;
    var y=e.pageY - this.offsetTop;
    console.log('x:'+x+',y:'+y);
})

案例：模態框拖拽

需求：

（1）點擊彈出層，會淡出模塊框，并且顯示灰色半透明的遮擋層；

（2）點擊關閉按鈕，可以關閉模態框，并且同時關閉灰色半透明遮擋層；

（3）鼠標放到模態框最上面一行，可以按住鼠標拖拽模態框在頁面中移動；

（4）鼠標松開，可以停止拖動模態框移動；

分析：

（1）拖拽事件，鼠標是按著的狀態，故mousemove和mouseup須卸載mousedown事件里面；

（2）在拖拽的過程中，鼠標的位置相對于組件的坐標是不變的，因此為了改變組件的位置，需要將頁面坐標減去相對組件坐標來獲取；

var link=document.querySelector('#link');
var login_window=document.querySelector('#login');
var close_button=document.querySelector('#closeBtn');
var bg=document.querySelector('#bg');
link.addEventListener('click',function(){
    login_window.style.display='block';
    bg.style.display='block';
})
close_button.addEventListener('click',function(){
    login_window.style.display='none';
    bg.style.display='none';
})
// 拖動事件三個過程：mousedown、mousemove、mouseup
var title=document.querySelector('#title');
title.addEventListener('mousedown',function(e){
    var x=e.pageX - login_window.offsetLeft;
    var y=e.pageY - login_window.offsetTop;
    document.addEventListener('mousemove',move);
    function move(e){
        login_window.style.left=e.pageX - x + 'px';
        login_window.style.top=e.pageY -y + 'px';
    }
    document.addEventListener('mouseup',function (e) {
        document.removeEventListener('mousemove',move);
    });
});

案例:仿京東放大鏡效果

分析：

（1）mask界面與big界面可以通過鼠標事件設置dispaly屬性即可；mouseover顯示mask，mouseleave隱藏mask、mousemove移動mask

（2）mask的left與top的值可以通過鼠標在prew_img中的位置來獲取；

（3）為了讓mask界面中央跟著鼠標指針走，則需要減去mask尺寸一半的偏移量；

（4）防止mask頁面跑出prew_img，需要對偏移量進行判斷；

（5）大圖片移動距離怎么計算？mask移動距離/mask最大移動距離=大圖片移動距離/大圖片最大移動距離；所以大圖片移動距離=mask移動距離 * 大圖片移動最大距離 / 遮擋層最大移動距離；

window.addEventListener('load',function(){
    var prew_img=document.querySelector('.preview_img');
    var mask=document.querySelector('.mask');
    var big=document.querySelector('.big');
    prew_img.addEventListener('mouseover',function(){
        mask.style.display='block';
        big.style.display='block';
    })
    prew_img.addEventListener('mousemove',function(e){
        // 獲取鼠標在prew_img元素內的坐標
        var x=e.pageX - this.offsetLeft;
        var y=e.pageY - this.offsetTop;
        // 防止mask頁面跑出prew_img盒子
        var maskX=x - mask.offsetWidth / 2;
        // 遮擋層的最大移動距離maskMax
        var maskMax=this.offsetWidth - mask.offsetWidth;
        if(maskX <=0){
            maskX=0;
        }else if(maskX >=maskMax){
            maskX=maskMax;
        }
        var maskY=y - mask.offsetHeight / 2;
        if(maskY <=0){
            maskY=0;
        }else if(maskY >=maskMax){
            maskY=maskMax;
        }
        // 讓mask界面中央跟著鼠標指針走
        mask.style.left=maskX + 'px';
        mask.style.top=maskY + 'px';
        // 讓big界面內容跟著mask位置移動，
        // 大圖片移動距離=mask移動距離 * 大圖片移動最大距離 / mask最大移動距離
        var big_img=document.querySelector('.bigImg');
        var bigMax=big_img.offsetWidth - big.offsetWidth;
        // 大圖片移動距離
        var bigMoveX=maskX * bigMax / maskMax;
        var bigMoveY=maskY * bigMax / maskMax;
        big_img.style.left=-bigMoveX + 'px';
        big_img.style.top=-bigMoveY + 'px';
    });

    prew_img.addEventListener('mouseleave',function(){
        mask.style.display='none';
        big.style.display='none';
    });
});

II、元素的可視區

立即執行函數

不需要調用，立馬能自己執行的函數;

// 寫法一：
(function(){})()
// 寫法二：
(function(){}())

立即執行函數也可以傳遞參數：

(function(a,b){
console.log(a+b);
})(1,2)

立即執行函數的作用是獨立創建了一個作用域，里面所有的變量都是局部變量，不會有命名沖突的情況；

III、元素滾動scroll

使用scroll系列相關屬性可以動態得到元素的大小、滾動距離；

scroll系列屬性 作用備注 element.scrollTop 返回被卷去的上側距離返回的數值不帶單位 element.scrollLeft 返回被卷去的左側距離返回的數值不帶單位 element.scrollWidth 返回自身的實際寬度，不含邊框返回的數值不帶單位 element.scrollHeight 返回自身的實際高度，不含邊框返回的數值不帶單位

案例：仿淘寶固定側邊欄

1.原先側邊欄是絕對定位
2.當頁面滾動到一定的位置，側邊欄改為固定定位
3.頁面繼續滾動，會讓頂部顯示出來

頁面被卷去的頭部可以通過：window.pageYOffset來獲得

// 1.獲取元素
var sliderBar=document.querySelector('.slider-bar');
var topBar=document.querySelector('.header');
var banner=document.querySelector('.banner');
var main=document.querySelector('.main');
var goBack=document.querySelector('.goBack');

var barHeight=banner.offsetTop;
var sliderBarTop=sliderBar.offsetTop;
var fixTop=sliderBarTop - barHeight;
var mainTop=main.offsetTop;
// 2.頁面滾動事件
document.addEventListener('scroll',function(){

    if(window.pageYOffset >=barHeight){
        sliderBar.style.position='fixed';
        sliderBar.style.top=fixTop + 'px';
    }else{
        sliderBar.style.position='absolute';
        sliderBar.style.top=sliderBarTop + 'px';
    }
    if(window.pageYOffset >=mainTop){
        goBack.style.display='block';
    }else{
        goBack.style.display='none';
    }
})

IV、鼠標事件

當鼠標移動到元素上時就會觸發mouseenter事件，類似mouseenter

兩者的區別是：mouseover鼠標經過自身盒子會觸發、經過子盒子也會觸發；而mouseenter只有經過自身盒子才會觸發；

原因是mouseenter不會冒泡；跟mouseenter搭配的通常是mouseleave

V、動畫函數

1.動畫實現的原理：

通過定時器setInterval()不斷移動盒子位置；

實現步驟：

獲得盒子當前位置
讓盒子在當前位置加上一個移動距離
加上一個結束定時器的條件
盒子需要添加定位，才能使用element.style.left

//利用setInterval設置一個box元素從左向右移動400像素的動畫
var box=document.querySelector('.box');
var timer=setInterval(function(){
    if(box.offsetLeft > 200){
        // 停止動畫，本質上是清除定時器
        clearInterval(timer);
    }
    box.style.left=box.offsetLeft + 5 + 'px';
},50);

2.動畫函數的封裝

將動畫函數封裝起來，利用JS是動態語言的特性，通過設置對象的方式，給每個不同的元素指定不同的定時器；

// 簡單動畫函數的封裝,目標對象obj,目標位置target
function animate(obj,target){
    // 如果設置一個按鈕啟動動畫，會存在一個bug,只要不斷點擊按鈕，動畫會越走越快；
    // 原因是啟動了太多定時器，解決方案是，讓元素只有一個定時器執行
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
    if(obj.offsetLeft > target){
        // 停止動畫，本質上是清除定時器
        clearInterval(obj.timer);
    }
    obj.style.left=obj.offsetLeft + 5 + 'px';
},50);
}
//利用setInterval設置動畫
var btn=document.querySelector('button');
var box1=document.querySelector('.box1');
btn.addEventListener('click',function(){
    animate(box1,400);
});

3.緩動動畫原理

緩動動畫就是讓元素運動速度有所變換，最常見的就是讓速度慢慢停下來；

思路：讓盒子每次移動的距離慢慢變小；

核心算法：每次移動的步長=(目標值-現在的位置)/10這里的10是份數可以是9也可以是8；

停止的條件是：當前盒子的位置等于目標位置就停止定時器；

// 緩動動畫
function animate(obj,target){
    // 清除定時器
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
        // 每次運行定時器都要重新計算步長值，所以步長值寫在定時器里面
        var step=(target - obj.offsetLeft)/10;
        // 如果step是正值則往大取整，如果step是負值則往小取整
        step=step >=0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
        }
        // 緩動動畫核心算法：前進步長=（目標-當前）/ 10
        obj.style.left=obj.offsetLeft + step + 'px';
    },50);
}

動畫函數添加回調函數

回調函數原理：函數可以作為一個參數，將這個函數作為參數傳入到另一個函數里面，當這個函數執行完成后，再執行傳進去的這個函數，這個過程叫做回調。

回調函數位置：寫到定時器結束的位置

// 緩動動畫
function animate(obj,target,callback){
    // 清除定時器
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
        // 每次運行定時器都要重新計算步長值，所以步長值寫在定時器里面
        var step=(target - obj.offsetLeft)/10;
        // 如果step是正值則往大取整，如果step是負值則往小取整
        step=step >=0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
            if(callback){
                // 調用函數
                callback();
            }
        }
        // 緩動動畫核心算法：前進步長=（目標-當前）/ 10
        obj.style.left=obj.offsetLeft + step + 'px';
    },50);
}

將動畫函數封裝到單獨的JS文件

在head里引入JS文件

<script src="animate.js"></script>

實際調用過程中可以直接調用JS中定義的函數

var sliderbar=document.querySelector('.sliderbar');
var con=document.querySelector('.con');
sliderbar.addEventListener('mouseenter',function(){
    animate(con,-160,function () {
        // 動畫執行完畢，將左箭頭轉為右箭頭
        sliderbar.children[1].innerHTML='→';
    });
})
sliderbar.addEventListener('mouseleave',function(){
    animate(con,0,function () {
        sliderbar.children[1].innerHTML='←';
    });
})

案例：網頁輪播圖

功能需求：

鼠標經過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕；
鼠標點擊右側按鈕一次，圖片往左播放一張，以此內推，左側按鈕同理；
圖標播放的同時，下面小圓圈模塊跟隨一起變化；
點擊小圓圈，可以播放相應圖片；
鼠標不經過輪播圖，輪播圖也會自動播放圖片；
鼠標經過，輪播圖模塊，自動播放停止

window.addEventListener('load', function () {
    //===0.定義變量，獲取元素
    var focus=document.querySelector('.focus');
    var arrowL=document.querySelector('.arrow-l');
    var arrowR=document.querySelector('.arrow-r');

    //===1.鼠標經過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕；=====focus.addEventListener('mouseenter', function () {
        arrowL.style.display='block';
        arrowR.style.display='block';
        clearInterval(timer);
        timer=null;
    });
    focus.addEventListener('mouseleave', function () {
        arrowL.style.display='none';
        arrowR.style.display='none';
        timer=window.setInterval(function () {
            arrowR.click();
        }, 3000);
    });
    //===2.根據輪播圖的數量自動生成小圓圈
    var ul=focus.querySelector('ul');
    var ol=focus.querySelector('.circle');
    var pictureWidth=focus.offsetWidth;
    // 獲取到輪播圖圖片的數量length
    var length=ul.children.length;
    // 顯示當前圖片的索引
    var circle=0;
    // 顯示當前圖片的索引
    var num=0;
    // 創建元素插入到ol中
    for (var i=0; i < length; i++) {
        var li=document.createElement('li');
        // 給沒一個小圓圈添加一個index屬性，方便點擊事件的ul移動長度的確定
        li.setAttribute('index', i);
        // 給每一個小圓圈添加點擊事件
        li.addEventListener('click', function () {
            // 移除其他小圓圈的選中屬性
            for (var i=0; i < length; i++) {
                ol.children[i].className='';
            }
            // 設置當前選中小圓圈的選中屬性
            this.className='current';
            // 定義選中的小圓圈的索引
            var index=this.getAttribute('index');
            num=index;
            circle=index;
            animate(ul, -pictureWidth * index);
        });
        ol.appendChild(li);
    }
    ol.children[0].className='current';

    //===3.鼠標點擊右側按鈕一次，圖片往左播放一張，以此內推，左側按鈕同理；==// 為了實現無縫滾動，需要將第一張圖添加到最后一張圖中
    var lastLi=ul.children[0].cloneNode(true);
    ul.appendChild(lastLi);
    // 設置一個節流閥，防止按鈕在短時間內點擊過多
    var flag=true;
    arrowR.addEventListener('click', function () {
        if (flag) {
            flag=false;
            if (num==ul.children.length - 1) {
                ul.style.left=0;
                num=0;
            }
            num++;
            animate(ul, -pictureWidth * num, function () {
                flag=true;
            });
            circle++;
            if (circle==ol.children.length) {
                circle=0;
            }
            activateCircle(circle);
        }
    });

    arrowL.addEventListener('click', function () {
        if (flag) {
            flag=false;
            if (num==0) {
                num=ul.children.length - 1;
                ul.style.left=-num * pictureWidth + 'px';
            }
            num--;
            animate(ul, -num * pictureWidth, function () {
                flag=true;
            });
            if (circle==0) {
                circle=ol.children.length;
            }
            circle--;
            activateCircle(circle);
        }
    });

    // 排他法思想點亮小圓圈
    function activateCircle(index) {
        for (var i=0; i < ol.children.length; i++) {
            ol.children[i].className='';
        }
        ol.children[index].className='current';
    }

    // 實現輪播圖自動播放
    var timer=window.setInterval(function () {
        arrowR.click();
    }, 3000);
});

顯示效果：

輪播圖自動播放的原理是：設置一個定時器使用click（）函數模擬按鈕點擊事件；

輪播圖實現無縫滾動的原理是：將第一個圖動態加在最后一張圖上，當切到最后一張圖時，重新設置元素布局距離，再執行滑動動畫。

防止同一個按鈕在短時間內點擊次數過多，可以設置一個節流閥，將啟動節流閥的操作寫在動畫回調函數里，這樣只有當動畫執行完畢后才才可以重新恢復按鈕的點擊功能；

頁面滾動動畫可以使用函數：window.scroll(x,y)可以滾動至頁面的指定坐標位置；

最后：

本文配套源碼與素材獲取：https://gitee.com/yushengtan/jscode
關于JavaScript在網頁動畫中的使用就介紹到這里，下一節我們將繼續深入介紹JavaScript的異步調用相關知識的學習~

avaScript最初誕生于1995年，開始是為了處理由服務端語言負責的一些輸入驗證操作，減少與服務器的數據交換。現在的JavaScript已經成為一門功能全面的編程語言，能夠處理復雜的計算和交互，擁有了閉包、匿名(lamda)函數，甚至元編程等特性，已經成為Web的一個重要組成部分。

JavaScript從一個簡單的輸入驗證器發展成為一門強大的編程語言，是完全出乎人們的意料。嚴格來說它既是一門非常簡單的語言，又是一門非常復雜的語言。說它簡單，是因為學會使用它只需片刻功夫;而說它復雜，是因為要真正掌握它則需要數年時間。要想全面理解和掌握JavaScript，關鍵在于弄清楚發展歷史和本質。

1、JavaScript簡史

在JavaScript誕生的時代，網絡的速度還很慢，不像現在4G、5G這么普遍，百兆千兆寬帶進入千家萬戶，為完成簡單的表單驗證而頻繁地與服務器交換數據只會加重用戶的負擔，因此當時走在技術革新最前沿的Netscape公司，決定著手開發一種客戶端語言，用來處理這些簡單的驗證。

當時Netscape公司的布蘭登·艾奇(Brendan Eich)，開始著手為計劃于1995年2月發布的Netscape Navigator 2開發一種名為LiveScript的腳本語言，該語言將同時在瀏覽器和服務器中使用(它在服務器上的名字叫LiveWire)。為了趕在發布日期前完成LiveScript的開發，Netscape與Sun公司建立了一個開發聯盟。在Netscape Navigator 2正式發布前夕，Netscape為了搭上媒體熱炒Java的順風車，臨時把LiveScript改名為JavaScript。

由于JavaScript1.0獲得了巨大成功，Netscape隨即在Netscape Navigator3中又發布了JavaScript1.1。與此同時，微軟決定向與Navigator競爭的自家產品Internet Explorer瀏覽器投入更多資源。Netscape Navigator3發布后不久，微軟就在其Internet Explorer3中加入了名為JScript的JavaScript 實現。現在回頭看，微軟1996年8月為進入Web瀏覽器領域而實施的這個重大舉措，是導致Netscape日后蒙羞的一個標志性事件。然而，這件事也標志著JavaScript作為一門語言，其開發向前邁進了一大步。

微軟推出其JavaScript實現意味著有了兩個不同的JavaScript版本，由于當時還沒有標準規定JavaScript的語法和特性，兩個不同版本并存的局面已經完全暴露了這個問題。隨著業界擔心的日益加劇，JavaScript的標準化問題被提上了議事日程。

1997年，以JavaScript 1.1為藍本的建議被提交給了歐洲計算機制造商協會(ECMA)。該協會指定39號技術委員會(TC39) 負責“標準化一種通用、跨平臺、供應商中立的腳本語言的語法和語義”。他們經過數月的努力完成了 ECMA-262——定義一種名為 ECMAScript的新腳本語言的標準。自此以后，瀏覽器開發商就開始致力于將ECMAScript作為各自JavaScript實現的基礎，也在不同程度上取得了成功。

2、JavaScript實現

一個完整的JavaScript實現應該由下列三個不同的部分組成

核心(ECMAScript)

ECMAScript與Web瀏覽器沒有依賴關系，但是我們常用的Web瀏覽器只是ECMAScript實現可能的宿主環境之一。宿主環境不僅提供基本的ECMAScript實現，同時也會提供該語言的擴展，以便語言與環境之間對接交互。而這些擴展——如DOM，則利用ECMAScript的核心類型和語法提供更多更具體的功能，以便實現針對環境的操作。其他宿主環境如Node。

ECMA規定了一門語言的下列組成部分：

語法
類型
語句
關鍵字
保留字
操作符
對象

ECMAScript就是對實現該標準規定的各個方面內容的語言的描述。

文檔對象模型(DOM)

文檔對象模型(DOM，Document Object Model)是針對XML但經過擴展用于HTML的應用程序編程接口(API，Application Programming Interface)。DOM把整個頁面映射為一個多層節點結構。HTML或XML頁面中的每個組成部分都是某種類型的節點，這些節點又包含著不同類型的數據。

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

DOM1級(DOM Level 1)于 1998年10月成為W3C的推薦標準。DOM1級由兩個模塊組成:DOM核心(DOM Core)和 DOM HTML。其中，DOM核心規定的是如何映射基于XML的文檔結構，以便簡化對文檔中任意部分的訪問和操作。DOM HTML 模塊則在DOM核心的基礎上加以擴展，添加了針對HTML的對象和方法。

瀏覽器對象模型(BOM)

開發人員使用 BOM 可以控制瀏覽器顯示的頁面以外的部分。而 BOM 真正與眾不同的地方(也是經常會導致問題的地方)，還是它作為 JavaScript 實現的一部分但卻沒有相關的標準。這個問題在 HTML5 中得到了解決，HTML5 致力于把很多 BOM 功能寫入正式規范。HTML5 發布后，很多關于 BOM 的困惑煙消云散。

從根本上講，BOM只處理瀏覽器窗口和框架;但人們習慣上也把所有針對瀏覽器的JavaScript擴展算作BOM的一部分。下面就是一些這樣的擴展:

彈出新瀏覽器窗口的功能;
移動、縮放和關閉瀏覽器窗口的功能;
提供瀏覽器詳細信息的 navigator 對象;
提供瀏覽器所加載頁面的詳細信息的 location 對象;
提供用戶顯示器分辨率詳細信息的 screen 對象;
對cookies的支持;
像 XMLHttpRequest 和 IE 的 ActiveXObject 這樣的自定義對象。

由于沒有BOM標準可以遵循，因此每個瀏覽器都有自己的實現。雖然也存在一些事實標準，例如要有window對象和navigator對象等，但每個瀏覽器都會為這兩個對象乃至其他對象定義自己的屬性和方法。

3、JavaScript版本

作為Netscape“繼承人”的Mozilla公司，是目前唯一還在沿用最初的JavaScript版本編號序列的瀏覽器開發商。在Netscape將源代碼提交給開源的Mozilla項目的時候，JavaScript在瀏覽器中的最后一個版本號是1.3。后來，隨著Mozilla基金會繼續開發JavaScript，添加新的特性、關鍵字和語法，JavaScript的版本號繼續遞增。下表列出了JavaScript版本號對應各瀏覽器的遞增過程:

4、小結

JavaScript是一種專為與網頁交互而設計的腳本語言，由下列三個不同的部分組成:

ECMAScript，由ECMA-262定義，提供核心語言功能;
文檔對象模型(DOM)，提供訪問和操作網頁內容的方法和接口;
瀏覽器對象模型(BOM)，提供與瀏覽器交互的方法和接口。

JavaScript的這三個組成部分，在當前五個主要瀏覽器(IE、Firefox、Chrome、Safari和Opera)中都得到了不同程度的支持。

在線咨詢

上一篇：把HTML網頁下載為單文件，可離線訪問
下一篇：從0學爬蟲-頁面解析的幾種方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商