码迷,mamicode.com
首页 > Web开发 > 详细

JQuery选择器大全

时间:2014-06-18 09:04:23      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:des   style   class   ext   color   width   

1. 基本选择器

选择器 描述 返回 示例
#id      单个元素  $("#test")
.class   集合元素 $(".test")
element   集合元素 $("p")
*   匹配所有元素 集合元素 $("*")
selector1,selector2   集合元素 $("div,span,p")

 

 

 

 

 

2. 层次选择器 

选择器 描述 返回 示例
$("ancestor descendant") 选取所有后代    集合元素  $("div span")
$("parent>child") 选取直接后代 集合元素 $("div.span")
$("prev+next") 选取紧接在prev元素后的next元素 单个元素 $(".one+div")
$("prev~siblings")   选取紧接在prev元素后的所siblings元素 集合元素 $(".one~div")

 

 

 

 

 

3. 过滤选择器

  (1)基本过滤选择器

选择器 描述 返回 示例
:first      单个元素  $("div:first")
:last      单个元素  $("div:last")
:not(selector)   集合元素 $("input:not(.myclass)")
:even   索引从0开始 集合元素 $("input:even")
:odd
  集合元素 $("input:odd")
:eq(index)   单个元素 $("input:eq(1)")
:gt(index)   集合元素 $("input:gt(1)")
:lt(index)   集合元素 $("input:lt(1)")
:header 选取所有的标题元素 集合元素 $(":header")
:animated 选取当前正在执行动画的元素 集合元素 $(":animated")
:focus 选取当前获取焦点的元素 单个元素 $(":focus")

 

 

 

 

 

 

 

 

 

  (2)内容过滤选择器

选择器 描述 返回 示例
$(":contains(text)")      集合元素  $("div:contains(‘我‘)")
$(":empty") 选取不包含子元素或者文本的空元素 集合元素 $("div:empty")
$(":has(selector)")   集合元素 $("div:has(p)")
$(":parent")   选取含有子元素或者文本的元素 集合元素 $("div:parent")

 

 

 

 

  (3)可见性过滤选择器

选择器 描述 返回 示例
:hidden 选取所有不可见元素     集合元素  $(":hidden")
:visible 选取所有可见元素 集合元素 $("div:visible")

 

 

 

  (4)属性过滤选择器

选择器 描述 返回 示例
[attribute] 选取拥有此属性的元素  集合元素  $("div[id]")
[attribute=value] 选取属性的值为value的元素   集合元素 $("div[title=test]") 

 

 

 

 

 

JQuery选择器大全,布布扣,bubuko.com

JQuery选择器大全

标签:des   style   class   ext   color   width   

原文地址:http://www.cnblogs.com/seanbrucexxl/p/3793346.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!