# JQuery 12/16學習護照 ## 環境安裝 1. [VScode](https://code.visualstudio.com/) 2. [Jquery](https://code.jquery.com/) ## CDN ```javascript= <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` ## 為什麼使用JQ? 1. 市佔率 2. 函式庫大小 3. 對 Internet Explorer 的支援度 4. DOM 導向 vs. 資料導向 5. 難易度 -- [資料來源](https://michaelchen.tech/blog/why-or-why-not-jquery/) ## 學習資源 1. w3c (新手村) 2. IT幫幫忙 3. Github 4. StackOverflow ...... ## 好用的套件推薦 1. [SweetAlter](https://sweetalert2.github.io/) 2. [dataTable](https://datatables.net/) 3. [chart.js](https://www.chartjs.org/) 4. [Wow.js](https://wowjs.uk/) ## javascript vs JQuery 1. jQuery是什麼？ > jQuery是一個以Javascript來編寫的函式庫，簡單來說就是先幫你實作了很多Javascript的函數功能，用途是讓開發者可以更輕鬆方便的製作網站功能，最重要的是它是免費的。 2. 開發網頁一定要會jQuery嗎？ > 如果這個問題發生在幾年前，答案應該會是否定的。不過現在jQuery幾乎已經是網頁前端開發必備技能。現在很少面試會特別問你會不會jQuery，通常預期會JavaScript就是會jQuery。 > > 而你在使用進階的其他三方資料庫時會發現很多都依賴jQuery，例如Bootstrap ```javascript= // #my-id li document.getElementById("my-id").getElementsByTagName("li"); // ul li var ul_collect = document.getElementsByTagName("ul"); var li_arr = []; for(var i = 0; i < ul_collect.length; i++){ li_collect = ul_collect[i].getElementsByTagName("li"); for(var j = 0; j < li_collect.length; j++){ li_arr.push(li_collect[j]); } } ``` ```javascript= $("#my-id li"); // ul li $("ul li"); ``` ## HTML 概念 ```html <html> <head></head> <body></body> <footer><footer> </html> ``` [html w3c傳送門](https://www.w3schools.com/html/) ### TODO 1 創建HTML檔案 ## javascritp [js w3c傳送門](https://www.w3schools.com/js/js_intro.asp) ### jquery 教學 `$(this).hide() - hides the current element.` `$("p").hide() - hides all <p> elements.` `$(".test").hide() - hides all elements with class="test".` `$("#test").hide() - hides the element with id="test".` ### TODO 2 引入JQ ### code ```javascript= <h1>王大明</h1> <script> var myName = $('h1').val(); console.log(myName); </script> ``` ```javascript= <h1 id='name'>王大明</h1> <script> var myName = $('#name').val(); console.log(myName); </script> ``` ```javascript= <h1 class='name'>王大明</h1> <script> var myName = $('.name').val(); console.log(myName); </script> ``` ### event ```javascript= <span></span> <script> $(document).ready(function(){ $("span").val('jerry is pretty!'); </script> ``` ```javascript= <h1 id='target'>請勿拍打或觸摸</h1> <script> $( "#target" ).click(function() { alert( "你點到我了!!!" ); }); </script> ``` ```javascript= <h1 class='fade'>請勿拍打或觸摸</h1> <script> $( "h1.fade" ).hover(function() { $( this ).fadeOut( 100 ); $( this ).fadeIn( 500 ); }); </script> ``` ### 子節點 父節點 第一次聽到子節點跟父節點一定很奇怪，這到底事什麼？ > 我們可以看到以下這兩張圖 > ![](https://i.imgur.com/Dov0pKG.png) >![](https://i.imgur.com/AbEhL3r.png) > 如同高中公民，我們子孫節點是span > 祖先節點是div > li是span的父節點 > ul是li的父節點 ```javascript= <script> <h2><span></span></h2> <h1><span></span></h2></h1> $(document).ready(function(){ $("span").parent().css({"color": "red", "border": "2px solid red"}); }); </script> ``` ### TODO 3 創建HTML檔案 改變上面參數，讓顏色變成**藍色** ### TODO 4 引入sweeter alter 將sw引入至HTML檔案 ```javascript= <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.js"></script> ``` ### TODO 5 改變sweeter alter中文字圖片吧！ ```htmlembedded= <body> <script> Swal.fire({ imageUrl: 'https://imgur.com/ePDqx4D.jpg', text: '哭阿，有地方錯了', }) </script> </body> ```