JavaScript Dom jQuery學習

時間 2019-11-08

標籤 javascript dom jquery 學習欄目 JavaScript 简体版

原文原文鏈接

JavaScript javascript

JavaScript是一種腳本語言,已經被普遍用於Web應用開發,經常使用來爲網頁添加各式各樣的動態功能,爲用戶提供更流暢美觀的瀏覽效果。一般JavaScript腳本是經過嵌入在HTML中來實現自身的功能的。php

一、兩種存在形式：css

1 <!--導入javascript腳本方法-->
2     <script type="text/javascript" src="t1.js "></script>
3 
4     <!--直接在html內部編寫javascript-->
5     <script type="text/javascript">
6         function func() {
7             alert("Hello Peony")
8         }

二、存在位置：html

HTML的head中
HTML的body代碼塊底部(推薦)

爲何不能放在上面呢？爲何css的就能夠放在上面呢？java

注：css代碼首先要記住html代碼是從上往下解釋的，若是css代碼放在下面，在上面的代碼使用css樣式，若是css代碼塊放在下面就沒有辦法顯示樣式了python

另不一樣的瀏覽器處理請求也不一樣：正常來講當有一個請求過來時候會把js&css一塊兒發送過去，我們按照最low的方式理解的話能夠這麼理解：若是js文件或者js耗時比較久的話，下面的html代碼就沒法執行了。jquery

三、聲明變量和函數（注意：這裏一些程序員容易出錯）程序員

1 function m1() {
2             alert("girl")
3             var name = 'Peony'; //var 變量名 ,變量名前面加var爲局部變量
4             age = '27';
5             //注這裏須要注意,建議使用的時候通常不要使用全局變量!不然若是代碼量比較大的
6             //時候容易出現調用混亂的問題
7         }
8         m1();

函數chrome

//        普通函數
        function func() {
            alert("Hello word")
        }
//        定義一個可傳參數的函數
        function func(arg) {
            alert(arg)
        }
        func('Superman')
//        自執行函數,顧名思義,定義好以後能夠自動執行
        (function f3(arg) {alert(arg)})("Today is sunny");

//        普通函數
        function func() {
            alert("Hello word")
        }
//        定義一個可傳參數的函數
        function func(arg) {
            alert(arg)
        }
        func('Superman')
//        自執行函數,顧名思義,定義好以後能夠自動執行
        (function f3(arg) {alert(arg)})("Today is sunny");

//        匿名函數,用處不是很大瞭解就行
        var a = function() {
            alert('meinv');
        };
        a();

js 的展現方法有兩種：編程

//經過網頁來展現
    <script type="text/javascript">
        function f1() {
            alert("hello man")
        }
        f1()
    </script>
//經過console來展現
  <script type="text/javascript">
        function f1() {
            console.log("Hello man ")
        }
        f1()
    </script>

四、字符串經常使用方法及屬性

調試的地方能夠在google chrome 上進行測試，F12點擊"Console"

obj.trim() 去除空格

var a = "  fanbingbing  "
undefined
a.trimLeft() #去除左邊的空格
"fanbingbing  "
a.trimRight() #去除右邊的空格
"  fanbingbing"
a.trim() //去除兩邊的空格
"fanbingbing"

a
"  fanbingbing  "  #這裏能夠發現我執行了上面的去除空格的命令以後,實際的值是沒有改變的


b = a.trim()
"fanbingbing" #可是咱們能夠經過賦值來改變他
b
"fanbingbing"

obj.charAt(index) 根據索引獲取字符串裏的字符

b
"FanBingBing"
b.charAt(0)
"F"
b.charAt(1)
"a"
b.charAt(2)
"n"

obj.substring(start,end) 獲取字符的子序列，相似於切片

b
"FanBingBing"
b.substring(0,3)
"Fan"

obj.indexOf(char) 去字符串找指定的字符的索引值是多少

b
"FanBingBing"
b.indexOf("B")
3

obj.length 獲取字符串的長度

b
"FanBingBing"
b.length
11

五、數組

聲明一個數組和python中的列表相似

a = [11,22,33,44] #聲明一個數組
[11, 22, 33, 44]

插入

a = [11,22,33,44] #聲明一個數組
[11, 22, 33, 44]
a.push(55) #在數組最後增長一個元素
#這裏是數組的長度
a
[11, 22, 33, 44, 55]
a.unshift(00) #在數組最前面增長一個元素
#長度
a
[00, 11, 22, 33, 44, 55]
a.splice(3,0,'insert')  #在指定的索引增長一個元素,括號內(3爲索引值,0爲固定值,要插入的內容)
[]
a
[00, 11, 22, "insert", 33, 44, 55]
a.unshift(100)

