jQuery基本用法

所有的CSS选择器都能在jQuery里使用，比如$('[data-toggle^=button]')。

事件绑定

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事件，这样性能会大大降低。

事件命名空间

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

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

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

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

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

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

$.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选项参数时即可看到各个参数的详细解释。