web前端篇：JavaScript基礎篇（易懂小白上手快）-2

時間  2019-12-06
標籤 web 前端 javascript 基礎 易懂 手快 欄目 HTML 简体版
原文   原文鏈接

目錄javascript

一.內容回顧：

ECMAScript基礎語法

1.基本數據類型和引用數據類型

基本數據類型number,string,boolean,undefined,null
引用數據類型：Array,Object,Function

2.條件判斷和循環

switch(name){
    case 'xxx';
        break;
    case 'xxx';
        break;
    default:
        break;
}

for (var i=0;i<10;i++){
    run to code
}
三元運算：
1>3? '真的':'假的';

3.賦值運算符，邏輯運算符

&& || !
i ++
==比較值 ===比較值和數據類型

4.字符串的經常使用方法

slice() 切片 一個參數從當前位置切到最後，兩個參數顧頭不顧尾
substring()
substr()  若是有兩個參數，第二個參數表示切字符串的個數
join()

字符串拼接
concat()
+
es6的模版字符串
    ··插入變量用${變量名}

//獲取索引
indexOf()
lastIndexOf()
//獲取字符
charAt()
//獲取字符ascii碼
charCodeAt()

//轉大寫
toUppercase()
//轉小寫
tolowercase()

typeOf 校驗當前變量的數據類型
trim 清除左右的空格

5.數組的經常使用方法

toString()
join('#')
concat()
//棧
push()
pop()
//堆
unshift()
shift()

splice(起始位置，刪除的個數，添加的元素);
//增長，刪除，替換
reverse()
sort()
slice()
length

//迭代方法
forEach() //僅能在數組對象中使用。
for
    
在函數中arguments  這個對象是僞數組

6.對象

function fn(name){
    var obj = {};
    obj[name]='mjj';
    return obj;
}
fn('age')
//遍歷對象
for (var key in obj) {
    obj[key]
}

7.函數

1.建立方法
//普通函數
function fn(){

}
fn();
//函數表達式
var fn = function(){
    run to code
}
//匿名函數
(function(){})()//this指向必定指向window

全局做用域，函數做用域，函數做用域中this指向能夠發生改變，能夠使用call() 或者apply()
e.g.:
var obj = {name:'mjj'};
function fn(){
    console.log(this.name);
}
fn();//是空制，由於函數內容this指向window
fn.call(obj);//此時函數內部的this指向obj


構造函數
new object();
new Array();
new String();


父級定義一個屬性必須使用prototype

8.日期對象

var data = new Data();

date.toLocaleString()  //2018/08/21 21:33:23

9.Math數學對象

Math.ceil(); 向上取整,天花板函數
Math.floor(); 向下取整，地板函數
Math.round(); 標準的四捨五入

隨機數
Math.random();獲取到0-1之間的數

function random(min,max){
    Math.floor(Math.random()*(max-min))+min;
}

10.數值和字符串轉換

1.數值轉字符串
toString()
數字+空字符串
2.字符串轉數值
parseInt() 轉整數
parseFloat() 轉浮點型
Number()

NAN
isNaN()

Infinity 無限大

11.let var 區別

1.ES6能夠用let定義塊級做用域變量
2.let 配合for循環的獨特應用
3.let沒有變量提高與暫時性死區
4.let變量不能重複聲明

12.看代碼寫結果

var a = 99;            // 全局變量a
f();                   // f是函數，雖然定義在調用的後面，可是函數聲明會提高到做用域的頂部。 
console.log(a);        // a=>99,  此時是全局變量的a
function f() {
  console.log(a);      // 當前的a變量是下面變量a聲明提高後，默認值undefined
  var a = 10;
  console.log(a);      // a => 10
}
//undefined
//10
//99

二.詳細內容：

1.BOM(瀏覽器對象模型)

  • BOM的核心對象是Window,它表示瀏覽器的一個實例，在瀏覽器中，window對象有雙重角色，便是JavaScript訪問瀏覽器窗口的一個接口。css

    又是ECMAScript規定Global對象。html

1.系統對話框方法

