Day15 HTML補充、初識JavaScript

時間 2019-12-09

標籤 day15 day html 補充 javascript 欄目 HTML 简体版

原文原文鏈接

1、上節回顧javascript

上節回顧：

    HTML
        頭部信息：編碼、title、style、link（導入css文件）
        身體：
            內聯
            塊級
            --->inline-block(既有內聯效果又有塊級效果)

            a標籤：
                target、href（跳轉到url，#i1(id=i1跳轉到頂部)）
            img標籤：
                src alt
            iframe(僞Ajax，上傳文件)
                src
            form標籤
                action提交url；method提交方式：get和post；上傳文件：enctype="multipart/form-data"
            input系列
                text（普通文本）
                checkbox（複選框name相同，value不相同）
                    name=favor,value=1
                    name=favor,value=2
                    name=favor,value=3
                radio（單選框，互斥：name相同）
                textarea
                    默認值：
                    <textarea>123</textarea>
                button，無效果
                submit，提交當前form表單
                reset，重置當前form表單
                file
                password
                select標籤
                    option
                默認值：
                    <input value="123" />

    CSS
        存在形式：
            標籤屬性
            style塊
            文件
            最牛的：color:red !important:
        尋找：
            id選擇器
            class選擇器
            標籤選擇器（全部標籤均應用）
            層級選擇器
            組合選擇器
            屬性選擇器
        樣式：
            color，width，height
            width：想利用百分比的時候，須要在外部定義寬度
            background:
            透明度：0->1(透明-->不透明)
                opcity:0.6
                background:rgba(0,0,0,.6)
            position:
                fixed（相對窗口固定）
                absolute（定義位置時根據窗口位置，可是滾動時位置會變）
                relative（單獨沒有用，須要和absolute一塊兒使用）relative&&absolute
                z-index:越大越靠上
                頁面佈局：fixed菜單固定在頂部
            padding：
            margin：
            邊距補充
                input
                圖標(補充容許使用插件)
            ==========
            font awesome
            float:好方式
                :hover
                :after
                :before
            over-flow:hide

            網站：
                css:
                    .clearfix:after{
                        content: '.';
                        clear: both;
                        display: block;
                        visibility: hidden;
                        height:0;
                    }
                HTML:
                    <div class="clearfix">
                        <div style='float'>1</div>
                        <div style='float'>2</div>
                    </div>
            佈局：
                主站（w,居中）

View Code

一、注意img標籤css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--去掉img的邊框，不然在IE中會出現邊框-->
        img{
            border: 0px;
        }
    </style>
</head>
<body>
    <div>
        <div class="item">
            <a href="http://www.bing.com.cn">
                <!--alt的做用：若是圖片沒有找到，則顯示alt中的文字-->
                <img src="../img/1.jpg" alt="圖片">
            </a>
        </div>
    </div>
</body>
</html>

View Code

二、默認值html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--標籤默認值-->
    <input value="123" />
    <textarea>123</textarea>
    <select>
        <option>上海</option>
        <option selected="selected">西安</option>
        <option>背景</option>
    </select>
    女:<input type="radio" name="a1" checked="checked" />
    男:<input type="radio" name="a1" />

    <input type="checkbox" name="b1" checked="checked" />
    <input type="checkbox" name="b1" />
    <input type="checkbox" name="b1" checked="checked" />
    <input type="checkbox" name="b1" />

</body>
</html>

View Code

三、自定義優先級java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        /*自定義優先級!important*/
        .c2{
            color:green !important;
        }
        .c1{
            color:red;
        }

    </style>
</head>
<body>
    <div class="c1 c2">優先級高</div>

</body>
</html>

View Code

四、屬性選擇器python

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--屬性選擇器-->
    <style>
        .c1[aa="a"]{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <div class="c1" aa="a">1</div>
        <div class="c1" aa="b">2</div>
        <div class="c1" aa="a">3</div>
        <div class="c1">4</div>
    </div>
</body>
</html>

View Code

五、佈局填充按照百分比jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="pg-body" style="width: 980px;">
        <div style="width: 20%;float: left;background-color: aqua">哈哈哈</div>
        <div style="width: 80%;float: left;background-color: red">
            呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
        </div>
    </div>
</body>
</html>

View Code

六、頭部菜單編程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            background-color: red;
        }
        .pg-body{
            height: 2000px;
            margin-top: 60px;
        }
    </style>
</head>
<body>
    <div class="pg-header">頭部菜單</div>
    <div class="pg-body">hhahhaha </div>
</body>
</html>

View Code

七、登陸或註冊框中的小圖標數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .icon-name{
            background-image: url("../img/2.png");
            width: 16px;
            height: 16px;
            display: inline-block;
            background-color: red;
        }
    </style>
</head>
<body>
    <div style="width: 200px;position: relative">
        <input style="width: 180px; padding-right: 20px;"/>
        <span class="icon-name" style="position: absolute;top:2px;right: 0;"></span>
    </div>
