1. 程式人生 > >第80天:jQuery插件使用

第80天:jQuery插件使用

each函數 上網 run 代碼 on() each 背景 package lazyload

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

第80天:jQuery插件使用