第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图表制作 ...
随机推荐
- 《阿里巴巴Java开发手册》代码格式部分应用——idea中checkstyle的使用教程
<阿里巴巴Java开发手册>代码格式部分应用--idea中checkstyle的使用教程 1.<阿里巴巴Java开发手册> 这是阿里巴巴工程师送给各位软件工程师的宝典,就像开车 ...
- Maven学习(十)-----使用Maven创建Java项目
所需要的工具: Maven 3.3.3 Eclipse 4.2 JDK 8 注意:请确保 Maven 是正确安装和配置(在Windows,*nix,Mac OSX系统中),然后再开始本教程,避免 mv ...
- javaweb(二十九)——EL表达式
一.EL表达式简介 EL 全名为Expression Language.EL主要作用: 1.获取数据 EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数 ...
- php+MySQL的对用户表分表,使用户均匀分布
假如说我们目前已有一亿个注册用户,要把这些用户平均分配到100张表中,并且后续注册的用户也要均匀分配到这100张表 首先当用户注册时,如用户名为“username”,用php的crc32()函数处理用 ...
- 原生 js 简单实现 Promise
写在思否,欢迎各位大佬给出建议: https://segmentfault.com/a/1190000018530433
- 韦大仙--LoadRunner压力测试:详细操作流程
一. 录制脚本 1.安装完毕后,创建脚本: 点击OK之后,会弹出网址,之后创建Action,每进一个页面添加一个Action,录制结束后,终止录制. 二. 修改脚本 1.脚本参数化 将登录的用户名密码 ...
- Unity Lighting - Light Probes 光照探针(十)
Light Probes 光照探针 Only static objects are considered by Unity’s Baked or Precomputed Realtime GI s ...
- Matplotlib外观和基本配置笔记
title: matplotlib 外观和基本配置笔记 notebook: Python tags:matplotlib --- 参考资料,如何使用matplotlib绘制出数据图形,参考另一篇mat ...
- website for personal research
YOLO https://pjreddie.com/darknet/yolo/ Low Rank Matrix Recovery and Completion via Convex Optimizat ...
- 王者荣耀交流协会第三次Scrum立会
会议时间:2017年10月22号 18:00-18:32,时长32分钟. 会议地点:中快餐厅二楼第二排倒数第二个桌子. 立会内容: 1.每位同学汇报了今日工作. 2.通过讨论我们决定用存excel ...