【Python之路Day16】前端知識篇之Dom、JQuery

時間 2019-11-18

標籤 Python之路Day16 前端知識 dom jquery 欄目 HTML 简体版

原文原文鏈接

Dom

文檔對象模型（Document Object Model，縮寫DOM），是W3C組織推薦的處理可擴展置標語言的標準編程接口。javascript

HTML DOM 定義了訪問和操做 HTML 文檔的標準方法。
DOM 將 HTML 文檔表達爲樹結構。php

咱們最爲關心的是，DOM把網頁和腳本以及其餘的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。html

1. HTML DOM 樹

2.查找元素

一、直接查找

<script>
    document.getElementById('id');              //根據ID獲取一個標籤,在文檔中改值必須惟一
    document.getElementsByName('name');          //根據name屬性獲取標籤集合,相似於id,name是給元素分配名字,但區別於ID,不是必須惟一.
    document.getElementsByClassName('classname');  //根據class屬性獲取標籤集合
    document.getElementsByTagName('div');            //根據標籤名獲取標籤集合元素
    #nav;    //id=nav的元素    經過CSS選擇器選取元素
    div;     //全部<div>元素    經過CSS選擇器選取元素
    .warning;  //全部在class屬性之中包含了warnning的元素  經過CSS選擇器選取元素
    //也能夠使用屬性選擇器:
    p[lang='en'];   //全部使用英文的段落 如<p lang='en'>
    *[name='tom']   //全部包含name=tom的屬性的元素
    
    //組合使用:
    div, #log  //全部<div>元素,以及id=log的元素
    
    //文檔中的全部的元素, document.all()
    document.all[0] //文檔中的第一個元素
    document.all["navbar"]  //id或name未navbar的元素
    
</script>

2. 間接查找

parentNode          // 父節點
childNodes          // 全部子節點
firstChild          // 第一個子節點
lastChild           // 最後一個子節點
nextSibling         // 下一個兄弟節點
previousSibling     // 上一個兄弟節點
 
parentElement           // 父節點標籤元素
children                // 全部子標籤
firstElementChild       // 第一個子標籤元素
lastElementChild        // 最後一個子標籤元素
nextElementtSibling     // 下一個兄弟標籤元素
previousElementSibling  // 上一個兄弟標籤元素

3. 節點和元素的區別

Node: 既包含元素又包含內容
Element：只包含元素

PS：換行也是元素java

4. 操做

1) 值

innerText     //文本
outerText    //
outerHTML     //
innerHTML   //HTML內容value           // 值

<body>
    <div id="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        var tag = document.getElementById('hehe');
        console.log(tag.innerText);
    </script>
</body>

//代碼執行結果：
1

2

3

innerText

<body>
    <div id="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        var tag = document.getElementById('hehe');
        console.log(tag.innerHTML);
    </script>
</body>

//執行結果;

        <p>1</p>
        <p>2</p>
        <p>3</p>

innerHTML

<body>
    <div id="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        var tag = document.getElementById('hehe');
        console.log(tag.value);
    </script>
</body>
//結果：
undefined

value

<body>
    <div id="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        var tag = document.getElementById('hehe');
        console.log(tag.outerHTML);
    </script>
</body>

//結果：
<div id="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>

outerHTML

2) Class操做

className      //獲取全部類名
classList.add   //添加類
classList.remove     //刪除類

<body id="body" class="Iambody">
    <div class="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <div class="haha">
        <a>4</a>
        <a>5</a>
    </div>
    <script>
        var tag = document.getElementById('body');
        var a = tag.className;
        console.log(a);
    </script>
</body>

//結果：
Iambody

className

<body id="body" class="Iambody">
    <div class="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <div class="haha">
        <a>4</a>
        <a>5</a>
    </div>
    <script>
        var tag = document.getElementById('body');
        var a = tag.className;
        tag.classList.add('NewClass');
        console.log(tag);
    </script>
</body>

//結果：
<body id="body" class="Iambody NewClass">
    <div class="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <div class="haha">
        <a>4</a>
        <a>5</a>
    </div>
    <script>
        var tag = document.getElementById('body');
        var a = tag.className;
        tag.classList.add('NewClass');
        console.log(tag);
    </script>

