找回密码
 FreeOZ用户注册
查看: 1675|回复: 14
打印 上一主题 下一主题

[学习深造] jquery data("selectBox-selectBoxIt")

[复制链接]
跳转到指定楼层
1#
发表于 27-11-2015 09:01:49 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?FreeOZ用户注册

x
http://gregfranko.com/jquery.selectBoxIt.js/#Examples

// Calls selectBoxIt on your select box
  $("select").selectBoxIt();

  // Removes the first drop down option from the list
  $("select").data("selectBox-selectBoxIt").remove(0);
上面的是该连接的举例
为何不可以直接调用如下?
// Calls selectBoxIt on your select box
  $("select").selectBoxIt().remove(0);
remove(0)为何要根在  $("select").data("selectBox-selectBoxIt")之后?
回复  

使用道具 举报

2#
发表于 27-11-2015 09:12:19 | 只看该作者
回复  

使用道具 举报

3#
 楼主| 发表于 27-11-2015 09:18:17 | 只看该作者

为何发这些图标啊?我满心欢喜以为可以看到你的回答
回复  

使用道具 举报

4#
发表于 27-11-2015 09:20:57 | 只看该作者
$("select").selectBoxIt() is a call turn your select into that stupid  select..

$("select").data("selectBox-selectBoxIt")   shoud return a array of all options.

you want to remove a option... then   $("select").data("selectBox-selectBoxIt").remove(0);
回复  

使用道具 举报

5#
发表于 27-11-2015 09:23:01 | 只看该作者
$("select").selectBoxIt() does not return any options....
回复  

使用道具 举报

6#
 楼主| 发表于 27-11-2015 09:25:34 | 只看该作者
本帖最后由 DDD888 于 27-11-2015 09:27 编辑
周星星1832 发表于 27-11-2015 09:20
$("select").selectBoxIt() is a call turn your select into that stupid  select..

$("select").data ...


我想多次调用selectBoxIt()除了浪费时间外应该没有其他坏处,是吧?
$("select").selectBoxIt();
$("select").selectBoxIt();
$("select").selectBoxIt();
$("select").selectBoxIt();
$("select").data("selectBox-selectBoxIt").remove(0);

如果从未调用selectBoxIt(),
直接调用$("select").data("selectBox-selectBoxIt").remove(0);会出错吧?
回复  

使用道具 举报

7#
 楼主| 发表于 27-11-2015 09:28:24 | 只看该作者
周星星1832 发表于 27-11-2015 09:23
$("select").selectBoxIt() does not return any options....

$("select").selectBoxIt()返回的object和 $("select").data("selectBox-selectBoxIt")有啥区别?
回复  

使用道具 举报

