JS進階第二天

JQuery節點創建

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="box"></div>
</body>
<script src="./js文件/jquery-1.12.4.js"></script>
<script>
    //匿名函數
    $(function() {
        console.log("堯子陌 真帥")
    })

    //將dom對象轉換成jquery對象
    var $box = $(document.getElementById("box"));
    console.log($box)

    //創建一個元素節點
    console.log($("<strong></strong>"))

    // 創建一個文本節點
    console.log($("<strong>hello word</strong>"));

    //創建一個屬性節點

    $("<p style='color:red'>堯子陌</p>").appendTo($("#box"))

    //創建一個元素節點 並追加到div#box中
    $("<strong>堯子陌</strong>").appendTo($("#box"))

    //上面的過程類似於js中的方法
    document.getElementById("box").innerHTML = "<em>堯子陌<em>"
</script>

</html>

jQuery內部追加節點

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <button id="bth">點擊尾部追加</button>
    <button id="bth2">點擊開頭追加</button>
    <div id="box">
    </div>
</body>
<script src="./js文件/jquery-1.12.4.js">
</script>
<script>
    $("#bth").click(function() {
        var $li = $("<li>堯子陌</li>");
        //$li.appendTo($("#box")) //子元素追加父元素的尾部
        $("#box").append($li) //在父元素的尾部追加某個元素
    })


    $("#bth2").click(function() {
        var $li = $("<li>驚鴻</li>");
        //$li.prependTo($("#box")) //子元素追加父元素的起始位置
        $("#box").prepend($li) //在父元素的起始位置追加某個元素
    })
</script>



</html>

JQuery外部追加節點

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <button id="bth">外部之前追加內容</button>
    <button id="bth2">外部之後追加內容</button>
    <ul id="con">
        <li></li>
        <li></li>
        <li></li>
        <li id="item">堯子陌</li>
        <li>瑤族弄</li>
        <li></li>
    </ul>
</body>
<script src="./js文件/jquery-1.12.4.js"></script>
<script>
    $("#bth").click(function() {
        var $li = $("<li>指定元素前面追加內容</li>");
        $("#item").before($li); //指定的同級元素之前插入內容
        $li.insertBefore($("#item")) //將新的內容追加的指定的同級元素之前
    })



    $("#bth2").click(function() {
        var $li = $("<li>指定元素後面追加內容</li>");
        $("#item").after($li); //指定的同級元素之後插入內容
        $li.insertAfter($("#item")) //將新的內容追加的指定的同級元素之後
    })
</script>

</html>

JQuery刪除節點的內容

empty() 刪除被選元素的子元素（和其他後代元素）
remove() 刪除被選元素(及其子元素)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="bth">empty()</button>
    <button id="bth2">remove()</button>
    <ul id="con">
        <li>龍王</li>
        <li>龍王</li>
        <li>龍王</li>
        <li>龍王</li>
        <li>龍王</li>
        <li>龍王</li>
        <li>龍王</li>
        <li>龍王</li>
    </ul>
</body>
<script src="./js文件/jquery-1.12.4.js"></script>
<script>
    $("#bth").click(function() {
        $("#con").empty()
    })

    $("#bth2").click(function() {
        $("#con").remove()
    })
</script>

</html>

JQuery節點克隆

clone()方法深度複製所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節點
clone() 默認參數false，克隆的是結構
JS克隆節點並修改樣式追加到ul中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <ul>
        <li>臨風笑卻世間</li>
        <li>驚鴻</li>
        <li>步驚雲</li>
        <li>聶風</li>
    </ul>
</body>
<script src="./js文件/jquery-1.12.4.js"></script>
<script>
    /*$("li").click(function() {
      console.log($(this).html());
     $("ul").append($("li:first").clone().css("color", "blue"));
     $("ul").append($("li:first").clone(true).css("color", "blue"));
      }) */




    var cloneone = document.querySelectorAll("ul>li")[0].cloneNode(true);
    console.log(cloneone)
    document.querySelectorAll("ul")[0].appendChild(cloneone);
</script>

</html>

JQUery節點替換