</body>

classList.add

<body id="body" class="Iambody">
    <div class="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <div class="haha">
        <a>4</a>
        <a>5</a>
    </div>
    <script>
        var tag = document.getElementById('body');
        var a = tag.className;
        tag.classList.add('NewClass');
        tag.classList.remove('Iambody');
        console.log(tag);
    </script>
</body>


//執行結果：
<body id="body" class="NewClass">
    <div class="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <div class="haha">
        <a>4</a>
        <a>5</a>
    </div>
    <script>
        var tag = document.getElementById('body');
        var a = tag.className;
        tag.classList.add('NewClass');
        tag.classList.remove('Iambody');
        console.log(tag);
    </script>

</body>

classList.remove

3）屬性

//獲取屬性：
    getAttribute(屬性名)
//設置屬性：
    setAttribute(屬性名)
//移除屬性：
    removeAttribute(屬性名)
//全選，反選，取消的時候用：
    tb.checked = true || flase;
    PS: 不要和上述的幾個屬性混搭，不然會出bug；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全選" onclick="CheckAll();"/>
    <input type="button" value="取消" onclick="Cancel();"/>
    <input type="button" value="反選" onclick="Reverse();"/>
    <table border="1px">
        <thead>
            <tr>
                <th>序號</th>
                <th>巴拉</th>
                <th>PIUPIU</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
        </tbody>

        <script>
            function CheckAll(){
                //先找到表格內容
                var tb = document.getElementById('tb');
                var tr = tb.children;
                console.log(tr);
                //然後循環
                for(i=0;i<tr.length;i++){
                    //console.log(tr[i].firstElementChild.firstElementChild);
                    ck = tr[i].firstElementChild.firstElementChild;
                    //ck.setAttribute('checked','checked');
                    //也能夠使用
                    ck.checked = true;
                }
            }
            function Cancel(){
                //先找到表格內容
                var tb = document.getElementById('tb');
                var tr = tb.children;
                console.log(tr);
                //然後循環
                for(i=0;i<tr.length;i++){
                    //console.log(tr[i].firstElementChild.firstElementChild);
                    ck = tr[i].firstElementChild.firstElementChild;
                    //ck.removeAttribute('checked');
                    //也能夠使用
                    ck.checked = false;
                }
            }
            function Reverse(){
                //先找到表格內容
                var tb = document.getElementById('tb');
                var tr = tb.children;
                console.log(tr);
                //然後循環
                for(i=0;i<tr.length;i++){
                    //console.log(tr[i].firstElementChild.firstElementChild);
                    ck = tr[i].firstElementChild.firstElementChild;
                    //console.log(ck.checked);
                    if(ck.checked){
                        ck.checked=false;
                    }else{
                        ck.checked=true;
                    }

                    //也能夠使用ck.checked = true;
                }
            }
        </script>
    </table>
</body>
</html>

全選、反選、取消Demo

4）實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <input type="text" id="i1"  value="請輸入關鍵字" onfocus="Focus();" onblur="Blur();" />
        <input id="i2" type="text" value="提交"/>
    <script type="text/javascript">
        //捕捉焦點
        function Focus(){
            var tag = document.getElementById("i1");
            if(tag.value == '請輸入關鍵字'){
                tag.value = '';
                console.log('focus');
            }
        }
        //失去焦點時的函數操做
        function Blur(){
            var tag = document.getElementById("i1");
            var va = tag.value.trim();
            if(va.length == 0){
                tag.value = '請輸入關鍵字';
                console.log('blur');
            }
        }

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

搜索框-輸入關鍵字，點擊後消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            position: relative;
            padding: 30px;
        }
        /*.item span{*/
            /*position: absolute;*/
            /*top: 30px;*/
            /*left: 52px;*/
            /*opacity: 1;*/
        /*}*/
    </style>
