3-2 jQuery v11

Size: px

Start display at page:

Download "3-2 jQuery v11"

剿麻
6 years ago
Views:

1 老田講座講師 : 田甜甜 RITA TEACHING 基礎 jquery v [email protected] ENTER

2 jquery 基本概念什麼是 jquery: 1 jquery 是一個輕量級的 JavaScript 庫, 宗旨是寫更少, 做更多 2 目的是為了使它更容易在您的網站使用 JavaScript 3 需要的 JavaScript 原始碼共同完成任務, 並把它們包裝成可以只用一行程式碼調用的方法 4 簡化很多 JavaScript 複雜的語法, 比如 AJAX 和 DOM 操作 5 jquery 插件幾乎可以完成所有的任務安裝 jquery: 點選網站右邊 Download 按鈕進入下載頁面 3 Production 壓縮版本 : 檔案體積很小, 但無法閱讀, 適合放在 server 上 4 Development 未壓縮版本 : 可閱讀較適合開發使用 5 slim build 超薄版本 : jquery 使用注意事項與基本概念 : 1. 套用 jquery 語法 : <script src="js/jquery.min.js"></script> 2. 自動抓取 jquery CDN: jquerycdn: <script src=" GoogleCDN: 3. $ : 一般使用 $ 符號, 作為 jquery 字串簡寫, 4. $() : 呼叫 jquery 函式庫常用選擇器,$() 是 jquery() 的簡寫

3 CSS&jQuery\ CSS 與 jquery CSS // CSS 選擇器, 選擇元素, 以便將樣式增加至元素內標籤 ( 元素 ) 選擇器 : div { background:#000000; } /* 選擇所有 html 文件裡的所有 div 元素 */ id 選擇器 :// 以 # 井號做為開頭 #banner{ width:333px; height:100px;} 類別選擇器 :// 以. 點號做為開頭.my_class { font-size=1em;} jquery // jquery 選擇器, 選擇元素, 以便將行為增加至元素內標籤 ( 元素 ) 選擇器 : $( div ). hide(); /* 選擇所有 html 文件裡的所有 div 元素 */ /* 使用方法 :hide, 隱藏文件上的所有 div 元素 */ $('body').css( { backgroundcolor: 'red', color: '#fff' } ); id 選擇器 : $( #banner ). fadeout(); /* 選擇所有 html 文件裡 CSS ID 名為 banner 的元素 */ /* 使用方法 :fadeout, 淡出元素 */ 類別選擇器 : $(.my_class ). slideup(); /* 選擇所有 html 文件裡有套用 my_class 的元素 */ /* 使用方法 :slideup, 使全部套用 my_class 的元素都滑上 ( 向上收捲 )*/

