宜昌本地软件开发与弱电工程服务商
项目咨询 · 快速响应

[jQuery]jquery选择器用法实例

2016-10-13 00:16:48 点击量:28 标签: 收藏本文

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

看下面片段:

  1. $(function(){ 
  2.     $("div:not(:first)").css("color", "red"); 
  3.     $("div").not(":first").css("color", "red"); 
  4.     $("div:first").nextAll().css("color", "red"); 
  5.     $("div:first").siblings().css("color", "red"); 
  6.     $("div + *").css("color", "red"); 
  7.     $("div ~ div").css("color", "red"); 
  8.     $("div:gt(0)").css("color", "red"); 
  9.     $(this).find("div:gt(0)").css("color", "red"); 
  10.     $("div").filter(":gt(0)").css("color", "red"); 
  11.     $("div").first().nextAll().css("color", "red"); 
  12.     $("div").slice(1).css("color", "red"); 
  13. }); 

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