</head>
<body>
    <div class="item">
        <a onclick="Favor(this);">贊1</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">贊2</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">贊3</a>
    </div>

    <script>
        function Favor(ths){
            //ths==> 形參this, ==> 誰觸發事件就是誰
            console.log(ths);
            //添加span標籤


            var position = 'absolute';
            var top = 30;
            var left = 52;
            var opacity= 1;
            var fontSize = 10;

            var tag = document.createElement('span');
            //+1內容
            tag.innerText = '+1';
            tag.top = top + "px";
            tag.left = left + "px";
            tag.opacity = opacity;
            tag.fontSize = fontSize + "px";
            tag.position = position;

            //獲取父標籤,追加tag
            ths.parentElement.appendChild(tag);

            //建立定時器
            var interval = setInterval(function () {
                top -= 10;
                left += 10;
                opacity -= 0.1;
                fontSize += 5;
                //從新賦值
                tag.style.top = top + "px";
                tag.style.left = left + "px";
                tag.style.opacity = opacity;
                tag.style.fontSize = fontSize + "px";
                tag.style.position = position;


                if(opacity == 0){
                    //移除定時器
                    clearInterval(interval);
                    //移除+1標籤
                    ths.parentElement.removeChild(tag);
                }
            },50);
        }
    </script>
</body>
</html>

點贊 Demo

計時器：
    setInterval(funcation(){

    },50)
    clearInterval()
定時器：
    setTimeout()
    clearTimeout()
建立標籤， 定時器(大小，位置，透明度)
1. this ， 特殊的形參--》 觸發事件的標籤
2. createElement
3. appendChild
4. setInterval建立定時器
    clearInterval刪除定時器
5. removeChild

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none !important;
        }
        .shadow{
            position: fixed;
            top:0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: rgba(0,0,0,.6);
            z-index:100;
        }
        .modal{
            background-color: aliceblue;
            height: 200px;
            width: 400px;
            position: fixed;
            left:50%;
            top:50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 101;
        }
    </style>
</head>
<body>
    <div style="height: 2000px; background-color: #dddddd; margin: 0">
        <input  type="button" value="點我呀,點我呀!" onclick="ShowModal();"/>

    </div>
    <div id="shadow" class="shadow hide"></div>
    <div id="modal" class="modal hide">
        <!--若是a標籤什麼都不作的話,就是用下面的語法javascript:void(0);來作佔位符,相似於Python中的pass;-->
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>

    <script>
        function ShowModal(){
            var t1 = document.getElementById('shadow');
            var t2 = document.getElementById('modal');
            t1.classList.remove('hide')
            t2.classList.remove('hide')
        }
        function HideModal(){
            var t1 = document.getElementById('shadow');
            var t2 = document.getElementById('modal');
            t1.classList.add('hide')
            t2.classList.add('hide')
        }

    </script>

</body>
</html>