replaceWith(newContent) 將所有匹配的元素替換成指定的 HTML 或 DOM 元素；
replaceAll(selector)：用指定的元素替換掉所有匹配到的所有目標元素


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn">replaceWith(newContent)</button>
    <button id="btn2">replaceAll(selector)</button>
    <ul>
        <li>這是原來的內容</li>
        <li>這是原來的內容</li>
        <li>這是原來的內容</li>
    </ul>
</body>
<script src="./js/jquery-1.12.3.min.js"></script>
<script>
    //replaceWith(newContent) 將所有匹配的元素替換成指定的 HTML 或 DOM 元素;
    $("#btn").click(function(){
        // $('ul').replaceWith("<li style='color:red'>這是新的內容</li>");

        // 將所有匹配到的li及其內容 用 新的元素或內容進行替換
        $("li").replaceWith("<li style='color:red'>這是新的內容</li>");
    })
    
    //replaceAll(selector)：用指定的元素替換掉所有匹配到的所有目標元素 
    $("#btn2").on('click',function(){
        // 用新的內容 替換 所有匹配到的li及其內容
        $("<li style='font-style:italic;'>replaceAll創建的新內容</li>").replaceAll($('li'));
    })
</script>
</html>

JQuery節點包裹

wrap()方法將所有匹配的元素用其它元素的結構化標記包裹起來；
unwrap() 將包裹的父元素移除；能快速取消 wrap()方法的效果；每次只能移除最外層元素；這個方法比較簡單，不接受任何參數；
wrapAll()方法將所有匹配到的元素集中到一起用單個元素包裹起來
wrapInner() 將每一個匹配的元素的內容（包括文本節點）用一個 html 結構包裹起來


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="wrapBtn">wrap()</button>
    <button id="unwrapBtn">unwrap()</button>
    <button id="wrapAllBtn">wrapAll()</button>
    <button id="wrapInnerBtn">wrapInner()</button>
    <p>問君能有幾多愁</p>
    <p>恰似一江春水向東流</p>
    <p><a href="">驀然回首</a></p>
    <p>那人卻在燈火闌珊處</p>
</body>
<script src="./js/jquery-1.12.3.min.js"></script>
<script>
    //wrap()方法 將所有匹配的元素用其它元素的結構化標記包裹起來 
    $("#wrapBtn").click(function(){
        // $('p').wrap("<div>");
        $('p').wrap("<div></div>");
    })
    // 每一個匹配到的元素（p）外面都包裹了一層 標記（div）
    
    //wrapAll()方法 將所有匹配到的元素集中到一起用單個元素包裹起來 
    $("#wrapAllBtn").click(function(){
        $('p').wrapAll("<div></div>");
    })
    // 所有的p使用一個div包裹

    
    //unwrap() 將包裹的父元素移除；能快速取消 wrap()方法的效果；每次只能移除最外層元素；這個方法比較簡 單，不接受任何參數 
    $("#unwrapBtn").click(function(){
        $('p').unwrap();
    })
    //去除 wrap() 和 wrapAll() 包裹的外部元素

    
    //wrapInner() 將每一個匹配的元素的內容（包括文本節點）用一個 html 結構包裹起來
    $("#wrapInnerBtn").click(function(){
        $('p').wrapInner("<div></div>");
    })
    // 匹配到的每一個p內部的結構或內容都使用div包裹
</script>
</html>

JQuery節點訪問

parent():返回被選元素的直接父元素；該方法只會向上一級 DOM 樹進行遍歷
parents():返回被選元素的所有祖先元素；向上查找一直到文檔的根元素
children():返回被選元素的所有直接子元素；該方法只會對下一級 DOM 樹進行遍歷
find():返回被選元素的後代元素，一路向下直到最後一個後代
siblings():返回被選元素的所有同胞元素（前面和後面的所有同級元素）
next():返回被選元素的下一個同胞元素，該方法只返回一個元素
nextAll():返回所有跟隨被選元素的同胞元素（即:返回的是被選元素後面的所有兄弟元素）
prev():返回被選元素的上一個同胞元素，該方法只返回一個元素
prevAll():返回所有被選元素前面同胞元素


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<pre>
    <ul>
        <li><a href="javascript:;">111111</a></li>
        <li id="item"><a href="javascript:;"><span>222222</span></a><span>uuuuuuu</span><strong>mmmmmmm</strong></li>
        <li><a href="javascript:;">333333</a></li>
        <li><a href="javascript:;">444444</a></li>
    </ul>
