jQuery学习笔记(基于jquery.1.10.2进行的验证)之一

一、选择器

1. ">"符号表示子元素，但是只包含第一级子元素，而不包含子元素的子元素

$("#someid > div");//选择id为someid的元素的子元素中的div集合

2.否定式伪类

$("#someid li:not(.someclass)");//选择id为someid的元素的子元素li中没有someclass类属性的元素

3.属性选择符

    属性选择符通过html元素的属性选择元素。例如选择所有带有alt属性的图像元素，代码如下：

$("img[alt]");

    属性选择符可以使用类似于正则表达式的通配符语法，以^表示在字符串开始，以$表示在字符串结束，用*表示要匹配的值可以出现在字符串任意位置，!表示取反，而且属性选择符可以组合使用。

$('a[href^="mailto:"]');//匹配a标签中href属性以mailto:开头的元素$('a[href$=".pdf"]');//匹配a标签中href属性以.pdf结尾的元素$('a[href*="hney"]');//匹配a标签中href属性包含字符串hney的元素$('a[href^="http:\/\/"][href$=.html]');//属性选择符组合使用，匹配a标签中href属性以http://开始，同时以.html结尾的元素

4.自定义选择符

    注意:尽量使用原生方法查找元素以免影响性能。

    自定义选择符通常跟在一个css选择符后面，基于已选元素的集合做更精确的查找。自定义选择符的语法与css伪类选择符相同，都是以冒号(:)开始。

$('div.hello:eq(1)');//匹配带有hello的class样式的div中的第二项$('div:nth-child(1)');//匹配所有div元素中的第一项，同$('div:first-child');

    注意以上选择符中，div与.hello之间没有空格。此外nth-child()选择符是jQuery选择符中唯一从1开始计数的选择符，它可以接受odd、even和数值做参数。

$('tr:even').css('background-color','gray');//隔行变色

    以上代码实现了表格从第一行开始(index为0)每到奇数行改变颜色。但是如果页面中有多个表格，就不能保证后面的表格是从第一行开始换色了。解决方法是使用上面提到的nth-child()选择符。它有两个特点，一是从1开始计数，二是以父元素为基准开始计数，而不是符合条件的所有元素。实现上述功能的代码为：

$('tr:nth-child(odd)').css('background-color','gray');//每一个表格都从第一行开始隔行换色

   最后一种自定义选择符示例如下：

$('td:contains(Yes)').css('font-size','30');//刷选所有td元素的文本中包含‘Yes’的那些元素

    需要注意的是contains()的参数区分大小写，并且参数是否用引号包围起来效果都一样。

5.表单选择符

:input    //输入字段、文本区、选择列表和按钮列表:button    //按钮元素，或者type属性为button的输入元素:enabled    //启用的表单元素:disable    //禁用的表单元素:checked    //勾选的单选按钮或复选框:selected    //勾选的选项元素

    以上选择符通常组合使用，使选择更有针对性。例如：$('input[type="radio"]:checked')选择选中的单选按钮。

6.DOM遍历选择符

    ① .filter()选择符，用于在已选元素集合中做进一步的过滤。例如：$('tr').filter('odd')可以达到与$('tr:odd')一样的效果，不过.filter()能够提供共复杂的过滤条件。

$('a').filter(function(){    return this.hostname && this.hostname != location.hostname;});

    上述代码的筛选条件是：a标签的href属性要带有域名(hostname)，并且链接指向的域名不等于当前页面的域名。执行过程中，filter()方法会迭代所有的a标签，将每个元素传入function进行测试，返回false的元素从匹配集合中删除，从而得到最终结果。

    ② .next()、.nextAll()、.prev()、.prevAll()、.siblings()、.andSelf()选择符

    顾名思义，以上选择符分别选择：与匹配元素最接近的下一个“同级”元素、匹配元素之后的所有“同级”元素、与匹配元素最接近的上一个“同级”元素、匹配元素之前的所有“同级”元素、匹配元素的所有兄弟元素。而最后一个.andSelf()选择符用于在结果集中加入自身元素。

    事实上选择某一元素包含其自身的所有同级元素还可以使用以下方式：

$('#someId').parent().children();

