jQuery选择器

jQuery选择器

• jQuery选择器类似于CSS选择器，用来选取网页中的元素

  • $("h3").css("background","#09F");
    

    代码分析：
  •  获取并设置网页中所有<h3>元素的背景
  • “h3”为选择器语法，必须放在$()中
  • $(“h3”)返回jQuery对象
  • .css()是为jQuery对象设置样式的方法

jQuery选择器分类

jQuery选择器功能强大，种类也很多，分类如下：

• 类CSS选择器
  • 基本选择器
  • 层次选择器
  • 属性选择器
• 过滤选择器
  • 基本过滤选择器
  • 可见性过滤选择器

类CSS选择器

基本选择器

• 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

 层次选择器

• 层次选择器通过DOM 元素之间的层次关系来获取元素

属性选择器

• 属性选择器通过HTML元素的属性来选择元素

 表单选择器

表单属性选择器

内容选择器

• 内容选择器主要使用通过元素所包含的文本或子元素进行匹配或获取

过滤选择器

• 过滤选择器是在获取到元素后通过索引进一步进行过滤或筛选

• 过滤选择器通过特定的过滤规则来筛选元素
• 语法特点是使用“:”，如使用$(“li:first”)来选取第一个li元素
• 主要分类如下：
  • 基本过滤选择器
  • 可见性过滤选择器
  • 表单对象过滤选择器（本博客暂不涉及）
  • 内容过滤选择器、子元素过滤选择器……

基本过滤选择器

• 选取索引值等于1的元素
  • $("li:eq(1)")
• 选取索引值大于1的元素
  • $("li:gt(1)")
• 选取索引值小于1的元素
  • $("li:lt(1)"

基本过滤选择器还支持一些特殊的选择方式

 可见性过滤选择器

• 获取隐藏的<p>元素，使其显示
  • $(" p:hidden").show();
• 获取显示的<p>元素，使其隐藏
  • $(" p:visible").hide();

注意事项

 特殊符号的转义

•  选择器中的特殊符号需要转义，在如下html代码中

<div id="id#a">aa</div>

<div id="id[2]">cc</div>

• 获取这两个元素的选择器

错误方式：

$("#id#a");

$("#id[2]");

正确方式：

$("#id\\#a");

$("#id\\[2\\]");

选择器中的空格

• 选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

选取class为“test”的元素内部的隐藏元素：

var $t_a = $(".test :hidden"); //带空格的jQuery选择器

选取隐藏的class为“test”的元素：

var $t_b = $(".test:hidden");  //不带空格的jQuery选择器

总结

常见的jQuery选择器：

• 基本选择器
  • 标签选择器、类选择器、ID选择器
  • 并集选择器、交集选择器、全局选择器
• 层次选择器
  • 后代选择器、子选择器
  • 相邻选择器、同辈选择器
• 属性选择器
  • 属性名过滤、属性值过滤、多属性条件过滤
• 基本过滤选择器
• 可见性过滤选择器