</pre>   
</body>
<script src="./js/jquery-1.12.3.min.js"></script>
<script>
    $("#item").click(function(){
        console.log($(this));
        console.log(this);
    });

    //jQuery 祖先:向上遍歷 DOM 樹，查找元素的祖先。方法如下： 
    //parent():返回被選元素的直接父元素；該方法只會向上一級 DOM 樹進行遍歷 
    console.log($("#item").parent());

    //parents():返回被選元素的所有祖先元素；向上查找一直到文檔的根元素（<html>）
    console.log($("#item").parents());
    console.log($("#item").parents("pre"));
    console.log($("#item").parents()[1]);

    //jQuery 後代:向下遍歷 DOM 樹，吵着元素的後代；方法如下： 
    //children():返回被選元素的所有直接子元素；該方法只會對下一級 DOM 樹進行遍歷
    console.log($("#item").children());
    console.log($("#item").children()[1]);
    console.log($("#item").children("span"));
    console.log($("#item").children()[0]);
    console.log($("#item").children("a"));
    console.log($("#item").children().eq(0));
    console.log($("#item").children().first());

    //find():返回被選元素的後代元素，一路向下直到最後一個後代 
    console.log($("#item").find("span"));
    console.log($("#item").find("a"));
    
    //jQuery 同胞:遍歷同胞元素（訪問 DOM 樹中的同級元素）。方法如下： 
    //siblings():返回被選元素的所有同胞元素（前面和後面的所有同級元素） 
    //點擊li標籤，當前這個顏色爲紅色，其它兄弟顏色爲橙色  a標籤有默認樣式
    // $('li').click(function(){
    //     $(this).children().css("color",'red');
    //     $(this).siblings().children().css("color","orange");
    // });

    //next():返回被選元素的下一個同胞元素，該方法只返回一個元素 
    //nextAll():返回所有跟隨被選元素的同胞元素（即:返回的是被選元素後面的所有兄弟元素） 
    $("li").click(function(){
        $(this).next().children().css("color","orange");
    })

    
    //prev():返回被選元素的上一個同胞元素，該方法只返回一個元素 
    //prevAll():返回所有被選元素前面同胞元素
    $("li").click(function(){
        $(this).prevAll().children().css("color","purple");
    })
</script>

