> For the complete documentation index, see [llms.txt](https://johch3n611u.gitbook.io/c50108/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201903/2019-0322.md). # 2019/0322/DOM\&JQ基礎&系統分析設計PPT&在職班補充 ## 前端 ### DOM 文件物件模型 {% embed url="" %} html 階層樹根 jq = js 做好的函式庫 => 幾乎js能做的都做得到但是更簡化 => 好學所以變主流教學方式 jq dom 網頁上操作抓id就能操作網頁上物件活的不是死的但因為階層樹根的特性可以從最上面階層慢慢選到下面你要的地方 asp.net 就是根據需要的功能選擇適合的控制項去調整屬性跟操作跟邏輯前端則是更複雜你可以不用button但是用div改成button的樣子創建標籤 createElement apendChird 新增標籤要新增到正確的樹狀位置 children \[ ] 指定樹狀位置 ```

姓名	成績
張三	54
李四	78

姓名:
成績:

插入成績資料

``` ## JQUERY {% embed url="" %} {% embed url="" %} 前端網站很容易沒辦法向下版本相容所以舊版本起勿更新最好是重製在製 ![](/files/-LaY33q2_RpHXN52Rl4B) ![](/files/-LaY3Ds1EOGQiMw0Mu9p) 好像是因為綁GIT所以不相容後來發現只要把官網函式庫鏈結檔案下載下來就好了不一定要用這種方式安裝 ![](/files/-LaYC-5MG_bi8srS2iCu) cdn cbn 模式 $呼叫('函數名稱').addClass('yellow'); $呼叫('函數名稱').addClass('red').addClass('line'); 扛拜 ??? combine 結合不會依照這裡的命令顯示會依照 css style head 順序後面會蓋掉前面的先執行 ```

``` 系統分析就像一門藝術很抽象化這裡少聽東西建議聽回播看看 ### 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 歡迎光臨我的網站 ``` 集合不是放在中括號就是放在大括號 #### jq 不只不用宣告連監聽器都省了 ... ### jq小動畫互相呼叫函式 ```

歡迎光臨我的網站

``` ## 在職班補充 ### #pre Javascript DOM 操作 Append appendChild createElement getElementById createTextNode insertBefore children children\[n] target ### #jQ 函式庫常用的功能已經寫好了，繼承像CSS選擇器的方法。 {% embed url="" %} 很多前端的compones元件 formwork框架很多都是 Jq 開發的。 JQ API寫得非常好 1跟2同時存在但2版不支援舊版IE 、 3版為整合版同時支援新開發的網站可以選擇新版，但舊的盡量不要更新版本，並不是完全像下相容其實 Jquery = $ $() = jquery() $(‘#list’) = jquery(‘#list’) ### ##小技巧利用 CSS 選擇器打關鍵字選擇複製到 JQ去貼 nth-child(2n+1) combine class 會以後面為組不是指combind的順序而是style的上下屬性有相衝時的優先順序簡單的 \ 在javascript 就必須要利用到迴圈等等方式才能做到上面三行的功能 //var list = document.getElementById("list"); //list.className = "line"; //for (i = 0; i < list.children.length; i++) { // list.children\[i].className = "line yellow"; // if (i % 2 == 0) // list.children\[i].className += " red"; //} ### ##jq對css方法的支援 Inline 每行都寫 => css 選擇器少寫一些 => 無法指定必須動態加時 jq 只要是Key value 在程式裡面必須要用字串表現且要用逗點隔開專題出問題後面被康哥打亂了都沒在聽但是應該跟之前的不會差太多 ![](/files/-LiCL6YtFnZ5Cz-vGypC) ## 簡報 ![](/files/-LaZImMpvxy1CIWjvCX1) ## 系統分析與設計 99 流程圖 -> 需求確認完成(通常會少( 只會大概知道. 環境圖式草稿確認系統與外部時體之間關係事件條列式是為了打草稿打功能草稿 xx流程圖上的字不一定會出現在條列式上? 菱形是指判斷 ![](/files/-LaZMetuSObxM-cdPZ27) use case ![](/files/-LaZJ6q2eEvQEVGN1V60) ![](/files/-LaZJELqCW9_tfv5LQT6) ### 職業競賽通常管理系統 ![](/files/-LaZIrvCGYZM2_yRyhlX) {% embed url="" %} ![](/files/-Laa3CCgVafJ4HWI6Te1) ![](/files/-Laa3FF6S0mLnPJJVrzD) ![](/files/-Laa3HQtPzepwrPwSEwv) ![](/files/-Laa3LLJAe82-GuXdADN) ![](/files/-Laa3Nb3LLfeu2y4Jv8N) ![](/files/-Laa3PTPjMbD6aX5F9OJ) ![](/files/-Laa3RUeAcNLBnaX56VN) enduser 使用者的霸主只是單純再用系統的人只知道使用者流程但 know how 不懂系統的流程 coder 大陸工匠 programer 設計系統設計師 sd sa dba pm 斗面拉里舉 domain knowledge 企業管理產銷人發財工業管理物料生館銷售製造存貨\\ ![](/files/-Laa3URQHQ_uJ3JMc6vQ) ![](/files/-Laa3XMRGkm6KuZz2xVs) ![](/files/-Laa3Z6kDnA7JHJ_pclP) ![](/files/-Laa3aAYokmI1Jyk9g6M) ![](/files/-Laa3bvo90bmsw0fPOGf) ![](/files/-Laa3eFOyHNApGAZ8J-S) ![](/files/-Laa3g0FGa3bWJ7G8yp3) ![](/files/-Laa3jPMEWmvfSjQGcrZ) ![](/files/-Laa3mN9hOPM9A61wcJl) ![](/files/-Laa3ocwCPkQt7M4tmN4) ![](/files/-Laa4Q8J10-z47PA2biW) ![](/files/-Laa4TqDq0gFBsT-x5GF) 結構化技術物件導向技術 uml 軟體工程雛型主要是降低時間風險成本螺旋模式主要在風險控管敏捷軟體開發? 前面一堆sop太慢遊戲公司最需要因為生命週期很短只有一種遊戲歷久不衰博弈 scrum 燃盡圖 mda 159 - 161 ![](/files/-Laa4YhEaa8x-Hr__yhZ) ![](/files/-Laa4jId11vPsfrT4RBr) ![](/files/-Laa4msbRV5np4edLDlL) ![](/files/-Laa4pfcTdoCHs5PwDIx) ![](/files/-Laa4s9XoA-dynu_0DuS) ![](/files/-Laa4uICf2_x5Bmkro_S) ![](/files/-Laa4wknbyzo8QXwBMZP) ![](/files/-Laa4zAMELeXwX0aN8NP) ![](/files/-Laa5-zSYtxTNyXdFveG) ![](/files/-Laa52mvE4Ll3v-p0Dbj) ![](/files/-Laa55LQ9BaVMss3s7dK) js 程式進入點 main or page load sql 計算過 having 包含 groud up 強迫參考完整性高考 ![](/files/-Laa58XOlerUl-c7pL3F) ![](/files/-Laa5AQ1x0bCdGiOcxV0) ![](/files/-Laa5CC_FXiroT3CjF99) ![](/files/-Laa5EFoOxZZOgCr_NBg) ![](/files/-Laa5GP_sE9B-N3V0DsH) ## 其他循序圖趨勢線上升下 {% embed url="" %} {% embed url="" %} {% embed url="" %} {% embed url="" %}