8#
发表于 27-11-2015 09:35:21 | 只看该作者
DDD888 发表于 27-11-2015 09:25
我想多次调用selectBoxIt()除了浪费时间外应该没有其他坏处,是吧?
$("select").selectBoxIt();
$(" ...

多次调用的目的??浪费时间吗???

https://api.jquery.com/data/

根據里面的描述。。。
要报错 $("select").data("selectBox-selectBoxIt") 会return undefined
回复  

使用道具 举报

9#
发表于 27-11-2015 09:37:36 | 只看该作者
DDD888 发表于 27-11-2015 09:28
$("select").selectBoxIt()返回的object和 $("select").data("selectBox-selectBoxIt")有啥区别?

https://api.jquery.com/data/
回复  

使用道具 举报

10#
发表于 27-11-2015 09:49:32 | 只看该作者
基础概念缺失,selectBoxIt()相当于构造函数,返回的对象可以认为是某个class的instance,在这个instance上你再call它的方法。多次调用构造函数,显然,你认为它是一个功能函数,应该返回一个数组。然而,不是的,data本身是一个抽象存储,在调用了构造函数后,会加载一些数据到select dom对象上。一般是为了统一操作和调用风格。
回复  

使用道具 举报

11#
 楼主| 发表于 27-11-2015 09:52:36 | 只看该作者
周星星1832 发表于 27-11-2015 09:35
多次调用的目的??浪费时间吗???

https://api.jquery.com/data/

根据下面的代码
/*! jquery.selectBoxIt - v3.8.0 - 2013-08-13
* http://www.selectboxit.com
* Copyright (c) 2013 Greg Franko; Licensed MIT*/

// Immediately-Invoked Function Expression (IIFE) [Ben Alman Blog Post](http://benalman.com/news/2010/11 ... unction-expression/) that calls another IIFE that contains all of the plugin logic.  I used this pattern so that anyone viewing this code would not have to scroll to the bottom of the page to view the local parameters that were passed to the main IIFE.

;(function (selectBoxIt) {

    //ECMAScript 5 Strict Mode: [John Resig Blog Post](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/)
    "use strict";

    // Calls the second IIFE and locally passes in the global jQuery, window, and document objects
    selectBoxIt(window.jQuery, window, document);

}

// Locally passes in `jQuery`, the `window` object, the `document` object, and an `undefined` variable.  The `jQuery`, `window` and `document` objects are passed in locally, to improve performance, since javascript first searches for a variable match within the local variables set before searching the global variables set.  All of the global variables are also passed in locally to be minifier friendly. `undefined` can be passed in locally, because it is not a reserved word in JavaScript.

(function ($, window, document, undefined) {

    // ECMAScript 5 Strict Mode: [John Resig Blog Post](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/)
    "use strict";

    // Calling the jQueryUI Widget Factory Method
    $.widget("selectBox.selectBoxIt", {
$("select").selectBoxIt()通过调用widget, 将"selectBox.selectBoxIt"和"select".data联系起来了,然后$("select").data("selectBox-selectBoxIt")就可以直接取得该变量值,是吗?
回复  

使用道具 举报

12#
发表于 27-11-2015 09:55:22 | 只看该作者
DDD888 发表于 27-11-2015 09:52
根据下面的代码
/*! jquery.selectBoxIt - v3.8.0 - 2013-08-13
* http://www.selectboxit.com

对的。。。

selectBoxIt 這個function 肯定有一部分作用是把你的原来的select的所有options 封装成一个array。。
然后把這個array用data function attach to 那个你的select...
回复  

使用道具 举报

13#
 楼主| 发表于 27-11-2015 10:05:27 | 只看该作者
看了下面的代码
    // Stores the plugin prototype object in a local variable
    var selectBoxIt = $.selectBox.selectBoxIt.prototype;
不知道$.selectBox.selectBoxIt何时和jquery联系上的?
回复  

使用道具 举报

14#
发表于 30-11-2015 01:08:15 | 只看该作者
DDD888 发表于 27-11-2015 10:05
看了下面的代码
    // Stores the plugin prototype object in a local variable
    var selectBoxIt = ...

这是应该是在
  1. $.widget("selectBox.selectBoxIt",
复制代码

的时候发生的。
参考 https://learn.jquery.com/jquery- ... the-widget-factory/
回复  

使用道具 举报

15#
 楼主| 发表于 30-11-2015 07:47:06 | 只看该作者
cais 发表于 30-11-2015 01:08
这是应该是在

的时候发生的。


谢谢

是的
When we call jQuery.widget() it extends jQuery by adding a function to jQuery.fn (the system for creating a standard plugin). The name of the function it adds is based on the name you pass to jQuery.widget(), without the namespace - in our case "progressbar".

现在,javascript弄的比c#要难读多了
回复  

使用道具 举报

您需要登录后才可以回帖 登录 | FreeOZ用户注册

本版积分规则

小黑屋|手机版|Archiver|FreeOZ论坛

GMT+11, 12-11-2024 10:23 , Processed in 0.043084 second(s), 30 queries , Gzip On, Redis On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表