JQuery實現追加和刪除評論

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        h2 {
            color: red;
        }
        
        #critic {
            margin-top: 20px;
            vertical-align: middle;
            resize: none;
        }
        
        h4 {
            color: blue;
            font-size: 25px;
            font-family: "楷體";
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h2>今日話題：你怎麼看待李小璐和小叔子的戀情</h2>

    <p>用戶暱稱：<input type=text id="nickname"></p>
    <p>用戶評論：<textarea name="" id="critic" cols="20" rows="10"></textarea></p>
    <p><button style="margin-left: 80px;" id="bth">點擊追加評論</button></p>
    <h4>來自廣大網友的心聲</h4>
    <ul id="con">
        <li><strong>暱稱爲堯子陌的網友評論：</strong>賈乃亮的綠帽子帶穩了</li>
    </ul>
</body>
<script>
    //獲取元素的id值
    var nickname = document.getElementById("nickname");
    var critic = document.getElementById("critic");
    var bth = document.getElementById("bth");
    var con = document.getElementById("con");


    var li = null;
    bth.onclick = function() {
        if (critic.value == "" || nickname.value == "") {
            alert("用戶名和評論不能爲空");
            return; //這一步驟是爲了判斷值是否爲空 如果有用戶輸入的值則返回值
        };
        //創建一個換行的變量li
        li = document.createElement("li");
        console.log(li)
        li.innerHTML = ("<strong>用戶名爲" + critic.value + "的網友評論:</strong>" + "<span>" + nickname.value + "</span>" + "<button class='del'>刪除</button>");
        con.appendChild(li);
        var del = document.getElementsByClassName("del");


        for (var i = 0; i < del.length; i++) {
            del[i].onclick = function() {
                this.parentNode.remove()


            }

        }



    }







    // parentNode.append()可以同時傳入多個節點或字符串，沒有返回值；
    //parentNode.appendChild()只能傳一個節點，且不直接支持傳字符串(需要parentNode.appendChild(document.createTextElement('字符串'))代替)，返回追加的Node節點;
</script>

</html>

call和apply方法

call和apply作用是一樣的，都是爲了改變某個函數運行時的上下文（context）而存在的，換句話說，就是爲了改變函數體內部this的指向。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 定義一個求和的函數
    function sum(a,b){
        return a+b;
    }   

    // 定一個求差的函數
    function reduce(a,b){
        return a-b;
    }

    // 求兩個參數的和
    var a = 10,
        b = 20, 
        result = sum(a,b);
    console.log("result:",result);//result: 30
    
    // 求兩個數的差
    var result2 = reduce(a,b);
    console.log("result2:",result2);//result2: -10

    // 每一個函數Function對象都有 call() 和 apply()方法
    // call(thisObj,arg1,arg2,...,argX)
    var result3 = sum.call(reduce,a,b);//調用的是前面的方法sum   第一個參數thisObj  其它參數列表thisObj中的參數
    console.log("result3:",result3);//result3: 30

    // apply(thisObj,[arg1,ar2,..,argX])
    var result4 = reduce.apply(sum,[a,b]);
    console.log("result4:",result4);//result4: -10
</script>
</html>

js中的事件

    /*
        窗口事件：
            onload    結構或圖片加載完成執行的操作
            onresize  窗口改變事件
            onscroll  滾動條事件

        鼠標事件：
            onclick   點擊事件
            ondblclick  雙擊事件
            oncontextmenu  右鍵事件

            onmouseenter/onmouseover   鼠標滑過
            onmouseleave/onmouseout    鼠標離開

            onmousedown   鼠標按下
            onmouseup     鼠標鬆開
            onmousemove   鼠標移動

        鍵盤事件
            onkeydown  鍵盤按鍵被按下
            onkeyup    鍵盤按鍵被鬆開
            onkeypress 鍵盤按鍵按下並鬆開，不識別功能鍵

        表單事件
            onfocus    獲取焦點事件
            onblur     失去焦點
            oninput    正則輸入事件
            onchange   表單內容或狀態發生改變
            onselect   表單內容被選中事件
            onrest     重置事件
            onsubmit   提交事件
    */

事件對象的兼容性寫法


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 事件對象封裝的是事件被觸發時的詳細信息
    // 獲取事件對象  事件被觸發時自動生成  事件完畢銷燬
    // document.onclick = function(e){
    //     console.log(e);//谷歌瀏覽器和火狐高版本可以獲取   IE高版本瀏覽器也可以獲取  IE8及以下版本沒有辦法獲取 undefined
    // }

    // console.log(window);  IE8及以下 不能明確對象的類型

    // IE8及以下版本 只能通過window獲取
    // document.onclick = function(){
    //     console.log(window.event);//谷歌瀏覽器和火狐高版本可以獲取   IE高版本瀏覽器也可以獲取   IE8及以下版本也可以獲取  火狐低版本瀏覽器只能通過傳參獲取事件對象
    //     // window對象可以省略
    // }

    // 瀏覽器獲取事件對象的兼容性寫法
    document.onclick = function(e){
        var ev = e || event;

        console.log(ev.clientX);
    }
</script>
</html>

事件對象類型


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #box{
            height: 100px;
            width: 100px;
            border: solid 1px;
        }
    </style>
</head>
<body>
    <input type="text" id="ipt">
    <div id="box"></div>
</body>
<script>
    var ipt = document.getElementById("ipt");
    var box = document.getElementById("box");

    ipt.onfocus = function (e) {
        var ev = e || event;
        console.log(ev);

        // type屬性  獲取相應事件的事件類型
        console.log(ev.type);
    }

    ipt.onkeyup = function(e){
        var ev = e || event;

        console.log(ev);

        console.log("鍵盤被鬆開的事件類型：",ev.type)

        // keyCode  獲取鍵盤按鈕對應的鍵盤碼
        console.log("按下的keyCode碼：",ev.keyCode);
    }

    box.onclick = function (e) {
        var ev = e || event;

        console.log(ev);

        // 獲取鼠標距離瀏覽器左邊緣和上邊緣有效區域的位置
        console.log("距離瀏覽器左邊距離：",ev.clientX,"px","，上邊距離：",ev.clientY,"px");
    }
