第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
第80天:jQuery插件使用的更多相关文章
- jQuery插件之ajaxFileUpload异步上传
介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- 最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
- 我利用网上特效开发的Jquery插件
我利用网上特效开发的Jquery插件 代码如下 (function($){ $.fn.Dialogx = function(options) { var defaults={ Width:" ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- JQuery 插件FlexiGrid 之完全配置与使用
博客分类: Java综合 jQuery配置管理jsonServlet数据结构 自己再做这个的时候.也是找了很多资料..但网上搜索了很多资料. 没有介绍的很全的. 鄙人就在此献丑一下. 来全面的介绍一 ...
- 插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。
简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...
- jquery插件,美化select标签
最近经常与select打交道,因为ie下的select实在太丑了,css怎么搞都搞不好看,因为程序已经写得差不多了,要再去模拟select改动太大,就想着能否不改动select,同时美化它.借鉴一下这 ...
- jQuery插件-jgcharts实现Javascript制作Google Charts
from:http://www.zz68.net/program/Ajax/2010/0415/1992.html jgcharts是一个基于jQuery的非常经典的Google Charts图表制作 ...
随机推荐
- 20155313 2016-2017-2 《Java程序设计》第九周学习总结
20155313 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 第16章 JDBC(Java DataBase Connectivity)即java数据库连 ...
- 20155332 2006-2007-2 《Java程序设计》第2周学习总结
20155332 2006-2007-2 <Java程序设计>第2周学习总结 教材学习内容总结 在JAVA中分为基本类型和类类型两大类型系统. JAVA中的基本类型主要分为如下几类: 1. ...
- 【原创】Odoo开发文档学习之:ORM API接口(ORM API)(边Google翻译边学习)
官方ORM API开发文档:https://www.odoo.com/documentation/10.0/reference/orm.html Recordsets(记录集) New in vers ...
- _INTSIZEOF
在_INTSIZEOF中该有的都有了 1.这其中最小非负剩余和最大正余数例子如下: 设n为4,当r为1时,最小非负剩余就是1,最大非正剩余就是1 - 4 = -3,最大正余数为4 - 1 = 3 2. ...
- 进阶篇:4.1)DFA设计指南:简化产品设计(kiss原则)
本章目的:理解kiss原则,明确如何简化产品的设计. 1.前言:kiss原则,优化产品的第一原则 如果要作者选出一个优化产品的最好方法,那一定是kiss原则莫属.从产品的整体设计到公差的分析,kiss ...
- NUMA 体系架构
NUMA 体系架构 SMP 体系架构 NUMA 体系架构 NUMA 结构基本概念 Openstack flavor NUMA 策略 Nova 实现 NUMA 流程 1. SMP 体系架构 CPU 计算 ...
- linux源码学习-for_each_cpu
刚开始读linux源码,第一眼就看到了这个很有意思的函数族,周末好好研究一下 3.13 这个组都是宏定义for循环,分析的时候注意到cpumask_next(),它在一个文件中定义了两次,还不是重载, ...
- how to update product listing price sale price and sale date using mobile App
Greetings from Amazon Seller Support, Thank you for writing back to us. I have reviewed our previous ...
- redis rdb aof比较
Redis中数据存储模式有2种:cache-only,persistence; cache-only即只做为“缓存”服务,不持久数据,数据在服务终止后将消失,此模式下也将不存在“数据恢复”的手段,是一 ...
- IC设计前后端流程与EDA工具
IC前端设计(逻辑设计)和后端设计(物理设计)的区分: 以设计是否与工艺有关来区分二者:从设计程度上来讲,前端设计的结果就是得到了芯片的门级网表电路. 前端设计的流程及使用的EDA工具 1.架构的设计 ...