Jquery學習
判斷一個物件是否存在 確認是否有JQuery
EX: if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
| ! | logical not |
var a = "";
var b = 0;
var c = undefined;
var d = null;
var e;//同undefined
var f = {};
var g = [];
console.log(!a);//true
console.log(!b);//true
console.log(!c);//true
console.log(!d);//true
console.log(!e);//true
console.log(!f);//false
console.log(!g);//false
比較運算元
| == | equal to |
| === | equal value and equal type |
| != | not equal |
| !== | not equal value or not equal type |
Javascript 可以針對全部或某個Function加上 嚴格模式
"use strict";//使用strict mode(嚴格模式)
產生物件的另一種方法
Object Constructor (用一個function 配合this產生物件)
記得加new
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
console.log(myFather.age);
console.log(myMother .age);
//50
//48
Javascript內建 建構子
var x1 = new Object(); // A new Object object
var x2 = new String(); // A new String object
var x3 = new Number(); // A new Number object
var x4 = new Boolean(); // A new Boolean object
var x5 = new Array(); // A new Array object
var x6 = new RegExp(); // A new RegExp object
var x7 = new Function(); // A new Function object
var x8 = new Date(); // A new Date object
//===========================================
var x1 = {}; // new object
var x2 = ""; // new primitive string
var x3 = 0; // new primitive number
var x4 = false; // new primitive boolean
var x5 = []; // new array object
var x6 = /()/ // new regexp object
var x7 = function(){}; // new function object
只是用以下這種方式宣告的物件型態不同 使用比較運算元(===)時 就要小心 會不一致
能用Primitive的就用 速度較快
var x = "John";
var y = new String("John");
var z = new String("John");
var zz = z;
// typeof x will return string
// typeof y will return object
// (x == y) is true because x and y have equal values
// (x === y) is false because x and y have different types (string and object)
// (y == z) is false because y and z are different objects
// (y === z) is false because y and z are different objects
// (z === z) is true because zz and z are same objects
JQuery擴充方法
有幾個技巧
1.(function(){ ... })();把所有的 code 包起來，這樣的作法是確保你裡面寫的 code 不會成為全域變數，你不會希望你寫的這個function跑去window底下的屬性，而如果寫成(function($){ .... })(jQuery); 表示將 $ 定義成 jQuery 物件，好讓這個 function 中可以直接使用 $ 不造成混淆，大多 jQuery plugin 都會用這個方式包裝起來。
補充說明
JS匿名函數宣告完立即執行常見寫法
(function() { /* code */ })();
1、包圍函數（function(){})的第一對括號向腳本返回未命名的函數，隨後一對空括號立即執行返回的未命名函數，括號內為匿名函數的參數。
2、使用括號包裹定義函數體，解析器將會以函數表達式的方式去調用定義函數。也就是說，任何能將函數變成一個函數表達式的作法，都可以使解析器正確的調用定義函數。而 ! 就是其中一個，而 + - || 都有這樣的功能。
3、該函數的作用主要為 匿名 和 自動執行(bootstrap使用+function($){}(window.jQuery))
+function(){}(); //這裏的+，也可以替換成!,~等其他一元操作符
(function() { console.log("Foo!"); })(); // or (function() { console.log("Foo!"); }());
2.$.fn.extend({ ... }) 是為了擴充 jQuery.fn (= jQuery.prototype=jQuery這個物件)，為了讓我們之後定義的函式會跟原本 jQuery 提供的函式有相同的結構，所以擴充的內容會寫在 $.fn.extend({ ... }) ,所以之後用$.就可以點出這個新的屬性。口訣：$是jQuery物件 ,fn是jQuery prototype的簡寫
可以透過.fn返回jQuery.prototype物件直接增加method 擴充jQuery物件方法 類似我們C#的靜態方法
$.fn.callMeAlert=function(){alert('hi')};
$('body').callMeAlert();//alert 'hi'