</script>
</html>

點擊出現圖片


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <img src="./images/1.jpg" alt=""> -->
</body>
<script>
   //需求：鼠標點擊頁面中任意位置，生成隨機的一張圖片

   //封裝一個函數，隨機獲取一張圖片
   function ranPic(){
        // 存儲圖片的容器
        var picArr = ['./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg','./images/5.jpg'];

        // 獲取隨機索引
        var ranIndex = parseInt(Math.random() * picArr.length);

        // 通過隨機索引獲取隨機圖片
        return picArr[ranIndex];
   } 

   console.log(ranPic())


   document.onclick = function(e){
        // 獲取事件對象兼容性寫法
        var ev = e || event;

        // 獲取距離頁面左邊和上面的距離
        var ml = ev.clientX;
        var mt = ev.clientY;

        // 創建一個圖片元素
        var img = document.createElement("img");
        // 給img標籤添加圖片
        img.src = ranPic();

        // 將img元素設置到鼠標點擊的位置
        img.style.cssText = "width:100px;position:absolute;top:" + mt + "px;left:" + ml + "px;";

        // 將img元素追加到body中
        document.body.appendChild(img);
   }
</script>
</html>

js實現圖片拖拽功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            height: 200px;
            width: 200px;
            background-color: red;
            position: absolute;
            cursor: move;
            top: 0;
            left: 0;
            /*這個步驟非常重要  */
        }
    </style>
</head>


<body>
    <div id="box"></div>
</body>
<script>
    //獲取元素的id值
    var box = document.getElementById("box");
    //設置鼠標按下事件

    var maxX = document.documentElement.clientWidth - box.clientWidth;
    console.log(maxX)
    var maxY = document.documentElement.clientHeight - box.clientHeight;
    console.log(maxY)
    box.onmousedown = function(e) {
        var ev = e || event; //獲取好的事件對象；
        console.log(ev) //打印事件對象的封裝的功能；
        var starX = ev.clientX;
        var starY = ev.clientY;
        console.log(starX);
        console.log(starY);
        //獲得初始的座標軸  並進行打印查看

        //設置鼠標在整個文檔的移動事件
        document.onmousemove = function(e) {
            var ev = e || event;
            var moveX = ev.clientX - starX;
            var moveY = ev.clientY - starY;
            //鼠標移動後的座標軸

            //重新給座標軸賦值
            starX = ev.clientX;
            starY = ev.clientY;


            //獲得元素的移動後的位置
            var ml = box.offsetLeft + moveX;
            var mt = box.offsetTop + moveY;



            // 判斷移動邊界範圍
            if (ml > maxX) {
                ml = maxX;
            } else if (ml < 0) {
                ml = 0;
            }

            if (mt > maxY) {
                mt = maxY;
            } else if (mt < 0) {
                mt = 0;
            }

            //將最新的位置 設置到頁面
            box.style.left = ml + "px";
            box.style.top = mt + "px"





        }
    }


    //設置鼠標鬆開 停止移動 清除事件
    window.onmouseup = function() {
        document.onmousemove = null;
    }

    // 窗口改變事件
    window.onresize = function() {
        var maxX = document.documentElement.clientWidth - box.clientWidth;
        var maxY = document.documentElement.clientHeight - box.clientHeight;
    }
</script>

</html>

堯子陌

發佈了46 篇原創文章 · 獲贊 0 · 訪問量 1316

私信關注

JQuery節點創建

jQuery內部追加節點

JQuery外部追加節點

JQuery刪除節點的內容

JQuery節點克隆

JQUery節點替換

JQuery節點包裹

JQuery節點訪問

JQuery實現追加和刪除評論

call和apply方法

js中的事件

事件對象的兼容性寫法

事件對象類型

點擊出現圖片

js實現圖片拖拽功能

python gdal 安裝使用（Windows， python 3.6.8）

JS進階第一天

css 3D

JQuery第四天

JS進階第四天

ES5第二天

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結