1.alert() 警告框
<body>
    <script type="text/javascript">
        window.alert('mjj');
    </script>
</body>
  • 效果顯示：

  • 例題java

    //例題：
<script>
    console.log(window.location);
    var i=1;
    function f(){
        i++;
        console.log("打印 :  "+i);
        return k;
        function k() {
            return "I love you!"
        }
    }
    f();
    console.log("111111111111");
    f()();
    alert(f()());
</script>
//打印2
//11111111111
//打印3
//打印4
//警告框出現"I love you!"
2.confirm()確認框
  • 若是點擊肯定,返回true,點擊取消,返回false。
<body>
    <script type="text/javascript">
        var src = window.prompt("今每天氣如何");
        switch (src) {
            case '晴天':
                console.log('出去打球');
                break;
            case '陰天':
                console.log('在家睡覺');
                break;
            default:
                console.log("什麼都不作");
                break
        }
    </script>
</body>
  • 效果顯示：

3.prompt()彈出框
  • prompt默認接收兩個參數，第一個參數顯示文本，第二個參數默認的文本。
<body>
    <script type="text/javascript">
        var src = window.prompt("今每天氣如何",'晴天');
        switch (src) {
            case '晴天':
                console.log('出去打球');
                break;
            case '陰天':
                console.log('在家睡覺');
                break;
            default:
                console.log("什麼都不作");
                break
        }
    </script>
</body>
  • 效果顯示

2.定時方法**********

1.一次性任務setTimeout()
  • setTimeout()方法表示一次性定時任務作某件事情,它接收兩個參數,第一個參數爲執行的函數,第二個參數爲時間(毫秒計時:1000毫秒==1秒)
<script type="text/javascript">
        window.setTimeout(function(){
            console.log('2秒後我將打印');
        },2000);
        console.log('馬上打印');
    </script>
//setTimeout(參數1，參數2);參數1爲一個函數，參數2爲時間以毫秒爲單位。此處要知道setTimeout是異步。

  • 一次性任務的清除node

    var timer = setTimeout(callback,1000);
clearTimeout(timer);
//清除定時器。

  • href屬性python

    //2秒後跳轉 百度網頁
setTimeout(function () {
  location.href = 'https://www.baidu.com';
},2000);

  • replacees6

    //2秒後跳轉 百度網頁,在當前頁面跳轉
setTimeout(function(){
    location.replace('https://www.baidu.com');
},2000)
2.週期性循環setInterval
  • setInterval()方法表示週期性循環的定時任務.它接收的參數跟setTimeout()方法同樣.
<script>
    var num = 0;
    var timer = null;
    //開啓定時器
    timer = window.setInterval(function(){
        num++;
        if (num===10){
            //當num===10  清除定時器
            clearInterval(timer);
        }
        console.log(num);//console打印出數字
    },1000);//1000ms=1s
</script>
//每2秒刷新。
setInterval(function(){
    //作測試
    location.reload();
},2000);

//局部刷新  ajax技術，在不重載頁面上，對網頁進行操做
3.locaion對象屬性
  • location是最有用的BOM對象之一,它提供了與當前窗口中加載的文檔有關的信息，還提供了一 些導航功能。事實上，location 對象是很特別的一個對象，由於它既是 window 對象的屬性，也是document 對象的屬性;
<script>
        console.log(window.location);//獲取屬性
        setInterval(function(){
            location.reload();//刷新頁面
        },2000);
    </script>
//侷限較大，一般都是局部刷新，經過AJAX技術，在不重載頁面的狀況，對網頁進行操做

  • reload()方法ajax

    location.reload();//從新加載（有可能從緩存中加載）
location.reload(true;)//從新加載（強制從服務器加載）

  • history編程

    history.go(-1);//後退一頁
history.go(1);//前進一頁
history.go(2);//前進兩頁
console.log(window.location);
//獲取屬性
  • 顯示效果

2.DOM（文檔對象模型）

  • 頂層對象BOM---->文檔------>文檔內容

