web前端【第八篇】JS的DOM對象二

阿新 • • 發佈：2018-02-20

purple 事件類型湖北省常用 web -h png 自己 string

一、節點操作

創建節點：var ele_a = document.createElement(‘a‘);
添加節點：ele_parent.appendChild(ele_img);
刪除節點：ele_parent.removeChild(ele_p);
替換節點：ele_parent.replaceChild(新標簽,舊標簽);

//具體的節點操作實例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>節點操作</title>
    <style>
        .c1 {
            width: 300px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="c1">
    <p id="p1">年後</p>
    <p id="p2">hello</p>
</div>
<button class="addBtn">ADD</button>
<button class="delBtn">DEL</button>
<button class="replaceBtn">Replace</button>
<ul>
    <li>創建節點：var ele_a = document.createElement(‘a‘);</li>
    <li>添加節點：ele_parent.appendChild(ele_img);</li>
    <li>刪除節點：ele_parent.removeChild(ele_p);</li>
    <li>替換節點：ele_parent.replaceChild(新標簽,舊標簽);</li>
</ul>
<table border="1">
    <tbody id="t1">
        <tr>
            <td><input type="checkbox"></td>
            <td><input type="text"></td>
            <td><button class="delbtn">del1</button></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><input type="text"></td>
            <td><button class="delbtn">del2</button></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><input type="text"></td>
            <td><button class="delbtn">del3</button></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><input type="text"></td>
            <td><button class="delbtn">del4</button></td>
        </tr>
    </tbody>
</table>
<script>
    var ele_add = document.getElementsByClassName(‘addBtn‘)[0];
    var ele_del = document.getElementsByClassName(‘delBtn‘)[0];
    var ele_repleace = document.getElementsByClassName(‘replaceBtn‘)[0];
    console.log(ele_add);
    //綁定的添加節點的事件
    ele_add.onclick = function () {
        //先創建一個標簽
        var ele_a = document.createElement(‘a‘);
        console.log(ele_a); //<a></a>
        ele_a.innerHTML = ‘點擊‘; //<a>點擊</a>
        ele_a.href = ‘http://www.baidu.com‘; //<a href=‘http://www.baidu.com‘>點擊</a>
        //先創建一個標簽
        var ele_img = document.createElement(‘img‘);
        ele_img.src = ‘1.png‘;
        ele_img.width = 50;
        ele_img.height = 50;
        //找到父標簽
        var ele_parent = document.getElementsByClassName(‘c1‘)[0];
        //然後添加
        ele_parent.appendChild(ele_a);
        ele_parent.appendChild(ele_img);
    };
    //綁定的刪除節點的事件
    ele_del.onclick = function () {
        //先獲取要刪除的元素
        var ele_p = document.getElementById(‘p1‘);
        //獲取它的父元素
        var ele_parent = document.getElementsByClassName(‘c1‘)[0];
        //然後刪除（註意是父元素刪除子元素）
        ele_parent.removeChild(ele_p)
    };
    //綁定的替換節點的事件
    ele_repleace.onclick = function () {
        //找被替換的標簽（舊標簽）
        var ele_p = document.getElementById(‘p2‘);
        //創建一個替換後的標簽（新標簽）
        var ele_img = document.createElement(‘img‘);
        ele_img.src = ‘2.png‘;
        ele_img.width = 100;
        ele_img.height = 50;
        //找到父節點
        var ele_parent = document.getElementsByClassName(‘c1‘)[0];
        //做替換（父節點替換子節點中的某一個節點）：相當於一次刪除加一次添加
        ele_parent.replaceChild(ele_img, ele_p);
    }
</script>
<script>
    //綁定刪除節點的事件
    var ele_dels = document.getElementsByClassName(‘delbtn‘);
    for(var i=0;i<ele_dels.length;i++){
        ele_dels[i].onclick = function () {
            //獲取刪除的元素
            var ele_tr = this.parentElement.parentElement;
//            console.log(ele_tr)
            //找到父節點
            var ele_tbody_parent =document.getElementById(‘t1‘);
            //然後刪除
            ele_tbody_parent.removeChild(ele_tr)
        }
    }
</script>
</body>
</html>

事件類型

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並松開。
onkeyup        某個鍵盤按鍵被松開。

onload         一張頁面或一幅圖像完成加載。

onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開

onselect       文本被選中。
onsubmit       確認按鈕被點擊。

二、onload事件

onload 屬性開發中只給 body元素加.這個屬性的觸發標誌著頁面內容被加載完成.應用場景: 當有些事情我們希望頁面加載完立刻執行,那麽可以使用該事件屬性.

什麽時候加載完什麽時候觸發（如果你想把script放在body上面去，就用到onload事件了）

onload事件(基於節點操作的修改)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>節點操作</title>
    <style>
        .c1 {
            width: 300px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
    <script>
        //如果要把script寫在body的上面就可以用onload事件
        //onload什麽時候加載完什麽時候觸發這個事件
        window.onload = function () {
            var ele_add = document.getElementsByClassName(‘addBtn‘)[0];
            var ele_del = document.getElementsByClassName(‘delBtn‘)[0];
            var ele_repleace = document.getElementsByClassName(‘replaceBtn‘)[0];
            console.log(ele_add);
            //綁定的添加節點的事件
            ele_add.onclick = function () {
                //先創建一個標簽
                var ele_a = document.createElement(‘a‘);
                console.log(ele_a); //<a></a>
                ele_a.innerHTML = ‘點擊‘; //<a>點擊</a>
                ele_a.href = ‘http://www.baidu.com‘; //<a href=‘http://www.baidu.com‘>點擊</a>
                //先創建一個標簽
                var ele_img = document.createElement(‘img‘);
                ele_img.src = ‘1.png‘;
                ele_img.width = 50;
                ele_img.height = 50;
                //找到父標簽
                var ele_parent = document.getElementsByClassName(‘c1‘)[0];
                //然後添加
                ele_parent.appendChild(ele_a);
                ele_parent.appendChild(ele_img);
            };
            //綁定的刪除節點的事件
            ele_del.onclick = function () {
                //先獲取要刪除的元素
                var ele_p = document.getElementById(‘p1‘);
                //獲取它的父元素
                var ele_parent = document.getElementsByClassName(‘c1‘)[0];
                //然後刪除（註意是父元素刪除子元素）
                ele_parent.removeChild(ele_p)
            };
            //綁定的替換節點的事件
            ele_repleace.onclick = function () {
                //找被替換的標簽（舊標簽）
                var ele_p = document.getElementById(‘p2‘);
                //創建一個替換後的標簽（新標簽）
                var ele_img = document.createElement(‘img‘);
                ele_img.src = ‘2.png‘;
                ele_img.width = 100;
                ele_img.height = 50;
                //找到父節點
                var ele_parent = document.getElementsByClassName(‘c1‘)[0];
                //做替換（父節點替換子節點中的某一個節點）：相當於一次刪除加一次添加
                ele_parent.replaceChild(ele_img, ele_p);
            };
            //表格綁定刪除節點的事件
            var ele_dels = document.getElementsByClassName(‘delbtn‘);
            for (var i = 0; i < ele_dels.length; i++) {
                ele_dels[i].onclick = function () {
                    //獲取刪除的元素
                    var ele_tr = this.parentElement.parentElement;
//            console.log(ele_tr)
                    //找到父節點
                    var ele_tbody_parent = document.getElementById(‘t1‘);
                    //然後刪除
                    ele_tbody_parent.removeChild(ele_tr)
                }
            }
        }
    </script>
</head>
<body>
<div class="c1">
    <p id="p1">年後</p>
    <p id="p2">hello</p>
</div>
<button class="addBtn">ADD</button>
<button class="delBtn">DEL</button>
<button class="replaceBtn">Replace</button>
<ul>
    <li>創建節點：var ele_a = document.createElement(‘a‘);</li>
    <li>添加節點：ele_parent.appendChild(ele_img);</li>
    <li>刪除節點：ele_parent.removeChild(ele_p);</li>
    <li>替換節點：ele_parent.replaceChild(新標簽,舊標簽);</li>
</ul>
<table border="1">
    <tbody id="t1">
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text"></td>
        <td>
            <button class="delbtn">del1</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text"></td>
        <td>
            <button class="delbtn">del2</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text"></td>
        <td>
            <button class="delbtn">del3</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text"></td>
        <td>
            <button class="delbtn">del4</button>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

onload示例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
         /*
              window.onload=function(){
                   var ele=document.getElementById("ppp");
                   ele.onclick=function(){
                   alert(123)
                };
             };
         
         */



          function fun() {
              var ele=document.getElementById("ppp");
               ele.onclick=function(){
                alert(123)
            };
          }

    </script>
</head>
<body onload="fun()">

<p id="ppp">hello p</p>

</body>
</html>

三、onkeydown事件

Event 對象：Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.比如onkeydown,我們想知道哪個鍵被按下了，需要問下event對象的屬性，這裏就時KeyCode.

onkeydown事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" class="test">
<input type="text" id="t1"/>
<script>
    //測試event對象
    var ele = document.getElementsByClassName(‘test‘)[0];
//    event :每次觸發事件時所有的狀態信息
//    event.keyCode ：保存著所有的狀態信息
    ele.onkeydown =function (event) {
//        onkeydown按下鍵盤觸發的事件
        console.log(event);
        console.log(event.keyCode);
        if (event.keyCode==13){
            //按回車就會彈出
            alert(666)
        }
    }
</script>
<script type="text/javascript">
    var ele=document.getElementById("t1");
    ele.onkeydown=function(e){
        e=e||window.event;
        var keynum=e.keyCode;
        var keychar=String.fromCharCode(keynum);
//        console.log(keynum); //每次鍵盤敲下的狀態信息
//        console.log(keychar);  //輸入的字符
//        alert(keynum);
//        alert(keychar)  //你鍵盤輸入的字符
    };
</script>
</body>
</html>

技術分享圖片

四、onsubmit事件

當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.

onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit事件</title>
    <!--onsubmit事件:確定按鈕被點擊-->
    <!--在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.-->
    <!--提交按鈕本身就有一個默認事件（你點擊提交的時候就會把數據發過去）-->

</head>
<body>
<form action="" id="submit">
    <p>姓名：<input type="text" class="name"></p>
    <p>年齡：<input type="text" class="age"></p>
    <input type="submit">
</form>
<input type="text" class="test">
<script>
    var ele_form = document.getElementById(‘submit‘);
    var ele_name = document.getElementsByClassName(‘name‘)[0];
    var ele_age = document.getElementsByClassName(‘age‘)[0];
    ele_form.onsubmit = function (event) {
        var username = ele_name.value;
        var age = ele_age.value;
        alert(username);
        alert(age);
        if (username==‘haiyan‘){
            //阻止默認事件的兩種方式
//            方式一：
//            return false;
//            方式二
//            給函數給一個形參，這個形參寫什麽都行，一般我們寫成event
            event.preventDefault() //阻止默認事件（表單的提交）
        }
    }
</script>
<script>
    //測試event對象
    var ele = document.getElementsByClassName(‘test‘)[0];
//    event :每次觸發事件時所有的狀態信息
//    event.keyCode ：保存著所有的狀態信息
    ele.onkeydown =function (event) {
//        onkeydown按下鍵盤觸發的事件
        console.log(event);
        console.log(event.keyCode);
        if (event.keyCode==13){
            //按回車就會彈出
            alert(666)
        }
    }
</script>
</body>
</html>

五、事件傳播

事件傳播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件傳播</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<script>
    //因為盒子1是盒子2的父親，所以當給父親綁定一個事件，給兒子也綁定一個事件，就像
//    繼承一樣，兒子會繼承父親的事件，所以現在運行的時候如果點擊盒子2，會把自己的是事件和
//    父親的事件都執行了。所以如果只想讓兒子執行自己的事件，那麽就得阻止發生事件傳播
    var ele1 = document.getElementsByClassName(‘box1‘)[0];
    var ele2 = document.getElementsByClassName(‘box2‘)[0];
    ele1.onclick = function () {
        alert(123)
    };
    ele2.onclick = function (event) {
        alert(456);
        console.log(event);
        console.log(event.keyCode);
        //    阻止事件傳播的方式
        event.stopPropagation();
    };


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

六、seach實例

模擬placeholder屬性的功能

<input type="text" placeholder="username" id="submit">

placeholder和value的區別：
　　placeholder：只是一個提示功能，不傳值。
　　value：是一個默認的值，如果你的輸入框中不寫數據的時候，它會把默認的數據發過去

seach示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模擬placeholder屬性的功能</title>
</head>
<body>
<input type="text" placeholder="username" id="submit">
<input type="text" value="username" id="submit1">
<script>
//    var ele = document.getElementById(‘submit1‘);
    var ele = document.getElementById(‘submit1‘);
    ele.onfocus = function () {
        //先獲取焦點，點擊輸入框就獲取到焦點，光標一上去就把值設成空
        this.value=""
    };
    ele.onblur = function () {
//        當光標不點擊那個輸入框的時候就失去焦點了
        //當失去焦點的時候，判斷當前的那個值是不是為空，是否含有空格
//        如果為空或者有空格，用trim()去掉空格。然後賦值為username
        if (this.value.trim()==""){
            this.value=‘username‘
        }
    }
</script>
</body>
</html>

七、onchange事件

onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange事件</title>
</head>
<body>
<select name="" id="s1">
    <option value="">甘肅省</option>
    <option value="">安徽省</option>
    <option value="">湖北省</option>
</select>
<script>
    var ele = document.getElementById(‘s1‘);
    //下拉菜單，和你當前事件不同的時候出發事件
    ele.onchange= function () {
        alert(123)
    }
</script>
</body>
</html>

用onchange事件實現的二級聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二級聯動</title>
</head>
<body>
<select name="" id="s1">
    <option value="">請選擇省份</option>
    <option value="gansu">甘肅省</option>
    <option value="hebei">河北省</option>
    <option value="henan">河南省</option>
</select>
<select name="" id="c1">
    <option value="city">請選擇城市</option>
</select>
<script>
    var data = {‘gansu‘:[‘蘭州市‘,‘天水市‘,‘武威市‘],‘hebei‘:[‘保定‘,‘石家莊‘],‘henan‘:[‘鄭州‘,‘開封‘]}
    var ele_select = document.getElementById(‘s1‘);
    var ele_critys = document.getElementById(‘c1‘);//父親標簽
    ele_select.onchange  =function () {
//        alert(123)
//        console.log(this.value)
        var ele_provice = this.value;
        var citys = data[ele_provice];
        console.log(citys);
        //要在沒有添加之間清空，不然你點一次添加一次，點一次添加一次
        //方式一
//        ele_critys.children.length=1;  //不可行。。但是原理和方式二的一樣
        //方式二
//        ele_critys.options.length = 1; //留一個，一般多的是設成0了
        for (var i =0;i<citys.length;i++) {
            //創建一個option標簽
            var ele_option = document.createElement(‘option‘); //<option></option>
            ele_option.innerHTML = citys[i];  //得到有文本的option標簽
            ele_option.value = i + 1; //設置屬性值
            console.log(ele_option);
            ele_critys.appendChild(ele_option);
        }
    }
</script>

</body>
</html>

八、onmouse事件

onmouse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onmouse事件</title>
    <style>
        .box{
            width: 300%;
            height: 200px;
        }
        .title{
            background: steelblue;
            line-height: 40px;
        }
        .con{
            background: slategray;
            line-height: 30px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="title">onmouse</div>
    <div class="con hide">
        <div><a href="" class="item">你好嗎？</a></div>
        <div><a href="" class="item">我好啊</a></div>
        <div><a href="" class="item">好就好唄</a></div>
    </div>
</div>
<script>
    var ele_title = document.getElementsByClassName(‘title‘)[0];
    var ele_box = document.getElementsByClassName(‘box‘)[0];
    //鼠標指上去的事件
    ele_title.onmouseover = function () {
        this.nextElementSibling.classList.remove(‘hide‘);
    };
    //鼠標移走的事件的兩種方式
//    方式一（推薦）
     ele_box.onmouseleave= function () {
        ele_title.nextElementSibling.classList.add(‘hide‘);
    };
//    方式二
//    ele_title.onmouseout = function () {
//       this.nextElementSibling.classList.add(‘hide‘);
//    }
//    方式一和方式二的區別：
//    不同點
//      onmouseout：不論鼠標指針離開被選元素還是任何子元素，都會觸發onmouseout事件
//      onmouseleave：只有在鼠標指針離開被選元素時，才會觸發onmouseleave事件
//    相同點：都是鼠標移走觸發事件
</script>
</body>
</html>

九、事件委派

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委派（委派給所有的子元素）</title>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button class="addbtn">點我添加</button>
</body>
<script>
    var ele_btn = document.getElementsByClassName(‘addbtn‘)[0];
    var ele_ul = document.getElementsByTagName(‘ul‘)[0];
    var ele_li =document.getElementsByTagName(‘li‘);
    //綁定事件
    for (var i=0;i<ele_li.length;i++){
        ele_li[i].onclick = function () {
            alert(this.innerHTML)
        }
    }

    //事件委派
    ele_btn.onclick = function () {
        //創建一個li標簽
        var ele_li = document.createElement(‘li‘);
//        ele_li.innerHTML= 444;
        ele_li.innerText = Math.round(Math.random()*1000);
        ele_ul.appendChild(ele_li);//吧創建的li標簽添加到ul標簽
        ele_ul.addEventListener(‘click‘,function (e) {
            console.log(e.target); //當前點擊的標簽
            console.log(e.target.tagName);//拿到標簽的名字  LI
            if (e.target.tagName==‘LI‘){
                console.log(‘ok‘);
//                alert(ele_li.innerHTML)
            }
        })
    }
</script>
</html>

web前端【第八篇】JS的DOM對象二

web前端【第六篇】JavaScript對象

ima cal 知識重復功能說明 push 前端 date() abcd 在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaS

web前端【第八篇】JS的DOM對象二

purple 事件類型湖北省常用 web -h png 自己 string 一、節點操作創建節點：var ele_a = document.createElement(‘a‘);添加節點：ele_parent.appendChild(ele_img);刪除節點：el

web前端【第三篇】CSS選擇器

方式設置導入標簽 info attr pos pan import 一、css概述 CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，對html標簽的渲染和布局 CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。例如

web前端【第四篇】CSS屬性操作

idt lba adding 人的 ... charset 平鋪 cit stat 一、文本屬性 1.text-align:cnter 文本居中2.line heigth 垂直居中：行高，和高度對應3.設置圖片與文本的距離：vertical-align4.text-de

web前端【第五篇】JavaScript基礎

嵌入式搭載分享 == 出現 scrip 核心 obj python 一、JavaScript的歷史 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名ScriptEase.(客戶端執行的語言)

web前端【第七篇】JS的DOM對象一

查找 all 第七篇 children 離開驗證 eat scrip image 一、什麽是HTML DOM HTML Document Object Model（文檔對象模型） HTML DOM 定義了訪問和操作HTML文檔的標準方法 HTML

web前端【第九篇】JS的DOM對象三

內部 eat direct 詞法表達遍歷 -h bmi 常見一、JS中for循環遍歷測試 for循環遍歷有兩種第一種：是有條件的那種，例如 for(var i = 0;i<ele.length;i++){} 第二種：for （var i in li ）

web前端【第十篇】jQuery基本語法

== gre doctype color asc div .com nextall file 一、jQuery基礎1.為什麽要用jquery？寫起來簡單，省事，開發效率高，兼容性好2、什麽是jQuery? jQuery是一個兼容多瀏覽器的JavaScript庫

web前端【第十三篇】jQuery擴展和事件

.text .get lap lose remove 沖突 viewport 賦值 edit 一、jQuery事件常用事件 blur([[data],fn]) 失去焦點 focus([[data],fn]) 獲取焦點（搜索框例子） change([[d

python之旅六【第七篇】面向對象

封裝過程 col self logs 分類 ges eric 使用面向對象三大特性面向過程：根據業務邏輯從上到下寫壘代碼函數式：將某功能代碼封裝到函數中，日後便無需重復編寫，僅調用函數即可面向對象：對函數進行分類和封裝，讓開發“更快更好更強... 面向對象編程

Python之路【第八篇】：堡壘機實例以及數據庫操作

流程 plain ima update 相關操作 tcs tmp int /tmp 堡壘機前戲開發堡壘機之前，先來學習Python的paramiko模塊，該模塊機遇SSH用於連接遠程服務器並執行相關操作 SSHClient 用於連接遠程服務器並執行基本命令基於用戶名密

Django 【第八篇】Django自帶的分頁器

sso 得到 pen active iou lan 查看 ger .get Django的分頁器（paginator） view.py from django.shortcuts import render,HttpResponse # Create your view

Flask 【第八篇】flask-session組件

cati format 安裝 info 配置插入數據 odin 關系 let 簡介 flask-session是flask框架的session組件，由於原來flask內置session使用簽名cookie保存，該組件則將支持session保存到多個地方，如： redi

Python全棧開發之路【第八篇】：面向對象編程設計與開發（2）

ssi pen 解析執行示例動態類型 put 所有一、繼承與派生什麽是繼承？繼承指的是類與類之間的關系，是一種什麽是什麽的關系，繼承的功能之一就是用來解決代碼重用問題。繼承是一種創建新的類的方式，在python中，新建的類可以繼承一個或多個父類，父類又可以成

【第八篇】SAP HANA XS使用Data Services查詢CDS實體【二】

SAP HANA交流群：577202301 接上一篇，繼續 7、使用條件限制結果集。可以使用$ where（）方法來設定限制查詢返回的結果集的條件。以下示例顯示如何選擇淨額等於其訂單淨額的一半（或更多）的所有專案。 var qSelectedOrders = qOrde

python學習【第四篇】python函數 (二)

運行時本質接收參數 hello 函數作用域返回高階函數 clas 一、裝飾器裝飾器：本質就是函數，功能是為其它函數添加附加功能裝飾器的原則：不修改被修飾函數的源代碼不修改被修飾函數的調用方式裝飾器的知識儲備：　　裝飾器 = 高階函數 + 函數嵌套

第八篇：面向對象編程

-1 eight 常用 attr recent 建立動作空間過程 OOP介紹一、什麽是OOP 1、編程的發展已經從簡單控制流中按步的指令序列進入到更有組織的方式中 2、結構化的或過程性編程可以讓我們把程序組織成邏輯塊，以便重復或重用 3、面向對象編增強了

web前端【第十二篇】jQuery文檔相關操作

scroll 知識點 eight 查看 for otto fix jquer utf-8 一、相關知識點總結1、CSS .css() - .css("color") -> 獲取color css值 - .css("color", "#ff

web前端【第十一篇】jQuery屬性相關操作

自定義屬性 utf tab 一個 option on() function gpo pan 知識點總結 1、屬性屬性（如果你的選擇器選出了多個對象，那麽默認只會返回出第一個屬性）、 attr(屬性名|屬性值) - 一個參數是獲取

web前端【第十四篇】Bootstrap簡單使用

app sweet utf 常用插件 ctype deb mat 巨幕 blog 一、一個小知識點 1、截取長屏的操作 2、設置默認格式 3、md，sm， xs 4、空格和沒有空格的選擇器二、響應式介紹 - 響應式布局是什麽？　　同一個網頁在不同的終端上呈

web前端【第八篇】JS的DOM對象二

相關推薦