zepto 基礎知識(1)

1.$() 的用法。
　　獲取元素
　　　　$('div') //獲取全部頁面中的div元素
　　　　$('#foo') // 獲取ID 爲"foo"的元素
　　建立元素

　　　　$("<p>Hellow</p>"") //新的p元素
　　　　$("<p/>",{text:"Hellow",id:"greeting",css:{color:'darkblue'}})    //<p id="greeting" style="color:darkblue">Hellow</p>

　　當頁面ready的時候，執行回調：

　　　Zepto(function($){ 
　　　　　　alert("123")
　　　　})

2.camelCase

　　 將一組字符串變成「駝峯」命名法的新字符串，若是該字符串已是駝峯命名，那麼不變。

　　　　$.camelCase('hello-there') //「helloThere」
　　　　$.camelCass('helloThere') // "helloThere"

3.$.contains()

　　 檢查父節點是否包含給定的dome 節點，若是二者是相同的節點，則返回 false.
　　用法：$.contains(parent,node) 返回 boolean

4.each
　　$.each(collection,function(indx,item){...})
　　遍歷數組元素或者以key-value 值對方式遍歷對象。回調換上返回false 時中止遍歷。

　$.each(['a','b','c'],function(index,item){ 
　　　　　　console.log('item %d is: %s',index,item)
　　　　}) 
　　　　　　//item 0 is: a
　　　　　　//ct1.html:18 item 1 is: b
　　　　　　//ct1.html:18 item 2 is: c

　　var hah = {name:'zepto.js',size:'micro'}
　　　　$.each(hash,function(key,vaue){ 
　　　　　　console.log('%s: %s',key,value)
　　　　})
　　　　//name: zepto.js
　　　　//size: micro

5.$.extend
　　$.extend(target,[source,[source2,...]])
　　$.extend(true,target,[source,.....])
　　經過源對象擴展目標對象的屬性，源對象屬性將覆蓋目標對象屬性
　　默認狀況下爲，複製爲淺拷貝，若是第一個參數爲true表示深度拷貝（深度複製）

　　　　var target = {one:'patridge'},
　　　　source = {two:'turtle doves'}
　　　　console.log($.extend(target,source))
　　　　//{one: "patridge", two: "turtle doves"}

6.fn
　　Zepto.fn 是一個對象，它擁有Zepto對象上全部的方法，在這個對象上添加一個方法。
　　全部的Zepto 對象上都能用到這個方法。

　　　$.fn.empty = function(){
　　　　　　return this.each(function(){ this.innerHTML=''})
　　　　}

7.grep
　　$.grep(items,function(item){...}) 類型array
　　　　獲取一個新數組，新數組只包含回調函數中返回true 的數組項

　　　　$.grep([1,2,3],function(item){
　　　　　　return item > 1
　　　　);
　　　　　　//=>[2,3]

8.inArray
　　$.inArray(element,array,[fromIndex]) 類型：number
　　返回數組中指定元素的索引值，若是沒有找到該元素則返回 -1.
　　[fromIndex] 參數可選，表示從哪一個索引值開始向後搜索。

　　　　$.inArray("abc",["bcd","abc","edf","aaa"]);
　　　　　　//=>1
　　　　$.inArray("abc",["bcd","abc","edf","aaa"],1);
　　　　　　//=>1
　　　　$.inArray("abc",["bcd","abc","edf","aaa"],2);
　　　　　　//=>-1

9.isArray
　　$.isArray(object) 類型：boolean
　　若是object 是array ，則返回true.

　　　　var ob = [1,2,3,4];
　　　　console.log($.isArray(ob))
　　　　　　//true

10.isFunction
　　$.isFunction(object) 類型 boolean
　　若是object 是function,則返回true.

　　　　var fun = function(){ return 123;}
　　　　console.log($.isFunction(fun))
　　　　　　//true

11.$.isPlainObject
　　　　$.isPlainObject(object) 類型：boolean
　　　　測試對象是不是純粹的對象，這個對象是經過對象常量（"{}"）或者new Object 建立的，若是是,則返回true.

　　　　　　$.isPlainObject({}) 
　　　　　　　　// => true
　　　　　　$.isPlainObject(new Object) 
　　　　　　　　// => true
　　　　　　$.isPlainObject(new Date) 
　　　　　　　　// => false
　　　　　　$.isPlainObject(window) 
　　　　　　　　// => false

12.isWindow
　　$.isWindow(object) 類型;boolean
　　若是object 參數是否爲yige window 對象，那麼返回true.這在處理iframe 時很是有用，由於每一個iframe都有他本身的window對象，

　　使用常規方法 obj=== window 驗證這些objects時候會失敗。

13.$.map
　　$.map(collection,function(item,index){...}) 類型 collection
　　經過遍歷集合中的元素，返回經過迭代函數的所有結果，null和undefined 將被過濾掉。

　$.map([1,2,3,4,5],function(item,index){
　　　　if(item>1){return item*item;}
　　}); 
　　　　// =>[4, 9, 16, 25]
　　$.map({"yao":1,"tai":2,"yang":3},function(item,index){
　　　　if(item>1){return item*item;}
　　}); 
　　　　// =>[4, 9]

14.$.parseJSON
　　　　$.parseJSON(string) 類型：object
　　　　原生 JSON.parse 方法的別名。接受一個標準格式的JSON 字符串，並返回解析後的JavaScript 對象。

15.trim
　　　　$.trim(string) 類型： string
　　　　刪除字符串收尾的空白符，類型String.prototype.trim()

16.type
　　$.type(object) 類型：string
　　獲取JavaScript 對象的類型，可能的類型有：null undefined boolean number string function array date regexp object error.
　　對於其它對象，他只是簡單報告爲」object「,若是你想知道一個對象是不是一個javascript普通對象，使用isPlainObject.

17.add
　　add(selector,[context]) 類型: self
　　添加元素到當前匹配的元素集合中，若是給定content 參數，將只在content 元素中進行查找，不然在整個document 中查找。
　　$('li').add('p').css('background-color', 'red');

18.addClass
　　addClass(name) 類型：self
　　addClass(function(index, oldClassName){....})
　　爲每一個匹配的元素添加指定的class類名。多個class類名使用空格分隔。

19.after
　　after(content) 類型 ：self
　　在每一個匹配的元素後面插入內容（外部插入）內容能夠爲html字符串，dom節點，或者節點組成的數組。
　　$.('form label').after('<p>A note below the label</p>')

20.append 　　append(content) 類型：self 　　在每一個匹配的元素末尾插入內容（內部插入）。內容能夠爲html 字符串。dom節點，或者節點組成的數組。 　　$('ul').append('<li>new list item</li>')