2.1節點

  • 元素節點
    • 像<body>、<p>、<ul>之類的元素這些咱們都稱爲叫元素節點（element node）。
  • 文本節點

    • 元素只是不一樣節點類型中的一種。若是一份文檔徹底由一些空白元素構成，它將有一個結構，但這份文檔自己將不會包含什麼內容。在網上，內容決定着一切，沒有內容的文檔是沒有任何價值的，而絕大數內容都是有文本提供。數組

      //示例：
<p>這是一個文本</p>
//‘這是一個文本’ 是一個文本節點
  • 屬性節點

    • 還存在着其餘的一些節點類型。例如，註釋就是另一種節點類型。但這裏咱們介紹的是屬性節點。

      //示例
<p title='book'>這是一本書！</p>
//title='book'是一個屬性節點

2.3獲取節點對象的三種方式

2.3.1 document.getElementById 方法
  • getElementById 的方法只有一個參數，用於得到元素的id屬性值，這個id值必須爲字符串類型。
<body>
    <div id="box">MJJ</div>
    <ul id="box2">
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>
        <script>
        var box = document.getElementById('box');
        console.log(box);
        console.dir(box);
    </script>
<body>
//

2.3.2document.getElementsByTagName()方法
  • 經過標籤名字獲取節點對象（獲取是僞數組），這個方法將返回一個元素對象集合。
//示例1：
<body>
    <div id="box">MJJ</div>
    <ul id="box2">
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>   
    <script>
        var box = document.getElementsByTagName('div');
        console.log(box);//HTMLCollection [div#box, box: div#box]   
    </script>
</body>
//示例2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //css
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
     //html
    <div id="box">MJJ</div>
    <ul id="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//JS:
    <script>
        var lis = document.getElementsByTagName('li');
        //三個li籤
        console.log(lis);//HTMLCollection(3) [li, li, li]
        for (var i=0;i<lis.length;i++){//循環將li標籤添加class 屬性，讓CSS渲染
            lis[i].className = 'active';
        }

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

//示例3：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //css
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
     //html
    <div id="box">MJJ</div>
    <ul id="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//JS:
    <script>
        var lis = document.getElementsByTagName('li');
        //三個li籤
        console.log(lis);//HTMLCollection(3) [li, li, li]
        for (var i=0;i<lis.length;i++){//循環
            lis[i].onclick = function(){
                this.className = 'active';//鼠標點擊獲取事件，並將li標籤添加class 屬性，讓CSS渲染
            };
        }

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

//示例4：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //css
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
     //html
    <div id="box">MJJ</div>
    <ul id="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//JS:
    <script>
        var lis = document.getElementsByTagName('li');
        //三個li籤
        console.log(lis);//HTMLCollection(3) [li, li, li]
        for (var i=0;i<lis.length;i++){//循環
            lis[i].onclick = function(){
                for (var k=0;k<lis.length;k++){ 
                    lis[k].className = '';//排他思想，讓其餘li默認class=''
                }

                this.className= 'active';//鼠標點擊獲取事件，並將li標籤添加class 屬性，讓CSS渲染
            };
        }

    </script>
