第80天:jQuery插件使用

简介: jQuery其他补充+ 4.1 链式编程: end()补充 * 补充五角星 评论案例 * 第一步:鼠标移入,当前五角星和前面的五角星变实体。后面的变空心五角星 * 第二步:鼠标点击的时候,为当前元素添加clicked类,其他的移除clicked类 * 第三步:当鼠标移开整个评分控件的时候,把clicked的之前的五角星显示实心+ 4.2 隐式迭代 * 默认情况下,会自动迭代执行jQuery选择出来所有dom元素的操作。

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

相关文章
|
1月前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
40 14
|
2月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
70 21
|
2月前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
69 16
|
2月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
62 9
|
2月前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
2月前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
2月前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
2月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
34 2
|
2月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
2月前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件