Hi~前端工具們 - jQuery basic 1

# Hi~前端工具們 - jQuery basic 1 前端工具們： 1. jQuery 2. Bootstrap 3. CSS 預處理器 Sass 4. Babel 5. gulp 6. Webpack --- ## jQuery 是一種 **JS library** - 優勢: 檔案小又可以壓縮，支援CSS3，跨瀏覽器透過簡化語法將常見的 function 包在一起，進而壓縮檔案大小例如 $() 就是 selector $ = jQuery .on() 就是 onClick --- ### 由來 - **2006年 IE7 & Firefox** <= jQuery 誕生年當年主流瀏覽器是 ie ，有多種瀏覽器，一個功能就可能要有五種寫法 所以 jQuery 的誕生在此時最大的優勢就是跨瀏覽器 Cross-Beowser - **2007年 iPhone誕生** - **2008年 Chrome 推出** 目前主流瀏覽器已經變成 Chrome 了 --- ### 如何使用在html檔前面引入網址 `<script src=“https://code.jquery.com/jquery-3.6.0.js”></script>` 範例 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQ</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="jquery-3.6.0.js"></script> <style> .box{ width: 200px; height: 200px; background-color: rgb(230, 137, 253); margin: 60px; font-size: 60px; } </style> </head> <body> <input class="todo_input" type="text"/> <button class="btn">BB</button> <div class="box">box</div> ``` 原本的寫法 `<script>` ``` document.addEventListener('DOMContentLoaded',function(){ document.querySelector('.btn').addEventListener('click',function(){ alert('click!') }) }); ``` jQuery的寫法 ``` $(document).ready(function(){ $('.btn').click(function(e){ //alert('click!') $('.box').text('Hi!') }) }); ``` 還可以使用 hide()，預設的style="display:none" 使用預設的淡入淡出很方便 fadeIn(),fadeOut()，中間可以放秒數 ``` var isHide = false $(document).ready(function(){ $('.btn').click(function(e){ if(isHide) { $('.box').fadeIn() } else { $('.box').fadeOut() } isHide = !isHide }) }); ``` ``` </script> </body> </html> ``` --- ### 查詢資料 **1. 官方文件** https://api.jquery.com/ **2. You might not need jQuery** 可以查原生怎麼寫對照 jQuery 怎麼寫 http://youmightnotneedjquery.com/