</body>
</html>
2.3.3document.getElementsByClassName()
  • DOM中也提供了經過類名來獲取某些DOM元素對象的方法.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
    <div id="box">MJJ</div>
    <ul id="box2">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
        <script>
        var lis = document.getElementsByClassName('active');
        console.log(lis);//HTMLCollection [li.active]
        var box = document.getElementById("box2");
        console.log(box.children);//得到box2下全部的子元素   HTMLCollection(3) [li.active, li, li]
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li.active{
            color:red;
        }
        ul li.att{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="box">MJJ</div>
    <ul id="box2">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//紅色藍色來回切換
    <script>
        var lis = document.getElementsByClassName('active')[0];
        var des = true;
        lis.onclick = function(){
            if (des){
                this.className = 'att';des=false;
            }else{this.className = 'active';
                des = true;
            }
        };
    </script>
</body>
</html>

2.4對樣式的操做

  • box.style.屬性(CSS屬性帶-，其後面字母大寫)
//示例1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">MJJ</div>
    <script type="text/javascript">
        // 1.獲取事件源對象
        var box = document.getElementById('box');
        // console.log(box);
        //鼠標懸浮，更改樣式
        //2.綁定事件
        box.onmouseover = function () {
            box.style.backgroundColor = "green";
            box.style.fontSize = '30px';
            box.style.width = "200px";
            box.style.height = '200px';
        };
        //鼠標離開更改樣式
        box.onmouseout = function(){
            box.style.backgroundColor = 'red';
            box.style.fontSize = '15px';
            box.style.width = "400px";
            box.style.height = '400px';
        };
    </script>
</body>
</html>

//示例2：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">MJJ</div>
    <script type="text/javascript">
        var box = document.getElementById('box');
        des = true;
        box.onclick = function(){
            if (des){
                box.style.backgroundColor = 'blue';
                des = false;
            }else{
                box.style.backgroundColor = 'green';
                des = true;
            }
        }
    </script>
</body>
</html>

2.5對屬性的操做

  • getAttribute() 接收一個參數，打算查詢的屬性名字。
  • setAttribute() 語序咱們對屬性節點的值作修改，傳遞兩個參數，第一個參數爲屬性名，第二個參數爲屬性值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            color:red;
            font-size:30px;
        }
        p.active{
            color:blue;
        }
    </style>
</head>
<body>
    <p title="my class" id = 's21' class="a">21</p>
    <script>
        var p1 = document.getElementById('s21');
        console.log(p1.getAttribute('title'));//my class
        console.log(p1.getAttribute('class'));//a
        p1.setAttribute('class','s20'); //更改屬性class  值爲s20
        p1.setAttribute('hello','python');//創建屬性hello 值爲python
        console.log(p1.getAttribute('hello'));//python
        console.log(p1.className);//s20
        console.log(p1.title);//my class
        console.dir(p1);//p#s21.s20 屬性
        p1.onclick = function(){
            this.className = this.className + ' active';//加上' active' CSS可用 p.active
        };



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

2.6節點的建立添加刪除

2.6.1 createElement()建立節點

  • 此方法可返回一個Element對象。

    var newNode = document.createElement(tagName);

  • appendChild添加節點

2.6.2 innerText屬性

  • 僅僅對元素獲取或者設置文本

    newNode.innerText = '你好';
2.6.3 innerHTML屬性

  • 既能夠設置文本又能夠設置標籤

    newNode.innerHTML = `<a>mjj</a>`

注意：若是想獲取節點對象的文本內容，能夠直接調用innerText或者innerHTML屬性來獲取。

<body>
    <div id="box">MJJ
        <ul id="box2">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <script>
        var box = document.getElementById('box');
        console.log(box.innerText);
        console.log(box.innerHTML);
    </script>
 </body>

//這是innerText結果
//MJJ
//1
//2
//3

//這是innerHTML結果
//MJJ
//      <ul id="box2">
//          <li class="active">1</li>
//          <li>2</li>
//          <li>3</li>
//      </ul>
2.6.4 appendChild() 插入節點

  • 在指定的節點的最後一個子節點以後添加一個新的子節點。

    appendChild(newNode);
2.6.5insertBefore() 插入節點

  • 方法可在已有的子節點前插入一個新的子節點

    insertBefore(newNode,node);

2.7 removeChild() 刪除節點

  • removeChild()方法從子節點列表中刪除某個節點。若是刪除成功，此方法可返回被刪除的節點，如失敗，則返回NULL。

  • 例題：