4 jquery 基本語法 window.onload 與 $(document).ready 原生 javascript 語法 : window.onload 整個網頁元素及內容下載完後才會開始 windows.onload = function(){//do something} jquery 語法 : $(document).ready DOM 元素下載完後開始, 開始後才執行內部程式碼 $(document).ready(function()){//do something} jquery 語法 : $() $(document).ready 可更簡化為 $() //do something DOM 與 CSS 對應語法原生 javascript 語法 document.getelementsbytagname(a); document.getelementbyid( content ); jquery 語法 $( a ); $( #content ); CSS 語法 a{} #content{}

5 jquery 基本語法 jquery 選取元素 jquery 使用選取器的方式來抓取頁面中的物件 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery 選擇器綀習 (append)</title> <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript"> $("button").click(function(){ $("p").append ("Hello world!"); </script> </head> <body> <p>this is a paragraph.</p> <p>this is another paragraph.</p> <button> 在每個 p 元素的結尾添加內容 </button> </body> </html> /* 利用 append() 方式, 在被選元素 <p> 的結尾插入指定內容 */

$jquery Common\ jquery 基本語法常用的 jquery 值 https://www.w3schools.com/jquery/eff_animate.$

6 jquery Common\ jquery 基本語法常用的 jquery 值 speed 速度 : 可選的指定動畫的速度默認值為 400 毫秒可能的值 : 毫秒 ( 如 100,1000,5000 等 ) 慢快速 easing 緩解 : 可選的指定動畫不同點元素的速度默認值為 swing 可能的值 : 擺動 - 在開始 / 結束時移動較慢, 但在中間更快線性 - 以恆定的速度移動提示 : 外部插件中可以使用更多的緩存功能 callback 回調函數 JavaScript 語句是逐行執行的然而, 使用效果, 即使效果未完成, 也可以運行下一行代碼這可能會造成錯誤為了防止這種情況, 您可以創建一個回調函數當前效果完成後, 執行回調函數

7 jquery 基本語法常用的 jquery 效果創建特效的 jquery 方法 Fading 淡入 :fadein() 淡出 :fadeout() 交替 :fadetoggle() 淡至 :fadeto() $(document).ready(function(){ $("button").click(function(){ $("#div1").fadein(); $("#div2").fadeout(); $("#div3").fadetoggle(); $("#div4").fadeto("slow", 0.15); <button>click</button> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"> </div> <div id="div2" style="width:80px;height:80px;background-color:green;"></div> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> <div id="div4" style="width:80px;height:80px;background-color:gold;"></div>

jquery 基本語法常用的 jquery 效果 https://www.w3schools.

8 jquery 基本語法常用的 jquery 效果創建動畫效果 jquery 方法

9 jquery 基本語法 jquery 動畫創建動畫效果的 jquery 方法 animate $(selector).animate({params},speed,easing,callback); $("#btn1").click(function(){ $("#box").animate({height: "300px" $("#btn2").click(function(){ $("#box").animate({height: "100px" <button id="btn1"> 動態加高 </button> <button id="btn2"> 還原高度 </button> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px- ;"> </div>

jquery 基本語法常用的 jquery 事件方法 https://www.w3schools.

10 jquery 基本語法常用的 jquery 事件方法網頁可以回應不同瀏覽者的行動被稱為事件

11 jquery 基本語法 jquery 事件方法網頁可以回應不同瀏覽者的行動被稱為事件 $(document).ready(function(){ $("li").on({ mouseenter: function(){ $(this).css("background-color", "lightgtray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } <ul> <li>bt</li> <li>bt</li> <li>bt</li> </ul> // this 是指執行 function 時所屬的物件 HTML DOM Events HTML DOM Style Object

12 jquery 常用語法 jquery 下拉選單創建動畫效果的 jquery $("nav>ul>li").on({ mouseenter:function(){ $(this).css("background-color","#48405f"); $(this).children("div").stop().slidedown(); }, mouseleave:function(){ $(this).css("background-color","#ab2a4c"); $(this).children("div").stop().slideup(); }, click:function(){ $(this).css("background-color","#920d0d"); } <nav> <ul> <li><a href="index.html">home</a></li> <li><a href="#">about US</a> <div> <a href="#">about01</a> <a href="#">about02</a> <a href="#">about03</a> </div> </li> <li><a href="#">news</a> <div> <a href="#">news01</a> <a href="#">news02</a> <a href="#">news03</a> </div> </li> <li><a href="#">menu</a> <div> <a href="#">menu01</a> <a href="#">menu02</a> <a href="#">menu03</a> <a href="#">menu04</a> </div> </li> <li><a href="#">contact US</a> <div> <a href="#">contact01</a> <a href="#">contact02</a> <a href="#">contact03</a> </div> </li> </ul> </nav> Sliding 滑下 :slidedown() 滑上 : slideup() 交替 :slidetoggle()

13 jquery Common\ jquery 常用語法 jquery offset 滑動至錨點位置 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery 滑動至錨點位置 </title> </head> <body> <a href="#about"> 關於我們 </a> <div id="about"> 關於我們內容 </div> <script src=" <script type="text/javascript"> $("nav a").click(function(event){ event.preventdefault(); // 取消 (a) 事件 ( 置頂 ) 默認值 var bt = $(this).attr("href"); // 返回取得屬性與值 var pos = $(bt).offset(); // 抓取相對的座標位置 $("html,body").animate({ scrolltop: pos.top },1000); </script> </body> </html> // 變數 pos 的 top(y 軸 ) // scrolltop() 方法返回或設置匹配元素的滾動條的垂直位置 // scroll top offset 指的是滾動條相對於其頂部的偏移 //$("html,body").animate({ scrolltop: pos.top-$('#navbar').height() },1000); // <a href="#news"> bt = a.href = "#news" $(bt) = $("#news") id="news" $("#news") jquery 屬性操作方法 ( 獲得或設置元素的 DOM 屬性 ) 方法描述 addclass() 向符合的元素添加指定的類名 attr() 設置或返回取得符合元素的屬性和值 hasclass() 檢查符合的元素是否擁有指定的類別 html() 設置或返回取得符合的元素集合中的 HTML 內容 removeattr() removeclass() 從所有符合的元素中移除指定的屬性 toggleclass() 從所有符合的元素中刪除全部或者指定的類別 val() 從符合的元素中添加或刪除一個類別

14 jquery Common\ jquery 常用語法 jquery TOP 返回頁頂 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery 滑動返回頁頂 </title> <style> #gotop{ width:50px; height:50px; line-height:50px; /* 行高設定跟高度一樣就會垂直置中 */ text-align:center; background-color:#ccc; color:#fff; position:fixed; /* 固定定位 */ right:20px; /* 定位座標位置 */ bottom:20px; /* 定位座標位置 */ cursor:pointer; /* 滑鼠游標圖案 : 超連結手指 */ display:none; /* 顯示方式 : 隱藏 (block: 區塊元素,inline: 行內元素 ) */ } </style> </head> <body> <div id="gotop">top</div> <script src=" <script type="text/javascript"> // 捲動至 top0 的位置 $("#gotop").click (function(){ $("html,body").animate({ scrolltop:0 },1000); // 指定捲軸位置淡出淡入 $(window).scroll (function(){ if($(this).scrolltop() > 200){ $('#gotop').stop().fadeto('fast',1); } else { $('#gotop').stop().fadeout('fast'); } </script> </body> </html>

$jquery Recommendation\ jquery$

15 jquery Recommendation\ jquery 推薦套件 jquery 點圖放大 fancybox: jquery 換圖輪播 Camera-master: jquery UI:

16 jquery Common\ jquery 常用語法區塊符合視窗高度 var h = $(window).height(); $("#top,#about,#works,#contact").css('height',h); 區塊抓取視窗高度並減去特定區塊高度 var h = $(window).height(); $("#banner").css('height',h-$("#top").height()); 區塊抓取視窗高度並減去固定高度 var h = $(window).height(); $("#banner").css('height',h-200); 移除元素手機版尺寸 if($(window).width() < 767){ $("#dome").remove(); } 平板尺寸 if($(window).width() > 768){ $("#dome").remove(); }

17 END.

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue html vue html vue Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code h

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue010101.html vue010104.html vue0101 01 04 Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code https://code.visualstudio.com/ Chrome XAMP Visual Studio