JAVASCRIPT - 簡介跨瀏覽器，

DOM + CSS，需要 FrameWork

JQUERY - 簡介The Write Less, Do More-寫得少做的多

加強輕鬆控制，非同步傳輸AJAX、事件Event

目前有上百個 plugins，jQuery UI，jQuery Mobile

JQUERY GETTING START

$( document ).ready( handler )$().ready( handler ) (this is not recommended)$( handler )=>$(function(){});

常用 JQUERY 範例選擇Tag

修改Tag

表單驗證

Element Style List

AJAX

Q1. 如何選擇特定的 TAG

<div id="body"> <h2></h2> <div class="contents"> <p></p> <p></p> </div></div>=>$("div") //選取 div 的元素$("div").length$("#body") //選取 id 為 body 的元素$(".contents") //選取 class 為 contents 的元素$("p").css({"background":"#F00"}); //改變 p 的背景色

簡單選取能力 => CSS語法

批次處理能力

Q2. TAG 操作選取有 TARGET 屬性並加入文字後的結果

<a href="http://jsgears.com">jsGears</a> <a href="http://google.com" target="_blank">Google</a> <a href="http://amazon.com" target="_blank">Amazon</a>=><a href="http://jsgears.com">jsGears</a> <a href="http://google.com" target="_blank">Google (Click)</a> <a href="http://amazon.com" target="_blank">Amazon (Click)</a>

$("a[target]").append(" (Click)");

$("a[target]").prepend(" (Click)");

$("a[target]").html(" (Click)");

$("a[target]").text(" (Click)");

Q3. ELEMENT 顯示 / 隱藏表單驗證

<style type="text/css">

</style> <form> <label for="username">請輸入大名</label> <input type="text" id="username" name="username"> <span class="help">這個欄位必填喔</span> </form>

.help {display: none}

$("input#username").change(function() { if ($("input#username").val() == "") $("span.help").show();});

Q4. ELEMENT STYLE LISTJQUERY + CSS

<style type="text/css">

</style> <ul id="menu"> <li><a href="#">控制面板首頁</a></li> <li><a href="#">編輯個人資料</a></li> <li><a href="#">個人空間管理</a></li> <li><a href="#">個人空間管理</a></li> </ul>

a{ display: block; width: 100px; height: 100%; } .big{ border: 10px solid #F00; } .small{ border: 1px solid #F00; }

$("li a:odd").addClass("big");$("li a:even").addClass("small");$("li a:even").removeClass("small");

|

Q5. AJAX取得 html tag 並將找出文件內所有 div 下一層的 h1 填入

div.content 內

<div> <h1>Hello world!</h1> <h2>This is H2</h2> <h1>jsGears.com!</h1> </div>

<div class="content"></div>

$(".content").load("aa.html div h1");

JQUERY ANIMATION

PROBLEM$("#body p").length = ?

<div id="body"> <p>paragraph 0</p> <div class="contents"> <p>paragraph 1</p> <p>paragraph 2</p> </div></div>

COLORBOX GETTING START

<link rel="stylesheet" href="colorbox.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="../jquery.colorbox.js"></script>

COLORBOX

<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee."<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3$(".group1").colorbox({rel:'group1'});

var html = '';html += '<h1>Hello ColorBox~</h1>';

var ww = 380, hh = 150;$.colorbox({ html: html, speed: 350, width: ww, height: hh, open: true, opacity: 0.8, onComplete: function(){ alert('opened!'); }});

GREENSOCK

GETTING START

<script src="TweenMax.min.js"></script>TweenMax.to( Element, speed, { "css": css_style, "delay": delay, "onComplete": onCom } );

DEMO2

$( window ).mousemove(function( event ) { var px = event.pageX; var py = event.pageY; TweenMax.to( $("img"), speed, { css: { "left": px, "top": py } } );});