第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