javascript--DOM操作詳解大全一(瀏覽器對(duì)象)

客戶端中的window對(duì)象

  1. window對(duì)象表示當(dāng)前瀏覽器的窗口,它是一個(gè)頂級(jí)對(duì)象,我們創(chuàng)建的所有對(duì)象恢准、函數(shù)魂挂、變量都是window對(duì)象的成員。
  2. window對(duì)象自帶了一些非常有用的方法馁筐、屬性涂召。
window的子對(duì)象:
  • document:可操作顯示在窗口的文檔內(nèi)容。
  • location:可讓窗口載入新的URL敏沉。
  • navigator:包含當(dāng)前瀏覽器的信息果正。
  • history:包含當(dāng)前瀏覽器的歷史。
window的方法:
  • open():打開一個(gè)新的窗體盟迟。
  • close():關(guān)閉窗體舱卡。
  • window對(duì)話框函數(shù):
  • alert():彈出消息對(duì)話框(對(duì)話框中只有一個(gè)OK按鈕)。
  • confirm():彈出消息對(duì)話框(對(duì)話框中包含一個(gè)OK按鈕與Cancel按鈕)队萤。
  • prompt():彈出消息對(duì)話框(對(duì)話框中包含一個(gè)OK按鈕轮锥、Cancel按鈕與一個(gè)文本輸入框)。
web文檔里使用Javascript
  1. Javascript程序可以操作文檔對(duì)象(window.document,通常window可以省略)要尔,遍歷和管理文檔內(nèi)容舍杜,改變CSS的樣式,注冊(cè)適當(dāng)?shù)氖录砀淖兾臋n元素的行為赵辕。
  2. Javascript可增強(qiáng)用戶瀏覽web文檔的體驗(yàn)既绩。
  3. Javascript可操作XMLHttpRequest對(duì)象,實(shí)現(xiàn)從服務(wù)器獲取新信息还惠,而不重新載入頁面饲握。通常叫Ajax應(yīng)用
html中嵌入script代碼簡單示例
<html>
  <head>
    <script>
      function showTime(){
        var ele = document.getElementById('clock');//通過id=clock獲取文檔元素
        var d = new Date();//取得當(dāng)前時(shí)間
        console.log(ele);
        ele.innerHTML = d.toLocaleTimeString();//轉(zhuǎn)換為本地時(shí)間
        setTimeout(showTime,1000);//定時(shí)調(diào)用
      }
 
    </script>
    <style>
      #clock{
        font:bold 26pt;
      }
    </style>
  </head>
  <body onload="showTime();">
    <h1>顯示當(dāng)前時(shí)間:</h1>
    <span id="clock"></span>
  </body>
</html>

javascript代碼可以放置在html屬性里來定義事件處理程序。如onclick蚕键,onchange事件等救欧。

<html>
  <head>
    <script>
       
    </script>
  </head>
 <body>
   <input type="checkbox" name="sex" value="男" onchange="alert(this.checked);"/>男
 </body>
</html>
javascript執(zhí)行順序
javascript程序執(zhí)行有兩個(gè)階段锣光。
  • 第一階段笆怠,載入文檔內(nèi)容,并執(zhí)行<script>元素里的代碼誊爹,按javascript代碼順序從上往下執(zhí)行蹬刷。
  • 第二階段,此階段是異步的频丘,而且由事件驅(qū)動(dòng)办成。事件驅(qū)動(dòng)階段里發(fā)生的第一個(gè)事件是onload事件,表示文檔已經(jīng)載入完成
javascript的線程模型
  • javascript中沒有任何關(guān)于線程的定義搂漠,也就是javascript是按單線程一樣工作迂卢,單線程執(zhí)行是為讓編程更加簡單。
  • 當(dāng)響應(yīng)用戶的某個(gè)事件處理過程中,如果過程復(fù)雜可能導(dǎo)致瀏覽器會(huì)變的無響應(yīng)冷守。所以我們?cè)谔幚頃r(shí)要反饋用戶當(dāng)前瀏覽器是正在活動(dòng)刀崖,以獲得最好的用戶體驗(yàn)。
  • 如果有些計(jì)算而導(dǎo)致明顯的延遲拍摇,應(yīng)在文檔完全載入后做計(jì)算亮钦,也可用setTimeout()或setInterval()方法在后臺(tái)運(yùn)行子任務(wù)。
  • 可通過setTimeout()可以把計(jì)算任務(wù)分成若干個(gè)小任務(wù)來執(zhí)行充活,提高頁面的響應(yīng)能力蜂莉。
<html>
  <head>
    <script>
        //判斷質(zhì)數(shù)
        var MAX = 1000000;
        function isPrime(n) {
          if (n == 0 || n == 1) {
              return false;
          }
          var bound = Math.floor(Math.sqrt(n));
          for (var i = 2; i <= bound; i++) {
             if (n % i == 0) {
                 return false;
             }
          }
          return true;
       }
    var jobs = 10, numberPerJob = Math.ceil(MAX / jobs);
    var count = 0;
     
    function calculate(start, end) {
        for (var i = start; i <= end; i++) {
            if (isPrime(i)) {
                count++;
            }
        }
    }
     
    var start, end, timeout, finished = 0;
    function manage() {
        if (finished == jobs) {
            window.clearTimeout(timeout);
            alert("計(jì)算完成,質(zhì)數(shù)個(gè)數(shù)為:" + count);
        }
        else {
            start = finished * numberPerJob + 1,
                end = Math.min((finished + 1) * numberPerJob, MAX);
            timeout = window.setTimeout(function() {
                calculate(start, end);
                finished++;
                manage();
            }, 100);
        }
    }
     
    manage();
       
 
    </script>
  </head>
  <body>
    <h1>有大量的計(jì)算混卵,頁面立即顯示出來映穗,大量的計(jì)算在后臺(tái)運(yùn)行。</h1>
  </body>