7.访问DOM元素

    以上选择符返回的都是jQuery元素或者jQuery元素的集合，在需要DOM元素的时候可以调用jQuery的get()方法获得对应的DOM元素。

var tagName1 = $('#someId').get(0).tagName;//单个元素通过get(0)获得其DOM元素var tagName2 = $('.someClass').get(2).tagName;//多个元素通过get(index)获得指定的DOM元素

    以上代码还能采用如下的简写形式：$('#someId')[0]、$('.someClass')[2]。

二、事件

    1.文档加载后的初始化事件

    ① 代码执行时机

    $(document).ready(function(){})和原生的window.onload都可以完成文档加载后的初始化操作。但是两者有着细微差异。

    文档完全下载到浏览器之后会触发window.onload事件。这意味着页面上的所有元素对javascript而言都是可操作的。

    而通过注册为$(document).ready(function(){})的事件处理程序，会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是并不意味着所有关联文件都已下载完毕。也就是说，HTML下载完成并解析为DOM树之后，代码就可以运行。

    一般来说$(document).ready(function(){})优于onload事件处理程序，但是因为支持文件可能还没有加载完成，所以类似图像的宽度、高度这样的属性此时可能还没有生效。如果要访问这些属性，可能实现一个onload处理程序才是一个更好的选择。

    ②代码执行顺序

    window.onload事件只能注册一个事件处理函数，而$(document).ready()的行为队列中的每个函数都能得到执行，而且是按照注册顺序执行。当然也可以编写一个javascript函数，用它构造一个调用现有的onload事件处理程序的的新函数，然后再调用一个传入的事件处理程序。但是这样不能保证事件的执行顺序。

    2.复合事件

    jQuery的.toggle()和.hover()方法接受多个函数作为响应，被称为复合事件处理程序。

    ①.toggle()

    触该方法会导致选择器选中的元素交替隐藏或显示。方法接收三个参数：1、数值或“slow”、“normal”、“false”，影响显示或隐藏动画的速度。2、function(){}，显示或隐藏效果实现之后的回调函数。W3School指出如果不设置第一个参数就不能设置第二个参数。不过我在jquery.1.10.2下可以单独指定回调函数。未做验证，可能是版本问题。3、true或者false。该参数需单独设置才生效，即不设置前两个参数时才生效。设置为true功能相当于.show()，设置为false功能相当于.hide()。

    ②.hover()

    该方法对所选中元素的鼠标移入移出事件做出反应。方法接受一个或者两个事件处理函数作为参数。以下解释简明易懂：

$(selector).hover(handlerIn, handlerOut);//以上代码的功能相当于$(selector).mouseenter(handlerIn).mouseleave(handlerOut);$(selector).hover(handlerInOut);//以上代码的功能相当于$(selector).on("mouseenter mouseleave", handlerInOut);

    3.事件对象

    为了在事件处理程序中使用事件对象，需要在函数中增加一个参数：function(event){}。event.target属性保存着发生事件的目标元素。以上是W3C规定的标准，但是IE中把事件对象保存在了全局变量window.event中，通过window.event.srcElement访问发生事件的目标元素。

    事件对象提供了一个.stopPropagation()方法阻止事件冒泡，但是在IE浏览器中要设置事件对象的cancelBubble属性为true才能阻止事件冒泡。

    jQuery对事件对象进行了必要的扩展，消除了浏览器之间的差异性，因此注册在$(document).ready(function(){})中的事件对象是可以无差别的使用事件对象的target属性和stopPropagation()方法的。

    注：使用原生的javascript代码测试，调用方法时传入的参数名必须是“event”，而定义事件处理程序时函数的参数名称可以任意取。而在$(document).ready(function(){})中注册事件处理程序时，不存在方法调用，也就没有传入参数名这一说，事件处理程序的参数名也可以任意取。

