灵巧的 jQuery

jQuery 是“写的更少，但做的更多”的轻量级 JavaScript 库。我觉得还有一点就是 jQuery 很灵活。针对同一问题，jQuery 能提供不同的解决方案。

问题

比如说页面有 4 个 div，要设置后面三个div 的颜色为红色。

使用 jQuery 有哪些办法呢？看下面片段：

解决办法

• 从集合的第二个 div开始选取所有元素：

$(function(){
  $('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').slice(1).css('color', 'red');
});

• 选取除去第一个 div 的所有元素：

$(function(){
  $('div:not(:first)').css('color', 'red');
  $('div').not(':first').css('color', 'red');
});

• 选取第一个 div 的所有兄弟元素

$(function(){
  $('div:first').nextAll().css('color', 'red');
  $('div:first').siblings().css('color', 'red');
  $('div').first().nextAll().css('color', 'red');
});

已经够多了吧？这得益于 jQuery 强大的选择器和筛选方法。正所谓“条条大路通罗马”，可见 jQuery 的灵活。当然，如果不考虑兼容浏览器的话，最好的方法是使用 CSS3 选择器。