</html>
兼容性

測(cè)試網(wǎng)站來測(cè)試瀏覽器的兼容性:http://www.quirksmode.org/dom/core/

  1. javascript編程中很多是不兼容性都是針對(duì)的IE的幕随。
  2. 可以用IE支持的條件注釋來處理對(duì)IE的不兼容蚁滋。
  3. 條件注釋可以應(yīng)用到j(luò)s,css,內(nèi)容
<html>
  <head>
    <!--[if lt IE 9]>
        <script type="text/javascript" src="http://www.itbegin.com/commonscripts/bootstrap/html5shiv.min.js?20150301" ></script>
<![endif]-->
  </head>
  <body>
    <!--[if IE 6]>
        這是IE6顯示的內(nèi)容
    <![endif]-->
    <!--[if !IE ]><-->
        這不是IE要顯示的內(nèi)容
    <!--><![endif]-->
  </body>
</html>

javascript框架

  • jQuery是當(dāng)前最流行的框架之一。
    http://jquery.com/
  • Prototype與jQuery類似赘淮,是專門針對(duì)DOM和Ajax實(shí)現(xiàn)的實(shí)用工具辕录。
    http://prototypejs.org/
  • Dojo是一個(gè)大型的框架,它包含一個(gè)UI組件集合梢卸、包管理系統(tǒng)走诞、數(shù)據(jù)抽象層等。
    http://dojotoolkit.org/
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蛤高,一起剝皮案震驚了整個(gè)濱河市蚣旱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌戴陡,老刑警劉巖塞绿,帶你破解...
    沈念sama閱讀 218,525評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異猜欺,居然都是意外死亡位隶,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門开皿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人篮昧,你說我怎么就攤上這事赋荆。” “怎么了懊昨?”我有些...
    開封第一講書人閱讀 164,862評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵窄潭,是天一觀的道長。 經(jīng)常有香客問我酵颁,道長嫉你,這世上最難降的妖魔是什么月帝? 我笑而不...
    開封第一講書人閱讀 58,728評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮幽污,結(jié)果婚禮上嚷辅,老公的妹妹穿的比我還像新娘。我一直安慰自己距误,他們只是感情好簸搞,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著准潭,像睡著了一般趁俊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上刑然,一...
    開封第一講書人閱讀 51,590評(píng)論 1 305
  • 那天寺擂,我揣著相機(jī)與錄音,去河邊找鬼泼掠。 笑死怔软,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的武鲁。 我是一名探鬼主播爽雄,決...
    沈念sama閱讀 40,330評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼沐鼠!你這毒婦竟也來了挚瘟?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,244評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤饲梭,失蹤者是張志新(化名)和其女友劉穎乘盖,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體憔涉,經(jīng)...
    沈念sama閱讀 45,693評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡订框,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了兜叨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片穿扳。...
    茶點(diǎn)故事閱讀 40,001評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖国旷,靈堂內(nèi)的尸體忽然破棺而出矛物,到底是詐尸還是另有隱情,我是刑警寧澤跪但,帶...
    沈念sama閱讀 35,723評(píng)論 5 346
  • 正文 年R本政府宣布履羞,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏忆首。R本人自食惡果不足惜爱榔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望糙及。 院中可真熱鬧详幽,春花似錦、人聲如沸丁鹉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽揣钦。三九已至雳灾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間冯凹,已是汗流浹背谎亩。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評(píng)論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留宇姚,地道東北人匈庭。 一個(gè)月前我還...
    沈念sama閱讀 48,191評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像浑劳,于是被迫代替她去往敵國和親阱持。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 一.客戶端中的window對(duì)象 window對(duì)象表示當(dāng)前瀏覽器的窗口魔熏,它是一個(gè)頂級(jí)對(duì)象衷咽,我們創(chuàng)建的所有對(duì)象、函數(shù)蒜绽、...
    nightZing閱讀 427評(píng)論 0 1
  • 一镶骗、JS前言 (1)認(rèn)識(shí)JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示)躲雅,會(huì)使用HT...
    凜0_0閱讀 2,772評(píng)論 0 8
  • window對(duì)象是所有客戶端JavaScript特性和API的主要接入點(diǎn)鼎姊。 常用方法 alert 彈出一個(gè)對(duì)話框用...
    亮亮叔家的小筆筆閱讀 866評(píng)論 0 2
  • 第1章 認(rèn)識(shí)JS JavaScript能做什么?1.增強(qiáng)頁面動(dòng)態(tài)效果(如:下拉菜單相赁、圖片輪播相寇、信息滾動(dòng)等)2.實(shí)現(xiàn)...
    mo默22閱讀 1,292評(píng)論 0 5
  • 1.狗兒搖尾乞憐 風(fēng)繞花海游蕩 縹緲若無的歌聲 只有你在觀望 2.漁人哼著柔曲 檣櫓擊出節(jié)奏 蘆葦蕩里激起的漣漪 ...
    示子小姐閱讀 394評(píng)論 7 16