第80天：jQuery插件使用

jQuery其他補充

+ 4.1 鍊式程式設計： end()補充

* 補充五角星 評論案例

* 第一步：滑鼠移入，目前五角星和前面的五角星變實體。後面的變空心五角星

* 第二步：滑鼠點選的時候，為目前元素添加clicked類，其他的移除clicked類

* 第三步：當滑鼠移開整個評分控件的時候，把clicked的之前的五角星顯示實心

+ 4.2 隐式疊代

* 預設情況下，會自動疊代執行jQuery選擇出來所有dom元素的操作。

* 如果擷取的是多元素的值，預設傳回的是第一個元素的值。

+ 4.3 map函數

* $.map(arry,function(object,index){}) *傳回一個新的數組*

*

* var arry = $("li").map(function(index, element){}) *注意參數的順序是反的*

```

var newArr = $.map($("li"), function(i, e) {

return $(e).text() + i;//每一項傳回的結果組成新數組

});

var newArr = $("li").map(function(elem, index){

console.log("elem:" + elem);

console.log("index:" + index);

retrun index;

+ 4.4 each函數

* 全局的

* $.each(array, function(index, object){})

* $("li").each(function(index, element){} )

* 參數的順序是一緻的。

例如：

$( "li" ).each(function() {

$( this ).addClass( "foo" );

});

$( "li" ).each(function( index ) {

console.log( index + ": " + $( this ).text() );

$( "div" ).each(function( index, element ) {});

+ 4.5 noConflict 全局對象污染沖突

$ jQuery

var $ = { name : "itecast" };

<script src="jQueryDemos/jquery-1.11.3.min.js"></script>

<!-- $ === jQuery -->

var laoma_jQ = $.noConflict();//讓jQuery釋放 $, 讓$ 回歸到jQuery之前的對象定義上去。

$.name

jQuery

+ 4.6 jQuery.data() jQuery對象的資料緩存。(了解)

* $(".nav").data("name", 123);//設定值。

var t = $(".nav").data("name"); //擷取值

t.name = "18";//對象的更改，會直接同步到 元素的jQuery對象上去。

+ 4.7 會做jQuery插件

* 全局jQuery函數擴充方法

$.log = function() {

}

//$("li")

* jQuery對象擴充方法

$.fn.log = function() {

}

+ 4.8 引入第三方插件

* 背景色動畫插件

* lazyload 插件

* jQuery UI 插件

+ 4.9 sublime 裝插件

* sublime 3

* 第一步： 裝上sublime的包管理器package control

* ctrl+ ~

* 上網把 按照package control的那段代碼，粘貼一下，然後回車。

*

* 第二步：使用Ctrl + shift + p