python學習筆記十三 JS，Dom（進階篇）

時間 2019-11-18

標籤 python 學習筆記十三 dom 進階欄目 Python 简体版

原文原文鏈接

JS介紹javascript

JavaScript 是屬於網絡的腳本語言！JavaScript 被數百萬計的網頁用來改進設計、驗證表單、檢測瀏覽器、建立cookies，以及更多的應用；JavaScript 是因特網上最流行的腳本語言。html

JavaScript 與 Java 是兩種徹底不一樣的語言，不管在概念仍是設計上。java

Java（由 Sun 發明）是更復雜的編程語言。
ECMA-262 是 JavaScript 標準的官方名稱。
JavaScript 由 Brendan Eich 發明。它於 1995 年出如今 Netscape 中（該瀏覽器已中止更新），並於 1997 年被 ECMA（一個標準協會）採納。

1.存在方式python

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
 
<!-- 方式二 -->
<script type"text/javascript">
    Js代碼內容
</script>

2.存放位置web

JavaScript腳本一般放置在三個位置：ajax

HTMlL中的head部分
HTML中的body部分最底部（推薦）
單獨以.js結尾的文件

爲何會推薦放置在body部分的最底部？由於html是從上往下執行的，假設有js文件或者js執行耗時比較久的話，下面的html代碼就沒法執行了。chrome

因此放置在body代碼塊底部，那麼即便js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。編程

<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
    alert('time_out');
</script>

3.變量的定義數組

變量定義 JavaScript中變量的聲明是一個很是容易出錯的點，局部變量必須一個 var 開頭，若是未使用var，則默認表示聲明的是全局變量（跟python的使用習慣不太相同），使用全局變量會出現意想不到的bug 慎用。瀏覽器

四、基本數據類型

數字類型的4種定義：

//1
var age = 18;
console.log(age,typeof age);
//2
Number("1234");
//3
parseInt(num);
//4
parseFloat(num);

var age = 18;
console.log(parseInt(age),typeof age)
var num = 18.9
console.log(name,typeof name);
//經過chrome瀏覽器 審查元素， console控制檯菜單欄， 能夠進入瀏覽器解釋器

字符串的定義和方法

var n = "ajax";
var name = String("koka");
var age_str =String(18);

//字符串方法
var t1 = "abc def "
//trim == strip()去除兩邊空格
t1.trim()
"abc def"
t2 = t1.trim()
"abc def"
t2
"abc def"

var test = "aaaa bbb cc d "
//讀取一個字符，傳入下標 
test.charAt(0)
"a"
test.charAt(1)
"a"
test.charAt(2)
"a"

//substring == [:] 列表分片
test.substring(0,5)
"aaaa "

// indexOf == list.index(char) 查看字符index
test.indexOf("a")
0
test.indexOf("b")
5
test.length
14

bool類型

//bool
var status = true
status
"true"
var status = Boolean(1==1)
status
"true"

數組（array）

//Arrary
var names = ['alex', 'tony', 'eric']
var names = Array('alex', 'tony', 'eric')

//添加
names.push("bob")
4
names
["alex", "eric", "john", "bob"]

//從左邊添加
names.unshift("nike")
5
names
["nike", "alex", "eric", "john", "bob"]

//指定位置插入，第二個值必須是0
names.splice(2,0,"ajax")
names
["nike", "alex", "ajax", "eric", "john", "bob"]

//列表分片
names.slice(1,3)
["alex", "ajax"]

//
names.join("_")
"nike_alex_ajax_eric_john_bob"
names
["nike", "alex", "ajax", "eric", "john", "bob"]

//長度
names.length
6
字符串化

字典

var items = {"k1":123,"k2":"tonyAlen"}
items
Object {k1: 123, k2: "tonyAlen"}

五、js循環語句

var li = [11,22,33,44];
//for循環 數組方式一
for(var index in li) {
    console.log(index,li[index]);
　　 //循環的結果是 下標 0，1，2，3
}

/for 循環 數組方式二
for (var i=0;i<li.length;i++){ console.log(i,li[i]); }

//for 循環 字典 var dic = {"k1":123,"k2":456};
for(var key in dic){ console.log(key,dic[key]); }

//while循環 break，continue
while(true){ console.log("loop"); break; }

六、js條件語句

if(name == "ajax"){
     console.log("got it")
}
else if(name == "alex"){
     console.log("alex")
}
else{
     console.log("others")
}

// switch,case語句
var name = 1
switch(name){
    case "1":
        age = 123;
        break;
    case "2":
        age = 456;
        break;
    default:
        age = 888;
}

七、異常處理（與python相似）

try{
    var n = m;
//catch<=>except
}catch(e){
    console.log(e)
}finally{
    console.log("finally")
}

八、函數

//函數定義方式
//普通函數
function f1(arg) {
    console.log(arg);
    return "alex";
}
f1("1111");
var ret = f1(123);
console.log(ret);

// 自動執行函數 定義完本身調用
(function(arg){
    console.log(111,arg);
})("alex");

//匿名函數
var f = function(arg) {
    onsole.log(arg);
};
f("123456");