模態對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .backtop{
            position: fixed;
            right: 20px;
            bottom:20px;
            color:red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<!--返回頂部實例-->
<body onscroll="BodyScroll();">
    <div style="height: 2000px;background-color: #dddddd"></div>
    <div id="back" class="backtop hide" onclick="BackTop();">返回頂部</div>

    <script>
        function BackTop(){
            document.body.scrollTop = 0;   //直接返回頂部
        }
        function BodyScroll(){
            console.log('heihei');
            var tag = document.getElementById('back');
            var s = document.body.scrollTop;
            if(s >= 100){     //距離頂部大於100像素的時候顯示, 顯示時只要移除hide樣式便可
                tag.classList.remove('hide');
            }else{
                tag.classList.add('hide');
            }

        }

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

scrollTop返回頂部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="status" style="color:red;"></div>
    <input type="button" onclick="DeleteEmail();" value="刪除所選郵件"/>

    <script>
        function DeleteEmail(){
            var tag = document.getElementById('status');
            tag.innerText="刪除成功";
            setTimeout(function(){
                tag.innerText = '';
            },5000)
        }


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

定時器效果之刪除郵件提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--檢驗用戶輸入是否合法-->
<body>
    <form action="http://www.baidu.com/">
        <input type="text" id="username">
        <input type="submit" value="提交" onclick="return SubmitForm();"/>
        <!--onclick中的return意義在於, 若是執行函數返回值是true的話,繼續執行,若是爲False的話,會中斷執行,再也不日後繼續-->

    </form>
    <script>
        function SubmitForm(){
            var user = document.getElementById('username');
            if(user.value.length > 0){
                //能夠提交
                return true;
            }else{
                //輸入爲空,不能提交
                alert('用戶輸入用戶名不能爲空!');
                return false;
            }
        }
    </script>

</body>
</html>

用戶輸入檢查合法性輸入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 600px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
    </style>
</head>
<body>
<div class="menu">
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜單一</div>
            <div class="body">
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
                <p>內容一</p>
            </div>

        </div>
        <div class="item">

            <div class="title"  onclick="ShowMenu(this);">菜單二</div>
            <div class="body hide">
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
                <p>內容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title"  onclick="ShowMenu(this);">菜單三</div>
            <div class="body hide">
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
                <p>內容三</p>
            </div>

        </div>
    </div>

    <script src="plugin/jquery-1.12.4.js"></script>
    <script>
        function ShowMenu(ths){
            //將Dom轉換爲JQuery --> $(ths)
            //先找到下一個標籤,移除hide
            $(ths).next().removeClass('hide');
            //找到父標籤,再找到父標籤的兄弟標籤,然後找全部父標籤中的子子孫孫中查找body,添加hide
            $(ths).parent().siblings().find('.body').addClass('hide');
        }
    </script>

</body>
</html>

分級菜單顯示

5）標籤操做

建立標籤jquery

// 方式一, 對象方式建立,也是推薦的方式
var tag = document.createElement('a');
tag.innerText = "Tom";
tag.className = "c1";
tag.href = "http://www.cnblogs.com/dbq";
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/dbq'>Tom</a>";

操做標籤編程

    <div id ='pa'>piupiupiu</div>
    <script>
        var p = document.getElementById('pa');
        var obj = "<input type='text' />";
        p.insertAdjacentHTML('beforeEnd',obj);
        p.insertAdjacentElement('afterBegin',document.createElement('p'));

    </script>

//注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

//執行結果：
<div id="pa"><p></p>piupiupiu<input type="text"></div>


//方式二：
<div id ='pa'>piupiupiu</div>
<script>
        var p = document.getElementById('pa');
        var tag = document.createElement('a');
        p.appendChild(tag);
        p.insertBefore(tag,p[1]);
</script>
//執行結果        
<div id="pa">piupiupiu<a></a></div>

6）樣式操做

    <div id="hehe">hehehe</div>
    <script>
        var tag = document.getElementById('hehe');
        tag.style.fontSize = '30px';
        tag.style.color = 'green';
    </script>

7) 位置操做

總文檔高度
document.documentElement.offsetHeight
  
當前文檔佔屏幕高度
document.documentElement.clientHeight
  
自身高度
tag.offsetHeight
  
距離上級定位高度
tag.offsetTop
  
父定位標籤
tag.offsetParent
  
滾動高度
tag.scrollTop
 
/*
    clientHeight -> 可見區域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可見區域：height + padding + border
    offsetTop    -> 上級定位標籤的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滾動高度
    特別的：
        document.documentElement代指文檔根節點
*/

8) 提交表單

    <input id='form' type="text" /> 
   
    <script>
        document.getElementById('form').submit();
    </script>

9) 其餘操做

console.log                 輸出框
alert                       彈出框
confirm                     確認框
  
// URL和刷新
location.href               獲取URL
location.href = "url"       重定向
location.reload()           從新加載
  
// 定時器
setInterval                 屢次定時器
clearInterval               清除屢次定時器
setTimeout                  單次定時器
clearTimeout                清除單次定時器

10) 事件，很是重要

屬性	當如下狀況發生時，出現此事件	FF	N	IE
onabort	圖像加載被中斷	1	3	4
onblur	元素失去焦點	1	2	3
onchange	用戶改變域的內容	1	2	3
onclick	鼠標點擊某個對象	1	2	3
ondblclick	鼠標雙擊某個對象	1	4	4
onerror	當加載文檔或圖像時發生某個錯誤	1	3	4
onfocus	元素得到焦點	1	2	3
onkeydown	某個鍵盤的鍵被按下	1	4	3
onkeypress	某個鍵盤的鍵被按下或按住	1	4	3
onkeyup	某個鍵盤的鍵被鬆開	1	4	3
onload	某個頁面或圖像被完成加載	1	2	3
onmousedown	某個鼠標按鍵被按下	1	4	4
onmousemove	鼠標被移動	1	6	3
onmouseout	鼠標從某元素移開	1	4	4
onmouseover	鼠標被移到某元素之上	1	2	3
onmouseup	某個鼠標按鍵被鬆開	1	4	4
onreset	重置按鈕被點擊	1	3	4
onresize	窗口或框架被調整尺寸	1	4	4
onselect	文本被選定	1	2	3
onsubmit	提交按鈕被點擊	1	2	3
onunload	用戶退出頁面	1	2	3

