jQuery组件封装之return this.each(function () {});
记录一下自己的调试历程
组件封装经常看到这么一段代码
$.fn.plugin = function (options) {
return this.each(function (i,t) {
new Fun(this, options)
});
}
//组件调用
$(".div").plugin({
str: ""
})
.css({
"border": "1px dotted red"
})
.addClass('aaa');
为什么要return为什么要each?
自己调试了一番
发现若没有return,打印$(".div").easySlider({}) 因为这个方法没有返回值所以是undefined
经过return返回,打印$(".div").easySlider({}) 返回当前对象
若为undefined自然就不能够进行.css()或.addClass等方法调用了
这时候可能又纳闷了,直接return this 不就OK了么?
例如:
$.fn.easySlider = function (options) {
new ShowLink(this, options)
return this;
}
这个时候就要说each了,
jQuery组件封装之return this.each(function () {});的更多相关文章
- 下拉菜单的jquery组件封装
首先晒出封装好的dropdown.js (function($){ 'use strict';//使用严格模式 //构造函数形式 function Dropdown(elem,options){ // ...
- jQuery组件系列:封装标签页(Tabs)
我自己封装的组件,你也行,静态链接地址 http://www.cnblogs.com/leee/p/5190489.html 声明.最好,先把代码拷过去运行一下,其实特别丑~再往下看 我没优化,因为我 ...
- 封装两个简单的Jquery组件
Jquery给我们提供了很大的方便,我们把他看成是一个公共库,以致在这个公共库上延伸出了很多Jquery插件:在项目过程中,有些插件总是不那么令人满意: 主要说两个项目用途: 1. 遮罩层,跟一般的 ...
- ***使用jQuery去封装插件(组件化、模块化的思想),即扩展方法
如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){} ②使用:$.方法(有参数的 ...
- 对Raphael画图标的一个jquery简单封装
公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery ...
- jQuery组件开发之表格隔行选中效果实现
一.效果展示如下 jQuery组件之表格插件源码 //表格选中插件 //方式一 (function($){ var chosTabBgColor = function(options){ //设置默认 ...
- 基于Bootstrap的DropDownList的JQuery组件的完善版
在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...
- Jquery EasyUI封装简化操作
//confirm function Confirm(msg, control) { $.messager.confirm('确认', msg, function (r) { if (r) { eva ...
- jquery插件封装思路整理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 【转载】 自动化机器学习(AutoML)之自动贝叶斯调参
原文地址: https://blog.csdn.net/linxid/article/details/81189154 ---------------------------------------- ...
- Rabbitmq Plugin configuration unchanged. 问题完全解决方案
当执行:rabbitmq-plugins.bat enable rabbitmq_management 命令时候出现 错误如下: Plugin configuration unchanged. App ...
- 34 Flutter仿京东商城项目 用户注册 注册流程 POST发送验证码 倒计时功能 验证验证码
加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 以下列出的是本课涉及的文件. RegisterFirst.dart import 'package:flutter/ ...
- IDEA新建本地项目关联远程git仓库
现在远程git仓库创建一个repository,然后本地创建项目,最后进行关联.三板斧,打完收工. 第一步.第二步地球人都知道,略过不表,第三步比较关键,举个例子: 0.创建本地Git仓库:VCS - ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_14-课程预览功能开发-CMS添加页面接口
5.3 CMS添加页面接口 cms服务对外提供添加页面接口,实现:如果不存在页面则添加,否则就更新页面信息. 此接口由课程管理服务在课程预览时调用. 接口方法.:页面没有就添加.有了更新数据 之前的接 ...
- Linux自动获取IP地址 重启不会消失
网络设置 root用户登录 编辑 /etc/sysconfig/network-scripts/ifcfg-eth0 将ONBOOT=no 改为 ONBOOT=yes 并保存 重启network ...
- shell脚本安装python、pip--交互式的
首先把pip-.tgz 安装包放在 /usr/local 下面,按照顺序先安装pip,再安装python.不要先安装或只安装python,否则很容易出错, [root@bogon ~]# cat pi ...
- Java基础系列-substring的原理
原创文章,转载请标注出处:https://www.cnblogs.com/V1haoge/p/10755235.html JDK 6和JDK 7中substring的原理及区别 substring(i ...
- 27.Spark中transformation的介绍
Spark支持两种RDD操作:transformation和action.transformation操作会针对已有的RDD创建一个新的RDD: 而action则主要是对RDD进行最后的操作,比如遍历 ...
- MySQL(五)中的redo&undo&binlog
MySQL中有六种日志文件,分别是:重做日志(redo log).回滚日志(undo log).二进制日志(binlog).错误日志(errorlog).慢查询日志(slow query log).一 ...