九、面向對象

//面向對象式函數定義
function Foo(name,age){
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}

var obj = new Foo("ajax",18);
ret = obj.Func("ok");
console.log(obj.Name);
console.log(obj.Age);
console.log(ret);

HTML DOM （文檔對象模型）

文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，能夠改變文檔的內容和呈現方式。

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

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造爲對象的樹。

HTML DOM 樹

查找元素，有三種方法來作這件事：

經過 id 找到 HTML 元素
經過標籤名找到 HTML 元素
經過類名找到 HTML 元素

選擇器

經過 id 找到 HTML 元素

<script>
    //按照ID查找 返回一個元素
    var nid = document.getElementById("n1");
    //innerText修改值
    nid.innerText="koka";
</script>

經過標籤名找到 HTML 元素

<script>
    //返回一個列表
    var lis = document.getElementsByTagName("li");
    for(var i in lis){
    var item = lis[i];
    item.innerText = i; //innerText修改指定的字符串
    }
    //按標籤查找
    //添加下標 查找具體的值
    var lis = document.getElementsByTagName("li")[0];
    lis.innerText = "1231321321";
</script>

經過類名找到 HTML 元素

<script>
    //按類名查找
    var lis2 = document.getElementsByClassName("c1");  
    for(var i in lis2){
        var item = lis2[i];
        item.innerText = i;
}
</script>

獲取和修改HTML內容

innerText 獲取標籤中間的文本內容

<div>
    <div id="n1">c1</div>
    <a>asdfgefg</a>
</div>
<script>
        var nid = document.getElementById("n1");
        //innerTex修改值
        nid.innerText="abc";
</script>

輸出:

　abc

asdfgefg

innerHTML 獲取標籤中間的html內容

假設我想要獲取標籤中的全部內容，不僅僅是標籤的中間值，使用innerHTML便可

<div id="n1">
    XXXX
    <h1>YYYY</h1>
</div>
<script>
    var nid = document.getElementById("n1");
 //獲取div中的全部內容 console.log(nid.innerHTML); </script>

console result：

　　XXXX
　　<h1>YYYY</h1>

特殊的獲取

input系列
textarea標籤
select標籤

value屬性操做用戶輸入和選擇的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>    
    <input id="n2" type="text" value="請輸入內容">

    <select id="n3">
            <option>北京</option>
            <option>上海</option>
            <option>廣州</option>
    </select>

    <textarea id="n4">默認值</textarea>

    <p><input type="button" value="獲取值" onclick="Getvalue();" /></p>

　　<script type="text/javascript">
    　　function Getvalue(){
          var obj1 = document.getElementById("n2");
          alert(obj1.value);
          obj1.value="";

          var obj2 = document.getElementById("n3");
          alert(obj2.value);
          obj2.value = "2";
        
          var obj3 = document.getElementById("n4");
          alert(obj3.value);
          obj3.value = "123456789";
     }
   </script>
</body>
</html>

事件

HTML DOM 使 JavaScript 有能力對 HTML 事件作出反應。

什麼是事件？點擊一下鼠標，按下鍵盤都可稱爲事件；

對事件作出反應？咱們能夠在事件發生時執行 JavaScript，好比當用戶在 HTML 元素上點擊時。

綁定事件：

使用事件屬性向 h1元素分配 onclick 事件：

<h1 onclick="this.innerHTML='謝謝!'">請點擊該文本</h1>

經過使用 JavaScript 來向 HTML 元素分配事件：

<h1 id="t1">請點擊該文本</h1>
<script>
    document.getElementById("t1").onclick=function(){this.innerHTML="謝謝!"};
</script>

事件包含：

經常使用事件：

onclick
onblur
onfocus
...

自增計數器示例：

onclick：點擊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <div id = "num">
            1
        </div>
        <!--該input標籤綁定事件驅動-->
        <input type="button" value="+1" onclick="Add();" />
    </div>
    <script>
        function Add(){
            /*
            1.找到num
            2.獲取內容
            3.每點擊一次自增1
            */
            var nid = document.getElementById("num"); //經過id查找元素
            var text = nid.innerText;  //innerText獲取文本內容
            text = parseInt(text);
            text += 1;
            nid.innerText = text;
        }
    </script>
</body>
</html>

搜索框示例：

onfocus：元素獲取焦點

onblur：元素失去焦點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     //該標籤綁定事件，從這能夠看出一個標籤能夠綁定多個事件
    <input type="text" id="search" value="請輸入關鍵字" onfocus="Focus();" onblur="Blur();"/>
    <script type="text/javascript">
        //當input標籤被選中時觸發事件，執行如下操做。
        function Focus() {
　　　　　　  //查找元素
            var nid = document.getElementById("search");
            //獲取內容 valueinput，select，textarea標籤
            var value = nid.value;
            //判斷input標籤的value輸入空或"請輸入關鍵字"
            if (value == "請輸入關鍵字" || value.trim()=='') {
                nid.value = "";
            }
        }
