1. $ 是 JQuery 的 Alias, 即 $() 同義於 jQuery()
2. boolean: true/false
3. 宣告物件
var emp = {
name: "Zara",
age: 10
};
引用 emp.name // 結果: Zara
4. Array 宣告
var x = [];
var y = [1, 2, 3, 4, 5];
y.length // Array y 的長度 ==> 5
for (var i = 0; i < y.length; i++) {
// Do something with y
}
5. named function
function named(){
// do some stuff here
}
6. anonymous function (未命名函式)
var handler = function (){
// do some stuff here
}
$(document).ready(function(){
// do some stuff here
});
可簡化成
$(function(){
// do some stuff here
});
7. 引數 Argument, 函式的參數皆可用 arguments,length 取得參數長度, arguments.callee 取得函式的名稱
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3
8. context (this)
$(document).ready(function() {
// this refers to window.document
});
$("div").click(function() {
// this refers to a div DOM element
});
9. Callback
$("body").click(function(event) {
console.log("clicked: " + event.target);
});
$("#myform").submit(function() {
return false;
});
10. Built-in Functions
charAt(), concat(), forEach(),
indexOf() : -1 not found
string => length(), substr(), toLowCase(), toUpperCase(),
Array => pop(), push(), reverse(), sort(),
toString() // get number to string
11. SELECTORS
Tag Name ==> $('p') 選取所有 Tag <p>
Tag ID ==> $('#someid') 選取 Tag ID someid
Tag Class ==> $('.some-class') 選取所有elements 含指定 class 名稱者
$('#myid') => 選取 id: myid 單一元件
$('div#yourid') => 選取 div 的 id 為 yourid 的div元件(??)
$("#div2").css("background-color", "yellow"); // 設定 #div 的css 背景值
$('.big') − Selects all the elements with the given class ID big.
$('p.small') − Selects all the paragraphs with the given class ID small.
$('.big.small') − Selects all the elements with a class of big and small.
$('*') 全部元素選取
$('E, F, G,....') 一次選取多個列表
$('div, p') 選取 <div> 或 <p>
$('p strong, #myid') 選取 p 下的 strong, 以及 #myid 元素