JavaScript學習筆記（續）

一、 JavaScript的組成
ECMAScript：JavaScript的語法標準
DOM：文檔對象模型
BOM：瀏覽器對象模型

二、 BOM
全稱 Browser Object Model 瀏覽器對象模型
window對象是JS中的頂級對象
所有定義在全局作用域中的變量、函數都會變成window對象的屬性和方法
window對象下的屬性和方法調用的時候可以省略window

三、window的方法
1. window.open(url,target,param)
url要打開的地址
target新窗口的位置
_blank _self _parent(父框架)
param心窗口的一些設置
2. window。close（）關閉窗口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>window-load</title>
        <!--js-->
        <script>
            //window方法anload,在頁面加載完成之后自動執行
            window.onload=function(){
                var show=document.getElementById("showDiv");
            alert(show);
            show.innerHTML="<h1>js動態寫入</h1>";
            }

        </script>
    </head>
    <body>
        <div id="showDiv"></div>
    </body>
</html>

四、 js獲取html標簽對象的方式
1. document.getElementById 通過id獲取
2. document.getElementsByTagName 通過標簽名獲取，返回值是數組
如var div = document.get…Name(“div”);
var div1 =div[0];//獲取數組中的第一個
3. documen.getElementsByClassName
通過class的值來獲取，為標簽添加class，
根據class的取值獲取標簽，返回值是數組

/*鼠標事件，獲取鼠標的位置*/
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #main{
                width:500px;
                height:500px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <h2 id="show_index">000:000</h2>
            <div id="main">
                <img width:"100px" height="100px" src="img/2.jpg" id="beauty" />
            </div>
            <script>
                var main = document.getElementById("main");
                var showIndex=document.getElementById("show_index");
                var girl=document.getElementById("beauty");
                //綁定鼠標事件
//              main.onmousedown
//              main.onmouseup
//匿名函數屬于另一個區域，event是發生在當前DOM中的事件，需要通過形參傳入匿名函數使用
main.onmousemove=function(event){
    var x=event.clientX;
    var y=event.clientY;
    showIndex.innerHTML=x+":"+y;
    main.style.position="absolute";
    girl.style.position="absolute";
    girl.style.left=(x-90)+"px";
    girl.style.top=(y-110)+"px";
    girl.style.width=(x-100)+100+"px";
    girl.style.height=(y-100)+100+"px";
    }
    </script>
    </body>
</html>

五、動態靈活的onclick設置方式
xx.onclick = function(){
//點擊事件的代碼
}

六、定時器
1. 循環執行（間隔多長時間反復執行）
setInterval(code,interval)
參數1：執行的代碼，可以使function函數
參數2：間隔的時間，毫秒為單位
2. 取消循環執行定時器
clearInterval(timerId);

/*定時器反復*/
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body background="img/ice.png" >
        <script>
            setInterval(recy,2000);
            function recy() {
                alert("小樣的，反不死你！");
            }   </script>

    </body>
</html>

七、編輯器
1. sublineText
2. atom（功能最強大的文檔編輯器，html，css，js，markdown）
3. 文檔編輯語言：markdown

八、 location
window.location
相當于瀏覽器的地址欄
通俗：在js代碼中想要獲取訪問網址的主機，端口號，協議，搜索字段等，通過location獲取
用戶統計分析（產品數據統計）

九、navigator
window.navigatory
獲取客戶端的信息，如瀏覽器的型號，操作系統型號

十、歷史記錄history
forward，back前進，返回等

十一、DOM文檔對象模型
document

十二、DOM可以做什么
找對象（元素）
設置元素的屬性，設置元素的樣式
img.src a.href屬性
xx.style.position樣式
動態創建的刪除元素
事件一觸發響應
事件源（時間的觸發者）
事件名稱
事件響應程序

練習：
1.點擊圖片，更換背景圖片。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
            height: 180px;
            padding-top: 30px;
            text-align: center;

        }
         body {
            background: url(img/10.jpg) no-repeat;
        }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="img/10.jpg" width="200px"/>
            <img src="img/20.jpg"width="200px" />
            <img src="img/30.jpg" width="200px"/>
            <img src="img/40.jpg" width="200px"/>
            <img src="img/50.jpg" width="200px"/>   
        </div>
        <script>

            var box=document.getElementsByTagName("div")[0];
            var body=document.body;
            var Arr=box.children;
            for(var i=0;i<Arr.length;i++)
            {
                Arr[i].index=i;
                Arr[i].onclick=function(){

                    body.style.backgroundImage = "url("+this.src+")";
                }
            }


        </script>
    </body>
</html>

2.隔行變色的表格（鼠標放上去行會變色）
這里寫圖片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
            text-align: center;
        }

        .wrap {
            width: 500px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }

        td {
            font: 14px "微軟雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
            cursor: pointer;
        }

        .current {
            background-color: red!important;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>序號</th>
                    <th>姓名</th>
                    <th>課程</th>
                    <th>成績</th>
                </tr>
            </thead>
            <tbody id="target">
                <tr>
                    <td>
                        1
                    </td>
                    <td>呂不韋</td>
                    <td>語文</td>
                    <td>100</td>

                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>呂布</td>
                    <td>日語</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>呂蒙</td>
                    <td>營銷學</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                    <td>呂尚</td>
                    <td>數學</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>
                        5
                    </td>
                    <td>呂雉</td>
                    <td>英語</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>
                        6
                    </td>
                    <td>呂超</td>
                    <td>體育</td>
                    <td>100</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        //需求：讓tr各行變色，鼠標放入tr中，高亮顯示。

        //1.隔行變色。
        var tbody = document.getElementById("target");
        var trArr = tbody.children;
        //循環判斷并各行賦值屬性（背景色）
        for(var i=0;i<trArr.length;i++){
            if(i%2!==0){
                trArr[i].style.backgroundColor = "#a3a3a3";
            }else{
                trArr[i].style.backgroundColor = "#ccc";
            }

            //鼠標進入高亮顯示
            //難點：鼠標移開的時候要回復原始顏色。
            //計數器（進入tr之后，立刻記錄顏色，然后移開的時候使用記錄好的顏色）
            var color = "";
            trArr[i].onmouseover = function () {
                //賦值顏色之前，先記錄顏色
                color = this.style.backgroundColor;
                this.style.backgroundColor = "#fff";
            }
            trArr[i].onmouseout = function () {
                this.style.backgroundColor = color;
            }
        }


    </script>


</body>
</html>

本文鏈接：https://blog.csdn.net/Soda_lw/article/details/75670563

智能推薦

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...

SpringMvc自定義類型轉換器步驟

...

JavaScript學習筆記（續）

智能推薦

猜你喜歡