jQuery 插件 的this 指向问题(实战)
daterangepicker 是一个JavaScript组件,用来选择日期。
资源直接搜索 daterangepicker 即可,当然好看的样式可以基于Bootstrap。
官网:http://www.daterangepicker.com/
搭建项目环境
daterangepicker js 基于 jQuery 和 moment
css基于bootstrap
html代码
输入框选择日期
label 用于显示选中的时间
button1 清除 label 时间
button2 重新赋值 label 时间
js代码实现功能
1. input 使用插件,并设置回调函数用来将控件选中的值赋值给 label。具体使用方法查看官网,不是本文重点。
$("input[name=callbackDate]").daterangepicker(
{
singleDatePicker: true, //只显示单日期选择
},function(start, end, label) {
var date = new Date(start);
$("#showTime").html("label time: " +
date.getFullYear() + "年" +
(date.getMonth() + 1) + "月" +
date.getDate() + "日")
}
)
2. button1点击事件设置
$("#clearLabelTime").click(function(){ {
$("#showTime").html("label time: ");
}
3. button2点击事件设置
请问!请问!!请问!!!如何实现?
一个办法,重新获得 input 的时间,写个方法。如果是这样的话,和 this 有毛线关系。
既然是重新设置 label 的时间,那之前肯定是设置过的,什么时候设置的呢?在点击时间控件后调用回调函数。(哦,对了,还有一个方法是重新点击时间控件上的时间,相当于重新选择一次)。
那么插件有没有提供一个方法是:在时间选择以后,重新调用函数的呢?查看源码(别问为什么,官网没有提供,但是我不相信他没有写这个方法)后找到:
其中 cb 就是回调函数绑定到 DateRangePicker 对象上的方法。this 在对象中的指向问题可以看第一篇文章介绍。
如果真是这样,那就很好解决了,按照正常人的思路,将调用 daterangepicker 的地方设置变量,然后调用 notify 方法就哦了。我也这么试了:
var datepicker = $("...").daterangepicker({
...
},function(...){
...
}
)
$("#setLabelTime").click(function(){ {
datepicker.notify();
}
但是浏览器报错没有 notify 方法。
输出 datepicker 对象一看,#¥%……&
datepicker对象居然是一个 jQuery 对象$("input[...]")。
what???
继续看源码:
这段代码是调用的入口,返回this,this是什么呢?
$.fn.这是在扩展 jQuery 对象,daterangepicker是扩展的一个方法,(对象方法中的this指向谁的问题同样参考上一篇文章)。this 指向 jQuery对象$("input[...]")。
到了这时候应该怎么办?放弃吗?怎么可能。
看第六行代码,new了一个DateRangePicker对象,那如果我们能想办法拿到这个对象,是不是就万事大吉了?开干,修改这段代码如下:
重新跑代码,哦了。
关于插件作者代码
当然了,代码中返回什么对象,返回哪个对象的问题,我不明白作者是怎么想的。如果是我来写插件,肯定不会返回一个jQuery对象,因为没什么必要。然而代码中有很多方法是绑定在DateRangePicker原型上的。。。
好吧,这篇文章主要是一个实例介绍 this 在不同环境下的指向问题。
想要这些代码内容的可以在公众号菜单中找到联系方式,或者加 QQ群 422033835
jQuery 插件 的this 指向问题(实战)的更多相关文章
- jQuery插件实战之fullcalendar(日历插件)Demo
jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web ...
- jQuery 插件编程精讲与技巧
适应的读者: 1.有一定的jquery编程基础但是想在技能上有所提升的人 2.前端开发的程序员 3.对编程感兴趣的学生 为什么要学习jquery插件的编写? 为什么要学习jquery插件的编写?相信这 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- js最详细的基础,jquery 插件最全的教材
一.Js的this,{},[] this是Javascript语言的一个关键字,随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是调用的函数自己. { } 大括号 ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- 40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)
在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...
- 40个让你的网站屌到爆的jQuery插件
一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...
- jQuery插件写法总结以及面向对象方式写法总结
前两个是jQuery插件,后面2个是以对象的形式开发,都类似. 写法一 (function($, window){ // 初始态定义 var _oDialogCollections = {}; // ...
随机推荐
- stl_组件
2.1.STL中: 2.1.1.包含常用的数据结构. 2.1.2.包含常用的基本算法.结构和算法其实就是一些接口. 2.1.3.提供了一套可扩展的框架. 2.2.六大组件: 2.2.1.容器组件(基本 ...
- PhpMyAdmin导入数据库大小限制?
问题描述: 在phpMyAdmin中导入数据库时,出现问题: 1. 如果按照扩展名.sql导入,提示如下: 没有接收到要导入的数据.可能是文件名没有提交,也可能是文件大小超出 PHP 限制. 2. 如 ...
- 蓝桥杯-平方怪圈-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- Java数据类型(基本数据类型)学习
Java数据类型(基本数据类型)学习 与其他语言一样,Java编程同样存在,比如int a,float b等.在学习变量之前我就必须先了解Java的数据类型啦. Java的数据类型包括基本数据类型和引 ...
- Day2 Python的运算符及三大语句控制结构
Python的运算符 Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 Python的三大语句控制结构: ...
- JavaScript ,Python,java,Go系列算法之选择排序
常见的内部排序算法有:插入排序.希尔排序.选择排序.冒泡排序.归并排序.快速排序.堆排序.基数排序等. 用一张图概括: 选择排序 选择排序是一种简单直观的排序算法,无论什么数据进去都是O(n2) ...
- 区划代码 node 版爬虫尝试
前言 对于区划代码数据,很多人都不会陌生,大多公司数据库都会维护一份区划代码,包含省市区等数据.区划信息跟用户信息息息相关,往往由于历史原因很多数据都是比较老的数据,且不会轻易更改.网上也有很多人提供 ...
- springMVC---简介
SpringMVC介绍 为什么要使用springMVC? 很多应用程序的问题在于处理业务数据和显示业务数据的视图的对象之间存在紧密耦合.通常,更新业务对象的命令都是从视图本身发起的,使视图对任何业务对 ...
- javaWeb基础核心之一Servlet
既然是做JAVA开发的,先从一些基本的整理起来,算是知识回顾,加深记忆. 第一篇想到那理到哪,可能有点乱,不是太会排版,见谅,估计可能也就我自己看的懂. servlet在百度百科上的定义是这样的: S ...
- mac上解决Resource temporarily unavailable
Resource temporarily unavailable这种问题一般是因为当前的进程数或者文件数不够 fork: Resource temporarily unavailable 修改最大进程 ...