·您当前的位置:主页 > 技术教程 > jQuery教程 >

[jQuery]jquery选择器用法实例

时间:2014-12-30 09:26酷播
jQuery是写的更少,但做的更多的轻量级JavaScript库。我觉得还有一点就是jQuery很灵活。针对同一问题,jQuery能提供不同的解决方案

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选择器。

热门文章推荐

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器