<body>
    <ul id = 'box'></ul>
    <script type = 'text/javascript'>
        //經過ID獲取單個節點對象
        var ul = document.getElementById('box');
        var li1 = document.createElement('li');
        var li2 = document.createElement('li');

        //innerText 只能設置文本格式內容
        li2.innerText = '你好';
        //innerHTML 能夠設置HTML格式，如標籤
        li1.innerHTML =`<a href='#'>123</a>`;



        //給li1子標籤(a)添加屬性
        li1.children[0].style.color = 'blue';
        li1.children[0].style.fontSize = '28px';

        //給li2標籤添加屬性（也就是li）color
        // console.log(li2);//li
        li2.style.color = 'red';


        //將建立好的標籤加入ul裏。
        ul.appendChild(li1);
        ul.appendChild(li2);


        //將li2更改text值，並在li1前面，插入ul標籤li2,
        li2.innerHTML = '第一個';
        ul.insertBefore(li2,li1);
        //將li2標籤移除
        ul.removeChild(li2);
    </script>
</body>

2.8 DOM中heigh,clientHeight,offsetHeight屬性

直觀的理解一波

  • clientHeight: 樣式的height + 上下padding(內邊距區域)
  • offsetheight:樣式的height+上下padding+上下border-width。
  • height :樣式高度的height，但在瀏覽器顯示undefined，經過style.height能設置高度，但沒法獲取。
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 300px;
            padding: 10px;
            border: 1px solid red;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        var box = document.getElementById("box");
        console.log(box.height);//undefined 
        console.log(box.offsetHeight);//322
        console.log(box.clientHeight);//320
    </script>
</body>
</html>

3.事件

​ 事件是您在編程時系統內發生的動做或者發生的事情，系統經過它來告訴您在您願意的狀況下您能夠以某種方式對它作出迴應。例如：若是您在網頁上單擊一個按鈕，您可能想經過顯示一個信息框來響應這個動做。

主要事件有：

事件 說明
onclick 鼠標單擊事件
onmouseover 鼠標通過事件
onmouseout 鼠標移開事件
onchange 文本框內容改變事件
onselect 文本框內容被選中事件
onfocus 光標聚焦事件
onblur 光標失焦事件
onload 網頁加載事件

關於事件相關學習參照：http://www.javashuo.com/article/p-qmxilyvt-h.html

4.應用

1.遍歷數據操做頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li p.name{
            color:red;
        }
        li span.price{
            color:blue;
        }
    </style>
</head>
<body>
        <ul id="box"></ul>
        <script>
        //經過ID獲取單個節點對象
        var box = document.getElementById('box');
        var data = [
                {id:1,name:'小米8',subName:'你真好',price:98},
                {id:2,name:'小米6',subName:'你真好2',price:948},
                {id:3,name:'小米4',subName:'你真好3',price:100},
                {id:4,name:'小米2',subName:'你真好4',price:928},
                {id:5,name:'小米10',subName:'你真好5',price:918}
                ];
        //遍歷data，以便操做數組每一個元素
        for (var i=0;i<data.length;i++){
            //建立標籤li  建立節點
            var li = document.createElement('li');
            //插入數據
            li.innerHTML = `<p class="name">${data[i].name}</p>
            <p class="subName">${data[i].subName}</p>
            <span class="price">${data[i].price}元</span>
            `;
            //提交數據
            box.appendChild(li);
        }
    </script>
</body>
</html>

2.切換圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id = 'box'>
        <img src="images/1.jpg" alt="" id = "imgBox">
    </div>
    <button id="prev">上一張</button>
    <button id="next">下一張</button>
    <script>
        //獲取id = 'box'
        var imgBox = document.getElementById('imgBox');
        //獲取id = 'next'
        var next = document.getElementById('next');
        //獲取id = 'prev'
        var prev = document.getElementById('prev');
        var num = 1;
        //事件點擊next,此時執行nextImg函數
        next.onclick = function () {
            nextImg();

        };
        //nextImg函數增長num值得到下一張圖片，最後一張作判斷，返回第一張
        function nextImg() {
            num ++;
            if (num===5){
                num = 1;
            }
            imgBox.src = `images/${num}.jpg`;

        }
        //事件點擊prev 此時執行prevImg()函數
        prev.onclick = function(){
          prevImg();
        };
        //prevImg函數減小num值得到上一張圖片，當num=0返回最後一張圖片
        function prevImg() {
            num --;
            if (num===0){
                num = 4;
            }
            imgBox.src = `images/${num}.jpg`;
        }
    </script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程