　　　　　//當input標籤失去焦點即不被選中後，執行如下操做
        function Blur(){
            var nid = document.getElementById("search");
            var value = nid.value;
            //未輸入任何內容，繼續提示請輸入關鍵字
            if(!value.trim()){
                nid.value = "請輸入關鍵字"
            }
        }
    </script>
</body>
</html>屬性操做用戶輸入和選擇的值適用於

建立標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="container" style="font-size: 14px;color: red;">aaaaaaa</div>
    <!--默認a標籤會跳轉，可是當咱們設置onclick事件後，先執行自定義事件，再執行默認事件，假設你不想讓你的a標籤執行-->
    <!--默認事件,執行完自定義事件後返回false，默認事件就再也不執行了。-->
    <a href="http://www.baidu.com" onclick="return AddElement();">添加</a>
    <script>
        function AddElement(){
            // 方式一
            //建立對象的方式
            var obj = document.createElement('a');
            obj.href = "http://www.python.org";
            obj.innerText = "Python";
            var container = document.getElementById('container');
            //默認右邊追加
            container.appendChild(obj);
            //container.insertBefore(obj, container.firstChild);
            //container.insertBefore(obj, document.getElementById('hhh'));

            // 方式二
            // 建立標籤 建立字符串的方式
            var container = document.getElementById('container');
            var obj = "<input type='text' />";
            //container.innerHTML = obj; 只能建立一次
            //'beforeBegin', 'afterBegin', 'beforeEnd',  'afterEnd'
            container.insertAdjacentHTML("afterEnd",obj);//反覆添加
            return false
        }
    </script>
</body>
</html>

標籤屬性

自定義屬性（通用)：

obj.setAttribute(name,value)
obj.getAttribute(name)
obj.removeAttribute(name)

    <div id="container" custom="xxoo" class="c1" style="font-size:48px;color:red;">
    </div>
    <script>
         var obj = document.getElementById('container');
         obj.setAttribute("db","ds")
         obj.setAttribute("class","c2")
         obj.removeAttribute("custom")
         obj.getAttribute("db")
    </script>

固定屬性:

對於標籤屬性經過js和dom都是能夠修改和移除的。一般經過查找到的 對象.屬性 便可獲取到該屬性的值，可是有些屬性是不包含在標籤內的，好比div是沒有name屬性，須要經過自定義

屬性設置.

    <div id="container" sb="xx" class="c1" style="font-size: 48px;color: red;">
    </div>
    <script>
        var obj = document.getElementById('container');
        obj.id 
        obj.id = "nid"
        obj.className  //特殊 獲取class須要指定className
        obj.style.fontSize = "88px"; //特殊 style包含多個屬性集合，獲取style屬性時，須要進入 obj.style.屬性； font-size屬性特殊屬性經過fontSize獲取。
    </script>

提交表單示例：

經過input的submit也能夠提交表單，也能夠經過事件實現提交表單功能，同時咱們還想對提交表單進行檢測不但願出現有空的提交項。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="form1" action="https://www.sogou.com/web" method="get">
        <input name="query" type="text"/>
        <!--驗證，經過onclick事件綁定js提交 上面已經提到過，默認執行自定義函數，定義返回值 返回true才執行默認submit事件，不然不提交-->
        <input type="submit" onclick="return MySubmit();" value="提交驗證" />
        <!--非驗證，經過submit提交-->
        <input type="submit" value="submit" />
　　　　 <!--非驗證，經過onclick事件綁定js提交-->
        <div onclick="return Submit();">提交事件</div>
    </form>
    <script>
        function MySubmit(){
            var q = document.getElementsByName('query')[0];
            if(q.value.trim()){
                return true;
            }else{
                alert('請輸入內容');
                return false;
            }
        }
        function Submit(){
            //dom 的submit方法也支持提交表單
            document.getElementById('form1').submit();
        }
    </script>
</body>
</html>

其餘

setInterval("alert()",2000);  //每隔多少秒執行一次
clearInterval(obj)            //清除執行任務
setTimeout();                 //只執行一次
clearTimeout(obj)             //清除任務

cofirm　　　　　　　　　　　　　　//彈出提示框，返回true和false　

// URL和刷新
location.href   //獲取當前url
location.href = "url"  
window.location.reload() //刷新或跳轉

confirm示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="上來呀" onmouseover="MyConfirm();" />
    <script>
        function MyConfirm(){
            var ret = confirm("SB");
            console.log(ret);
        }
    </script>
</body>
</html>

跑馬燈示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歡迎OBJ蒞臨指導&nbsp;&nbsp;</title>
</head>
<body>
    <input type="button" onclick="StopInterval();" value="停下來" />
    <script>
        //每隔多少秒執行一次
setInterval("Go()",1000);
        function StopInterval(){
            //清除定時器
            clearInterval(obj1)
        }
        function Go(){
            //獲取字符串
            var content = document.title;
            //獲取首字母
            var firstChar = content.charAt(0)
            //獲取除首字母
            var sub = content.substring(1,content.length)
            //組合新的字符串
            document.title = sub + firstChar;
            }
    </script>
</body>
</html>