</body>
</html>

View Code

八、css插件瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="plungins/font-awesome-4.6.3/css/font-awesome.css" />
</head>
<body>
    <i class="fa fa-blind" aria-hidden="true"></i>
    <i class="fa fa-glide-g" aria-hidden="true"></i>
</body>
</html>

View Code

九、清浮動clearfix閉包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:hover{
            background-color: red;
        }
        .c2:before{
            content: '222';
        }
        .c2:after{
            content: '777';
        }
        .left{
            background-color: green;
        }
        .clearfix{
            background-color: red;
        }
        .clearfix:after{
            content: '.';
            clear: both;
            display: block;
            visibility: hidden;
            height:0;
        }
    </style>
</head>
<body>
    <div class="c1">ssssss</div>
    <div class="c2">9999</div>

    <div style="background-color: blue" class="clearfix">
        <div class="left" style="height: 100px;background-color: #2459a2">1</div>
        <div class="left">2</div>
    </div>
</body>
</html>

View Code

十、清浮動補充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:hover{
            background-color: black;
        }
        .c2:before{
            content: '99999';
        }
        .c2:after{
            content: '88888';
        }
        .left{
            float: left;
        }
        .clearfix{
            background-color: red;
        }
        .clearfix:after{
            content: '.';
            clear: both;
            display: block;
            visibility: hidden;
            height:0;
        }
    </style>
</head>
<body>
    <div class="c1">哈哈哈哈哈哈哈</div>
    <div class="c2">呵呵呵呵呵呵</div>

    <div class="clearfix">
        <div class="left" style="height: 100px;background-color: green">111111</div>
        <div class="left">222222</div>
        <!--<div style="clear: both"></div>-->
    </div>
</body>
</html>

View Code

十一、尖角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--尖角，transparent：透明色-->
    <style>
        .item{
            display: inline-block;
            border-top: 35px solid black;
            border-right:  25px solid transparent;
            border-bottom:  25px solid transparent;
            border-left:  25px solid transparent;
        }
    </style>
</head>
<body>
    <div class="item"></div>
</body>
</html>

View Code

十二、佈局--滾動時，上、左菜單都不動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background-color: blue;
        }
        .pg-body .body-menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: red;
        }
        .pg-body .body-content{
            position: absolute;
            top: 48px;
            left: 210px;
            right: 0;
            /*bottom: 0;*/
            background-color: green;
        }
    </style>
</head>
<body>
    <!--滾動時，上、左菜單都不動-->
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="body-menu"></div>
        <div class="body-content">
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

View Code

1三、佈局--右側增長滾動條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background-color: blue;
        }
        .pg-body .body-menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: red;
        }
        .pg-body .body-content{
            position: absolute;
            top: 48px;
            left: 210px;
            right: 0;
            bottom: 0;
            background-color: green;
            overflow: auto;
        }
    </style>
</head>
<body>
    <!--右側增長滾動條overflow: auto-->
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="body-menu"></div>
        <div class="body-content">
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
            <br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>哈啊哈哈哈<br/>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

View Code

2、初識JavaScript