移除

a
[100, 0, 11, 22, "insert", 33, 44, 55]
a.pop()  # 從尾部獲取
a.shift() #從開頭獲取
a
[0, 11, 22, "insert", 33, 44]
a.splice(3,1) #從指定位置獲取,括號內參數爲(元素的索引,後面爲索引後的元素個數,包含自己)
["insert"]
a
[0, 11, 22, 33, 44]

切片

a
[0, 11, 22, 33, 44]
a.slice(1,3)
[11, 22]
a
[0, 11, 22, 33, 44]

合併

a = [11,22]反轉
[11, 22]
b = [44,55]
[44, 55]
a.concat(b)
[11, 22, 44, 55]
a
[11, 22]
b.concat(a)
[44, 55, 11, 22]

反轉

a
[11, 22]
a.reverse()
[22, 11]
a
[22,

a
[22, 11]
a.join('_')
"22_11"
a
[22, 11]

11]

字符串格式化

1 a
2 [22, 11]
3 a.join('_')
4 "22_11"
5 a
6 [22, 11]

數組長度

a
[22, 11]
a.length
2

六、字典(沒有字典類型，可是能夠僞造)

dict1 = {'k1':123,'k2':234} #定義一個字典
Object {k1: 123, k2: 234}
dict1['k1']
123

七、循環

js中的循環有兩種方式

#第一種
for (var i=0;i<10;i++) {console.log(i)}
#輸出結果,看本代碼下第一圖

#第二種
for (var item in a) {console.log(a[item])}
#輸出結果，看本代碼下第二圖

八、異常處理

和python中的異常處理相似，代碼以下：

<script type="text/javascript">
            try{
                var name = Peony
            }catch(e) {
                console.log(e)
            }finally{
                console.log("Peony is a beauty;")
            }
    </script>

DOM編程：

文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，能夠改變文檔的內容和呈現方式。咱們最爲關心的是，DOM把網頁和腳本以及其餘的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。

注：通常說的JS讓頁面動起來泛指JavaScript和Dom

一、選擇器：

document.getElementById('id') 查找指定的id，而後咱們能夠進行操做

<body>
    <div id="id_1">
    </div>
    
    <script type="text/javascript">
        var i = document.getElementById('id_1'); //查找指定的id
        i.innerText = '456'; //innerText修改指定的字符串
    </script>
</body>

顯示效果，當咱們打開IE的時候123就會被修改成456

document.getElementsByName('name')

<body>
    <div name="name_1">
    </div>

    <script type="text/javascript">
        var i = document.getElementsByName('name_1'); //查找指定的name,這裏和ID不同name能夠有多個
        for (var item in i) {
            i[item].innerText = '456'; //innerText修改指定的字符串
        };
    </script>
</body>

document.getElementsByTagName('tagname')

<body>
    <div>
    </div>
    <div>
    </div>
    <script type="text/javascript">
        var i = document.getElementsByTagName('div'); //查找指定的標籤類型,這裏一樣和ID不同標籤好比<div>標籤能夠有多個
        for (var item in i) {
            i[item].innerText = '456'; //innerText修改指定的字符串
        };
    </script>
</body>

二、註冊事件（onclick=」函數」）

經常使用事件：

onclick
onblur
onfocus
..................

舉例代碼以下：