<a href="http://www.baidu.com" onclick="stop(event);" id="stop" target="_blank">百度</a><!-- onclick事件调用stop方法时，参数名必须是“event” --><script>    function stop(e){//方法定义中的参数名可以任意取}    $(document).ready(function(){        $('#stop').click(function(e){//此处参数名也可任意取});    });</script>

    4.默认行为

    有些DOM元素的click事件是有默认行为的，例如<a>和<submit>，前者默认会跳转到href属性所指的地址，后者会导致一个表单的提交。上面所讲的阻止事件冒泡的方法是不能阻止这些默认行为的。对此，事件对象提供了另一个.preventDefault()方法终止默认行为，在IE中需要将事件对象的returnValue属性设置为false才能达到同样的效果。

     同样，jQuery中注册的事件对象也消除了浏览器差异性，可以使用统一的preventDefault()方法取消默认操作。

    说明：事件冒泡和事件的默认行为是两套完全独立的机制，如果想要同时阻止两者发生可以在事件处理程序中返回false，这是对在事件对象上同时调用.preventDefault()和.stopPropagetion()方法的简化形式。这种方式只能在jQuery中注册的事件处理程序中才有效，原生的javascript代码中无效。

function stop(){return false;//没有阻止事件冒泡和阻止默认事件的效果}$(document).ready(function(){    $('#stop').click(function(){        return false;//可以阻止事件冒泡，也能阻止默认行为    });});

    5.事件委托

    事件委托是事件冒泡带来的有益应用。例如，一个div中包含有很多个button，我们当然可以为每一个button都绑定相同的onclick事件处理程序，但是当button的数量达到一定规模，这种方式的执行效率就会出现问题，而且内存浪费也非常巨大。由于事件冒泡机制的存在，我们可以把基于button的onclick事件绑定到div上。如果button的onclick事件没有遭到拦截，最终会在div上实现事件处理。

    以上方案的一个问题是，div的作用范围会比button集合广，例如div中还包含<p>等其他元素，这样其他元素的onclick也会触发我们绑定的事件，而这不是我们期望的。这时可以通过事件对象(event.target)判断是否执行处理程序。

$(document).ready(function(){    $('div').click(function(event){        if($(event.target).is('button')){            //执行事件处理程序        }    });});

    代码中的is()方法接收一个选择符表达式作为参数，调用该方法的集合中只要有一个元素匹配is()方法中的选择符表达式，该方法就返回true。只有所有集合元素都不匹配方法参数时才返回false。

    6.移除事件处理程序

    使用.unbind()方法移除已经注册的事件处理程序，例如：$('div').unblid('click')，这样之前所有注册在div上的click事件处理程序就全部失效了。但是假设我们只想让一部分处理程序失效，还要保留一部分有效怎么做呢？一个方案是多次注册div的click事件处理程序，为不同的处理程序提供不同的事件命名空间，从而达到对事件的更精细的控制。

$('div').bind('click.first',function(){alert('first');})$('div').bind('click',function(){alert(123);})$('p').click(function(e){    $('div').unbind('click.first');});

    以上程序先是为div注册里两个click事件处理程序，在移除的时候通过.first命名空间精细的控制移除的是哪一个处理程序。
    7.事件重新绑定

    绑定事件处理程序还有另外一种方式，就是将处理程序定义为匿名函数，然后赋值给自定义变量。这样做的好处是多次绑定的时候可以引用变量名，而不用重新定义处理程序。而且移除绑定的时候也可以指定移除哪个处理程序，省去了对命名空间的使用。不过需要注意的是，每次进行事件绑定，之前绑定的时间依然是有效的，所以在做“重新绑定”的时候，要先清除之前的绑定事件，以免程序用户多次点击重新绑定，导致不期望的结果出现。

var test = function(){alert(123);}$('p').click(function(){$('div').unbind('click',test);//如果没有这一行会导致用户多次点击p标签绑定了很多次多余的test处理程序$('div').bind('click',test);});

    此外，对于只触发一次，之后立即解除绑定的事件处理程序有一种简写方法：

$('div').one('click',test);

    8.模拟用户事件

    有时候我们为元素注册了click事件，但是当页面加载完成，用户没有操作的时候我们就想实现click事件的响应程序(通常用于页面初始化的情况)，这时候可以用trigger()方法实现这一需求。

$(document).ready(function(){$('div').trigger('click');});

    当页面加载完成上述代码执行之后，就好像div被用户单击了一样。trigger()方法与bind()方法一样，为各种事件描述提供了一组简写方法，当这些方法不带参数的时候，结果是触发相应操作而不是绑定事件处理程序。

$('div").click();//click方法没有参数时执行事件触发，等价于$('div').trigger('click');