jQuery（一）

1.在css中，经常会在第一行写下这样的一段样式

*{  padding:0;
    margin:0;
}

通配符星号意味着给所有的元素设置默认的边距，jQuery中我们也可以通过传递星号选择器来选中文档中的元素
描述：

$("*")

抛开jQuery，而如果要获取所有文档中的所有元素，通过document。getElementsByTagName()中传递星号同样可以获取到，不难发现，id ,class,tag都可以通过原生的方法获取到对应的节点，但是我们还需要，考虑一个兼容性的问题：

①IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName()里面会包含注释节点，这个通常是不应该的
②getElementById的参数在IE*以及比较低的版本不区分大大小写，IE7以及比较低的版本中，表单元素中，如果表单A的name属性名用了另外一个元素B的ID并且A在B之前，那么getElementById会选中A
③IE8以及比较低的版本，浏览器不支持getElementsByClassName

2.jQuery中的on( )的用法：

表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个”on”方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

基本用法：

$(selector).on(event,childSelector,data,function,map)

注意：

由空格分隔多个事件值。必须是有效的事件。

最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

多个事件绑定同一个函数：

$("#elem").on("mouseover mouseout",function(){ });

通过空格分离，传递不同的事件名，可以同时绑定多个事件

多个事件绑定不同函数：

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});

将数据传递到处理程序：

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 你好
}
$( "button" ).on( "click", {
  name: "你好"
}, greet );

on()的高级用法：

$(selector).on(event,childSelector,data,function,map)

在on的第二参数中提供了一个childSelector选择器，简单的来描述下

参考下面3层结构：

<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
    </p>
</div>

给出如下代码：

$("div").on("click","p",fn)

事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数