JavaScript
    編程語言，由瀏覽器編譯並運行
    一、存在形式
    二、放置位置
        body內部最下面
    三、變量
        var a = 133;局部變量
        a = 133;全局變量
    特別的，數字、布爾值、null、undefined、字符串是不可變的
    數字： abc = 123;
           parseInt(ab);//判斷是否爲數字
           parseFloat(ab);//判斷是否爲浮點數
           NaN：非數字
    字符串：
        trim()：移除空白
        trimLeft()、trimRight()
        charAt(n):返回字符串中的第n個字符
        indexOf(substring,start):子序列位置,從前日後
        lastIndexOf(substring,start):子序列位置,從後往前
        substring(from,to)：根據索引獲取子序列
        slice(start,end)：切片
        toLowerCase()、toUpperCase()、split()
        search()、match()、rplace()

    布爾類型：
    b = true;
    ==：比較值相等,類型能夠不一樣，慎用
    ===：類型和值都必須相同
    數組：
        a = [];
        a.push(123);//向尾部增長
        a.pop();//尾部獲取一個元素
        a.unshift(ele);頭部插入
        a.shift(ele);頭部移除
        obj.splice(start,deleteCount,value,...)插入、替換、刪除元素
        obj.splice()
        obj.reverse()
        obj.join()
        obj.concat(val,...):鏈接數組
        obj.sort()

    Python中join：
        li = ['w', 'a', 'n', 'g']
        "_".join(li)
    JS中：
        li = ['w', 'a', 'n', 'g'];
        li.join('_')

    JSON.stringify(obj)
    JSON.parse(str)

    轉義：
        URL:
            decodeURI()
            decodeURIComponent()
            encodeURI()
            encodeURIComponent()
        值：
            escape()
            unescape()
            URIError
    eval：eval+exec
    時間：  d = new Date()
            Sat Sep 24 2016 22:01:12 GMT+0800 (中國標準時間)
            d.getHours
            getHours() { [native code] }
            d.getHours()
            22
            d.getUTCHours()
            14
            d.setMinutes(d.getMinutes() + 2);
            1474725792567
            d
            Sat Sep 24 2016 22:03:12 GMT+0800 (中國標準時間)


    if(){

    }else if(){

    }else{

    }

    switch(name){
        case '1':
            age = 13;
            break
        case '2':
            age = 12;
            break
        default:
            age = 15;
    }

    while(條件){
        //break;
        //continue;
    }

    try{

    }
    catch(e){

    }
    finally{

    }

    主動拋異常
    python
        raise Exception(xxx)
    JavaScript
        throw new Error('abcdefg')


    函數：
        普通
        function func(arg){
            return true;
        }
        匿名
        var func = function(arg){
            return "hello";
        }
        自執行
        //定義函數並執行
        function f1(arg){
            alert(arg);
        }
        f1(123);
        //自執行函數，作封裝使用
        (function(arg){
            alert(arg);
        })(123)

    做用域：
        在Java或C#中存在塊級做用域
        一、在Python和JavaScript中無塊級做用域；
                JS6中定義了let，用於指定變量屬於塊級做用域

        二、在JS中每一個函數做爲一個做用域,在外部沒法訪問內部做用域的變量；
        三、因爲JS中每一個函數做爲一個做用域，若是出現函數嵌套函數，則就會出現做用域鏈。從內到外一層一層找；
        四、JS的做用域鏈在被執行以前已經建立；
            編譯函數的時候，發現有變量，則會建立變量var xxx;xxx的值爲undefined
            只有函數裏定義了變量纔會提早聲明，若是未找到函數使用的變量會報錯。
            做用域和python相似
        閉包：
            function f2(){
                var arg = [11,22,33,44];
                function f3(){
                    return arg;
                }
                return f3;
            }
            ret = f2();
            ret();

    xo = 'alex';
    function Func(){
        var xo = "eric";
        function inner(){
            console.log(xo);
        }
        xo = 'seven';
        return inner;
    }

    var ret = Func();
    ret();

    結果爲seven

    原型：
        prototype，全部的方法保存在原型裏

View Code

一、第一個JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="commons.js"></script>
    <script>
        alert(123);
    </script>
</head>
<body>
    <h1>123456789</h1>
</body>
</html>

View Code

commons.js

/**
 * Created by Administrator on 2016/9/24.
 */
alert(456);

View Code

註釋和定義函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1() {
            // i = 123; 單行註釋
            /*
            多行註釋
             */
            i = 12345;
        }
        function f2() {

        }
        f1();
        alert(i);
        var ab;
        alert(ab);
    </script>
</head>
<body>

</body>
</html>

View Code

二、跑馬燈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--跑馬燈-->
    <div id="i1" style="display: inline-block;background-color: green;color:white;">歡迎寶強蒞臨指導</div>
    <div id="i2" style="display: inline-block;background-color: green;color:white;">歡迎寶強蒞臨指導</div>
    <script>
        //定時器，1000ms
        setInterval('f1()',1000);
        function f1() {
            //js獲取某一個標籤id = i1
            var tag = document.getElementById('i1');
            //獲取標籤的內容
            var text = tag.innerText;
            var a = text.charAt(0);
            var sub = text.substring(1,text.length);
            var new_str = sub + a;
            tag.innerText = new_str;
        }
    </script>
</body>
</html>

View Code

三、地址編碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var url = "http://www.etiantian.org?n=王寶強";
        var ret = encodeURI(url);
        //alert(ret);
        console.log(ret);
        var u = decodeURI(ret)
        //alert(u);
        console.log(u);

        var r2 = encodeURIComponent(url);
        console.log(r2);
    </script>
</body>
</html>

View Code

四、循環

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var li = [11,22,33,44,55];
    //第一種for,i++、i--、i+2
    for(var i=0;i<li.length;i++){
        console.log(i,li[i]);
    }
    //第二種for
    for(var item in li){
        console.log(item,item[i]);
    }
    //循環字典
    var dic = {'k1':11, 'k2':22, 'k3':33, 'k4':44};
    for(var key in dic){
        console.log(key,dic[key]);
    }
</script>

</body>
</html>

View Code

五、匿名函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--匿名函數-->
    <script>
        setInterval(function () {
            alert(123);
        }, 1000);
    </script>
</body>
</html>

View Code

六、做用域

3、練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#i1").click(function () {
                $(this).hide(1000);
            });
            $("#show").click(function () {
                $("#i2").show();
            })
        });
    </script>
</head>
<body>
    <div id="i1" style="background-color: red;">jQuery練習點擊會隱藏</div>
    <div id="i2" style="display:none;background-color: blue;">點擊按鈕會顯示</div>
    <button id="show" type="button">點我顯示</button>
</body>
</html>