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 ...
随机推荐
- Ionic4.x Javascript 扩展 ActionSheet Alert Toast Loading 以及 ionic 手势相 关事件
1.ActionSheet 官方文档:https://ionicframework.com/docs/api/action-sheet <ion-header> <ion-toolb ...
- 基于Android的ADT目录
src: 源代码(重要) gen : 工具自动生成的代码 > BUildconfig 调试的开关,默认开启 > R.java 很多的静态的内部类 > 开发用的jar包 Android ...
- C++线程互斥、同步
一.线程互斥 如果多个线程需要访问且可能修改同一个变量,那么需要加锁,保证同一时刻只有一个线程可以访问,这个动作即最小“原子操作” 方式1: 使用c++提供的类mutex,lock,unlock即可 ...
- MGR集群搭建
MGR全称MySQL Group Replication(Mysql组复制),是MySQL官方于2016年12月推出的一个全新的高可用与高扩展的解决方案.MGR提供了高可用.高扩展.高可靠的MySQL ...
- react中,用key值来解决一些奇葩问题
编辑用户信息,角色信息无法加载到值 改进之后:思路:由于值是设置在state里面的,界面编辑时,会重服务器拉去数据,值也设置在state里面了,但是CheckboxGroup依然不会去渲染选中的值, ...
- Kingbase数据库web统一管理平台
1.安装Kingbase金仓数据库后,通过打开web管理平台,可以方便的进行远程维护. 示例地址:https://192.168.0.1:54328/webstudio 2.输入用户名密码登 ...
- Npcap.例子(raw tcp syn)
1.来自:winpcap实现syn攻击 - 125096 - CSDN博客.html(https://blog.csdn.net/qq125096885/article/details/5178452 ...
- 2个CDH的hive数据同步
算法和数仓共用一套hive数据: CM: 真实数据: 都存在共享存储: oss, s3,ufile上. CDH配置能访问的权限(key)
- 用户字符串操作,这里面包括字符串的decode、encode、substract等等操作
工具类描述:用户字符串操作,这里面包括字符串的decode.encode.substract等等操作 package cn.hgnulb; import java.io.UnsupportedEnco ...
- pgsql常用操作
pgsql备份: --进入pgsql容器docker exec -it 容器ID bash --备份pgsql /opt/rh/rh-postgresql95/root/usr/bin/pg_dump ...