2019/0322/DOM&JQ基礎&系統分析設計PPT&在職班補充

前端

DOM 文件物件模型

html 階層樹根

jq = js 做好的函式庫 => 幾乎js能做的都做得到但是更簡化 => 好學所以變主流

教學方式 jq

dom 網頁上操作抓id就能操作

網頁上物件活的不是死的但因為階層樹根的特性可以從最上面階層慢慢選到下面你要的地方

asp.net 就是根據需要的功能選擇適合的控制項去調整屬性跟操作跟邏輯

前端則是更複雜你可以不用button但是用div改成button的樣子

創建標籤 createElement

apendChird 新增標籤

要新增到正確的樹狀位置

children [ ] 指定樹狀位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #btn{
            border:2px solid;
            width:100px;
            cursor:pointer;
            background-color:#808080;
            box-shadow:2px 2px 5px black;
        }
    </style>
</head>
<body>
    <table border="1" width="400" id="myTable">
        <tr>
            <td>姓名</td>
            <td>成績</td>
        </tr>
        <tr>
            <td>張三</td>
            <td>54</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>78</td>
        </tr>


    </table>

    <hr />
    姓名:<input id="txtName" type="text" /><br />
    成績:<input id="txtScore" type="text" />
    <div id="btn" onclick="InsertData()">插入成績資料</div>


    <script>
        var myTable = document.getElementById("myTable");
        var Name = document.getElementById("txtName");
        var Score = document.getElementById("txtScore");

        function InsertData() {

            var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");

            td1.innerText= Name.value;
            td2.innerText = Score.value;

            tr.appendChild(td1);
            tr.appendChild(td2);

            myTable.children[0].appendChild(tr);
        }

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

JQUERY

前端網站很容易沒辦法向下版本相容所以舊版本起勿更新最好是重製在製

好像是因為綁GIT所以不相容

後來發現只要把官網函式庫鏈結檔案下載下來就好了不一定要用這種方式安裝

cdn cbn 模式

$呼叫('函數名稱').addClass('yellow');

$呼叫('函數名稱').addClass('red').addClass('line');

扛拜 ??? combine 結合

不會依照這裡的命令顯示會依照 css style head 順序後面會蓋掉前面的先執行

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .line {
            border: 1px solid;
        }
        .red {
            background-color: red;
        }
        .yellow {
            background-color: yellow;
        }

      
    </style>
</head>
<body>
    <ul id="list">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
    </ul>

    <ol id="list2">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
    </ol>


    <script src="Scripts/jquery-3.3.1.js"></script>
    <script>
        //$('#list').addClass('yellow');
        //$('#list').addClass('line');
        //$('#list').addClass('red');
        $('#list').addClass('red').addClass('line').addClass('yellow');

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

系統分析就像一門藝術很抽象化

這裡少聽東西建議聽回播看看

jq選擇器

選擇器跟 css一樣可以去選擇子標籤

$('#list2 li').addClass('line')

選擇子標籤的指定標籤

$('#list2 li:first-child').addClass('line')

指定子標籤但不影像子標籤的子標籤

$('#list2>li:first-child').addClass('line')

選擇子標籤內的基數列

$('#list>li:nth-child(2n+1)').addClass('yellow');

js沒有選擇器可用那怎辦呢

指定id的標籤

var list = document.getElementByID("list")

如果要指定子標籤呢?要就重複做不然只能寫迴圈

for(i=0;i<list.children.length;i++){list.children[i].className="red line"};

如果要指定基數列呢?

for(i=0;i<list.children.length;i++){list.children[i].className="red line";  
if (i % 2 == 0)list.children[i].className += " yellow";};

要指定子標籤的指標簽呢?

list2.children[0].className = "line";

js與jq最大差別在於選擇器

jq控制css

按鈕按下去文本才吃屬性

    <h1>
        歡迎光臨我的網站
    </h1>
    <input id="Button1" type="button" value="button" onclick="getH1ClassCSS()" />

    <script src="Scripts/jquery-3.3.1.js"></script>
    <script>

        function getH1ClassCSS() {
            //$('h1').addClass('h1');
            $('h1').css({
                'background-color': 'red',
                'color': 'white',
                'border': '3px solid green',
                'text-align': 'center',
                'font-size': '36pt'
            });


        }

    </script>

集合不是放在中括號就是放在大括號

jq 不只不用宣告連監聽器都省了 ...

jq小動畫互相呼叫函式

<body>

    <h1>
        歡迎光臨我的網站
    </h1>
    <input id="Button1" type="button" value="button" onclick="getH1ClassCSS()" />
    <!--<input id="Button2" type="button" value="button" onclick="getH1ClassCSS2()" />-->


    <script src="Scripts/jquery-3.3.1.js"></script>
    <script>

        function getH1ClassCSS() {
            //$('h1').addClass('h1');
            $('h1').css({
                'background-color': 'red',
                'color': 'white',
                'border': '3px solid green',
                'text-align': 'center',
                'font-size': '36pt'
            });

            setTimeout("getH1ClassCSS2()",300);
        }


        function getH1ClassCSS2() {
            $('h1').css({
                'background-color': 'blue',
                'color': 'yellow',
                'border': '10px dotted white',
                'text-align': 'center',
                'font-size': '50pt'
            });

            setTimeout("getH1ClassCSS()", 300);
        }

    </script>
</body>