深入理解Bootstrap
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.7 jQuery基本用法

本小节主要是介绍与jQuery相关的用法，读者在深入了解这些特性以后，就可以按照Bootstrap的开发规范去开发自己的各种插件了，而不需要精通jQuery的全部用法。

在学习jQuery相关的用法之前，首先要确保所有的CSS选择器都能在jQuery里使用，比如$('[data-toggle^=button]')。如果遇到任何不明白的选择器，请查询CSS相关的语法。

1.7.1 事件绑定

jQuery的on和off分别用于绑定和禁用事件。例如：

$('td').on("click", function (event) { // 绑定abc元素上的click事件,单击时弹出提示
    alert(1);
});
$('td).off('click');                   // 禁用abc元素上的click事件

但是对于Bootstrap框架，它对jQuery的on和off的使用稍有不同。它使用了另外一种语法，例如：

$(document).on('click.bs.carousel.data-api','td',function (e){};
$(document).off('.carousel.data-api');

上述的on在使用时，中间多了一个参数，而且选择器变成了document。它的好处是只在document上绑定一个单击事件，利用冒泡的机制，在单击的时候检查是否是td元素，如果是才处理。而前面我们把td作为选择器的时候，一个页面有多少td元素就会绑定多少个click事件，这样性能会大大降低。这种3个参数的模式称为享元模式。

关于享元模式的详细信息，请访问笔者的博客“深入理解JavaScript系列”里的第37篇，地址如下：http://www.cnblogs.com/TomXu/archive/2012/04/09/2379774.html

1.7.2 事件命名空间

另外，还需要注意的是，这里的事件后面都跟了一些字符串，我们简单称它们为带有命名空间的事件。比如，你声明如下这样的代码：

$('#abc').on("click.tomxu",function (event) {
    alert(1);
});

一般别人触发click事件，都是这样做的：

$('#abc').trigger('click');

执行上述代码，在click时，所有绑定的click事件回调都会被执行。但是如果触发的时候，你不想影响其他click触发代码，这时候就可以只触发自己定义的click事件，以求不会对别人绑定的click回调产生影响，这时可以这样做。

$("#abc").trigger('click.tom.xu');

1.7.3 $.data()

很多JS插件里都使用了$(selector).data()方法，它的意思是收集指定元素上的所有以data-开头的自定义属性，并合并成为一个对象字面量。

对于以data-开头的自定义属性，相信大家都知道它是HTML5新支持的语法。比如：

<div id="abc" data-role="aaa" data-toggle="toggle" data-xxx="tom"></div>

如果要获取data-role里aaa这个值，则需要调用如下代码：

$("'#abc").data("role");

如果是不带参数的$("'#abc").data()；，则表示一次性将所有以data-开头的参数都收集起来，其结果和用如下方式声明一个value变量是一样的。

var value = {
    role: 'aaa',
    toggle: 'toggle',
    xxx: 'tom'
};

Bootstrap中的很多JS插件都是利用了这个特性，在HTML元素上定义了一些必要的参数，比如要不要使用动画、是否开启键盘事件等。大家在分析JS插件的option选项参数时即可看到各个参数的详细解释。

上一章目录下一章