寫一個input的標籤，首先把事件和函數進行綁定，當你一點這個按鈕的時候就會自動執行，綁定的函數：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shuaige_js_file</title>
    <!--導入javascript腳本方法-->
    <!--<script type="text/javascript" src="t1.js "></script>-->
    <style>
        .color_red {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="id_1">
    </div>

    <!--下面的input標籤:onclick是個事件他等於一個函數,就是事件和函數進行綁定,應用到標籤中就是註冊到標籤中-->
    <input type="button" onclick="edit();" value="修改" />


    <script type="text/javascript">
        function edit() {
            var i = document.getElementById('id_1');
            i.className = 'color_red';
        }
    </script>
</body>
</html>

再改回去：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--導入javascript腳本方法-->
    <!--<script type="text/javascript" src="t1.js "></script>-->
    <style>
        .color_red {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="id_1">
    </div>

    <!--下面的input標籤:onclick是個事件他等於一個函數,就是事件和函數進行綁定,應用到標籤中就是註冊到標籤中-->
    <input type="button" onclick="edit();" value="修改" />
    <input type="button" onclick="rollback();" value="回滾"/>

    <script type="text/javascript">
        function edit() {
            var i = document.getElementById('id_1');
            i.className = 'color_red';
        }
        function rollback() {
            var i = document.getElementById('id_1');
            i.className = ''; //這裏只要給他設置爲空便可
        }
    </script>

</body>
</html>

事件列表：

注：一個標籤能夠綁定多個事件！

注：onload 和其餘的不太同樣，他是寫在Javascirpt裏的

<script type="text/javascript">
//        這裏的onload是,當整個頁面加載完成以後才執行的,整個頁面包含的元素加載完成以後才執行的.
        window.onload = function () {
            alert("The page Load complete")
        };
        function edit() {
            var i = document.getElementById('id_1');
            i.className = 'color_red';
        }
        function rollback() {
            var i = document.getElementById('id_1');
            i.className = ''; //這裏只要給他設置爲空便可
        }
    </script>

三、經常使用函數

獲取或者修改樣式，修改上面的例子

在標籤內註冊了以後，若是在函數內i.className = 'color_red'; 這樣是給他設置值，若是不設置值呢？

 function edit() {
            var i = document.getElementById('id_1');
            i.className = 'color_red';
        }

不設置值(在上面修改的基礎上再修改回去原樣)：

  function edit() {
            var i = document.getElementById('id_1');
            console.log(i.className);
        }

function rollback() {
            var i = document.getElementById('id_1');
            console.log(i.className)
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--導入javascript腳本方法-->
    <!--<script type="text/javascript" src="t1.js "></script>-->
    <style>
        .color_red {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="id_1">
    </div>

    <!--下面的input標籤:onclick是個事件他等於一個函數,就是事件和函數進行綁定,應用到標籤中就是註冊到標籤中-->
    <input type="button" onmousemove="edit()" value="修改 "/>
    <input type="button" onclick="rollback()" value="修改 "/>


    <script type="text/javascript">
//        這裏的onload是,當整個頁面加載完成以後才執行的,整個頁面包含的元素加載完成以後才執行的.
//        window.onload = function () {
//            alert("The page Load complete")
//        };

        function edit() {
            var i = document.getElementById('id_1');
            i.className = "color_red";
        }
        function rollback() {
            var i = document.getElementById('id_1');
            console.log(i.className)
        }
    </script>

</body>
</html>

例子完整代碼

獲取或設置屬性：

獲取屬性

<body>
    <div name="Penoy" id="id_1">
        age 18
    </div>
    <input type="button" value="測試" onclick="edit()" />
    <script type="text/javascript">
        function edit() {
            var i = document.getElementById('id_1'); //首先找到這個ID = id_1的標籤
            var result = i.getAttribute('name'); //獲取id_1的標籤的屬性爲name並賦值
            console.log(result); //輸出結果在console
        }
    </script>
</body>

修改屬性：

<body>
    <div name="Peony" id="id_1">
        age 18
    </div>
    <input type="button" value="測試" onclick="edit()" />
    <script type="text/javascript">
        function edit() {
            var i = document.getElementById('id_1'); //首先找到這個ID = id_1的標籤
            var result = i.setAttribute('name','meihuan'); //修改屬性
            var result = i.getAttribute('name'); //獲取id_1的標籤的屬性爲name並賦值
            console.log(result); //輸出結果在console
        }
    </script>
</body>

獲取或修改樣式中的屬性

修改樣式屬性

<body>
    <div name="Peony" id="id_1" style="font-size:8px;background-color:green">
        age 18
    </div>
    <input type="button"  onclick="edit()" value="測試" />
    <script type="text/javascript">
        function edit() {
            var i = document.getElementById('id_1'); //首先找到這個ID = id_1的標籤
            i.style.backgroundColor = "red";  //修改樣式中的屬性還有不少,能夠測試
        }
    </script>
</body>

提交表單:

<body>
    <form id="form_1" action="https://www.sogou.com/">
        <div>
            <input type="text" name="query"/>
        </div>
        
        <!--第一個submit是能夠提交的這個確定沒問題-->
        <input type="submit" value="submit">
        <!--第二個button能夠提交嗎?-->
        <input type="button" value="button" onclick="go()">
    </form>
</body>

上述代碼是不支持提交的，那麼怎麼作到能夠提交呢？能夠通告修改屬性：

<body>
    <form id="form_1" action="https://www.sogou.com/">
        <div>
            <input type="text" name="query"/>
        </div>

        <!--第一個submit是能夠提交的這個確定沒問題-->
        <input type="submit" value="submit">
        <!--第二個button能夠提交嗎?-->
        <input type="button" value="button" onclick="go()">
    </form>

    <script type="text/javascript">
        function go() {
            document.getElementById('form_1').submit();
        }
    </script>
</body>

跳轉頁面:

<body>
    <div>
        跳轉範例
    </div>
    <div>
        <!--在同一個標籤內打開-->
        <input type="button" onclick="jump()" value="跳轉至百度" />
        <!--新起一個標籤打開-->
        <input type="button" onclick="jump_new()" value="跳轉至百度" />
    </div>
    <script type="text/javascript">
        function jump() {
            window.location.href = 'https://www.baidu.com'
        }
        function jump_new() {
            window.open('https://www.baidu.com')
        }
    </script>
</body>

confirm() ，彈出消息提示框，顯示「是」或「否」，根據用戶的選擇返回True 或者 Flase

    <script type="text/javascript">
            var result = confirm('是否繼續');
            console.log(result);
    </script>

setInterval("alert()",2000); clearInterval(obj) 能夠理解爲一個計時器

代碼以下：

setInterval("alert()",2000);設置計時器

<body>

    <script type="text/javascript">
        function f1() {
            console.log("test message print in console")
        }
        setInterval('f1()',1000);//這裏括號內,能夠是字符串也能夠是函數,咱們這個是執行函數,第二個參數爲毫秒,
                               //這裏是每隔1秒執行一次,我這裏測試發現,若是函數哪裏不加引號就只執行一次!
    </script>
</body>

clearInterval(obj)；關閉計時器

<body>

    <script type="text/javascript">
        function f1() {
            console.log("test message print in console");
            clearInterval(obj); //這裏是關閉計時器,他須要個句柄,因此在下面的函數中,這個obj句柄必須是全局的
        }
        obj = setInterval('f1()',1000);//這裏括號內,能夠是字符串也能夠是函數,咱們這個是執行函數,第二個參數爲毫秒,
                               //這裏是每隔1秒執行一次,我這裏測試發現,若是函數哪裏不加引號就只執行一次!
    </script>
</body>

setTimeout(); clearTimeout(obj) 也是計時器他和interval的區別就是，他只執行一次

<body>

    <script type="text/javascript">
        function f1() {
            console.log("test message print in console");
        }
        obj = setTimeout('f1()',1000);//這裏括號內,能夠是字符串也能夠是函數,咱們這個是執行函數,第二個參數爲毫秒,
                               //這裏是setTimeout因此他只執行一次
    </script>
</body>

Dom編程之建立標籤：

建立標籤的2種方式：

一、經過字符串建立

二、經過對象建立（經常使用方法）

方式一：
    var obj = document.createElement('a');
    obj.href = "http://www.etiantian.org";
    obj.innerText = "老男孩";
 
    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("beforeEnd",obj);

實例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset='utf-8' >
 5         <title>歡迎blue shit蒞臨指導&nbsp;&nbsp;</title>
 6         <script type='text/javascript'>
 7             function Go(){
 8                 var content = document.title;
 9                 var firstChar = content.charAt(0)
10                 var sub = content.substring(1,content.length)
11                 document.title = sub + firstChar;
12             }
13             setInterval('Go()',1000);
14         </script>
15     </head>
16     <body>    
17     </body>
18 </html>

跑馬燈

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset='utf-8' />
 5         <title></title>
 6         
 7         <style>
 8             .gray{
 9                 color:gray;
10             }
11             .black{
12                 color:black;
13             }
14         </style>
15         <script type="text/javascript">
16             function Enter(){
17                var id= document.getElementById("tip")
18                id.className = 'black';
19                if(id.value=='請輸入關鍵字'||id.value.trim()==''){
20                     id.value = ''
21                }
22             }
23             function Leave(){
24                 var id= document.getElementById("tip")
25                 var val = id.value;
26                 if(val.length==0||id.value.trim()==''){
27                     id.value = '請輸入關鍵字'
28                     id.className = 'gray';
29                 }else{
30                     id.className = 'black';
31                 }
32             }
33         </script>
34     </head>
35     <body>
36         <input type='text' class='gray' id='tip' value='請輸入關鍵字' onfocus='Enter();'  onblur='Leave();'/>
37     </body>
38 </html>

搜索框

jQuery

jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,作得更多)，對javascript進行了封裝，是更加便捷的開發，而且在兼容性方面十分優秀。

要想使用jQuery首先得導入代碼以下（附加簡單應用）：

http://www.php100.com/manual/jquery/

一、選擇器和篩選器

基本選擇器：

例如：$('#n1').text('123');
        //分解  $('#n1') 找到id爲n1的標籤,並把裏面的內容修改成123
更多見：http://www.php100.com/manual/jquery/http://www.cnblogs.com/wupeiqi/articles/5369773.html