灵巧的jQuery

jQuery是“写的更少,但做的更多”的轻量级JavaScript库。我觉得还有一点就是jQuery很灵活。针对同一问题,jQuery能提供不同的解决方案。比如说页面有4个div,要设置后面三个div的颜色为红色。使用jQuery有哪些办法呢?

看下面片段:

$(function(){
    $('div:not(:first)').css('color', 'red');
    $('div').not(':first').css('color', 'red');
    $('div:first').nextAll().css('color', 'red');
    $('div:first').siblings().css('color', 'red');
    $('div + *').css('color', 'red');
    $('div ~ div').css('color', 'red');
    $('div:gt(0)').css('color', 'red');
    $(this).find('div:gt(0)').css('color', 'red');
    $('div').filter(':gt(0)').css('color', 'red');
    $('div').first().nextAll().css('color', 'red');
    $('div').slice(1).css('color', 'red');
});

已经够多了吧?这得益于jQuery强大的选择器和筛选方法。要从四个div选取后三个,可以从集合的第二个div开始选取所有元素,换种说法说是选取除去第一个div的所有元素,还有一种办法就是选取第一个div的所有兄弟元素。正所谓“条条大路通罗马”,可见jQuery的灵活。当然,如果不考虑兼容浏览器的话,最好的方法是使用CSS3选择器。

发表评论