Javascript教學

宣告變數 var

var a=1;
var b=2;
var c = a+b;
alert(c);

函示 function

function myName(){
  //要做的事
}

//執行myName這個function
myName();

函示傳參數範例

add(2,3);  //計算 2+3
add(5,8);  //計算 5+8

/* 這是一個加法計算函示 */
function add( a, b){
  var c = a+b;
  alert(c);
}

Jquery

參考文檔

使用CDN上的jq函示庫

建議放在</body>之前

......
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
  //你的程式寫在這
</script>
</body>

選取Html Tag

var $bn = $('#bn');

• 建議將選取的jq物件放入一個變數，方便之後利用
• 記得加上單引號(或雙引號)

滑鼠擊點事件方法

$('#bn').click(function(){
   //按下 #bn 後要做的事
});

另一種寫法(作用同上)

$('#bn').on('click',function(){
   //按下 #bn 後要做的事
});

取消按鈕事件

$('#bn').off('click');

jq物件 顯示/隱藏 方法

var pcx = $('#pcx'); //要操作的jq物件

pcx.hide();  //隱藏

pcx.show();  //顯示

pcx.toggle(); //反向，如果hide則show..

//淡入淡出動態，500毫秒(0.5秒)
pcx.fadeIn(500);
pcx.fadeOut(500);
pcx.fadeToggle(500);

//展開與收合動態
pcx.slideDown(500); //展開
pcx,slideUp(500); //收合
pcx.slideToggle(500);

按鈕範例

按鈕切換範例

展開範例

視差滾動

全景輪播模組

影音切換範例

CSS3動畫範例