對於事件須要注意的要點：windows

this
event
事件鏈以及跳出

this標籤當前正在操做的標籤，event封裝了當前事件的內容。數組

實例：瀏覽器

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' >
        <title>擁有時不知珍惜，失去時方覺惋惜。——請珍惜每一滴水。&nbsp;&nbsp;</title>
        <script type='text/javascript'>
            function Go(){
                var content = document.title;
                var firstChar = content.charAt(0)
                var sub = content.substring(1,content.length)
                document.title = sub + firstChar;
            }
            setInterval('Go()',1000);
        </script>
    </head>
    <body>
    </body>
</html>

Title輪播

onfocus, 獲取焦點， 等於一個函數，就是捕捉
onblur, 離開焦點
onclick, 點擊

1. this, 當前觸發事件的標籤
2. 全局事件綁定， windows.onKeyDown = funcation();
3. event, 特殊參數，包含了事件的相關的內容
4. 默認事件
    好比a標籤默認動做，跳轉
    好比submit默認動做，提交
    優先級：
        自定義優先級比默認優先級高，如：a、submit標籤
        checkbox的是默認事件先執行，自定義事件後執行


<input type="submit" value="提交" onclick="return SubmitForm();"/>
<!--onclick中的return意義在於, 若是執行函數返回值是true的話,繼續執行,若是爲False的話,會中斷執行,再也不日後繼續-->

PS: 若是a標籤什麼都不作的話,就是用下面的語法javascript:void(0);來作佔位符,相似於Python中的pass; app

jQuery

jQuery是一個類庫(Python中的叫作模塊)，jQuery能幫助咱們在文檔中找到關心的元素，而且對這些元素進行操做：添加內容、編輯HTML屬性和CSS屬性、定義事件處理程序，以及執行動畫。還擁有Ajax工具來動態發起HTTP請求，以及一些通用的工具函數來操做對象和數組。

jQuery基礎：

jQuery蒂尼了一個全局函數：jQuery()，在類庫的使用中，還有一個快捷別名： $ ,這是惟一的兩個變量。

var divs = $("div")
//返回0個或多個DOM元素，這就是jQuery對象。

版本：

1.12.. --> ..
2.x --- IE9已再也不支持，so，建議使用1.12

查找

選擇器

基本選擇器
#id id選擇器
element 標籤選擇器
.class 類選擇器
* 全部
#i1,#i2,#i3 組合選擇器

層級選擇器：

中間有空格，層級選擇器 #i1 .c1就是從 #i1中的的子子孫孫中找
> 從兒子中找
+next 下一個
~sibilant 兄弟中找

操做：

CSS
屬性的操做

html()
text()
val()

文本的操做

事件

底層同樣，可是在此基礎上JQuery還作了優化
1. 如何使用JQuery綁定
2. 當文檔加載完畢後，自動執行！ ###重要！

$(function(){
...
})

3. 延遲綁定：

$("ul").delegate("l1","click",funcation(){
...
})

現增長，現綁定

PS: 必定要先找到父標籤，ul，至關於選擇器
4. return false; 後面也就不提交了，和Dom裏同樣；

擴展：

$.xxx來執行，如 $.login
form表單驗證

Ajax：

AJAX即「Asynchronous JavaScript and XML」（異步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。Ajax的概念由傑西·詹姆士·賈瑞特所提出
大白話：偷偷發請求

執行JQuery：

JQuery.xxx
$.xxx

JQuery的循環

.each()

更多>>>

參考：

　　http://www.cnblogs.com/wupeiqi/articles/5643298.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。