jQuery（选择器）

• 基本选择器（*）

在开发过程中，jQuery对象的定义
var $obj=$("选择的对象")；
//$obj为自定义的元素名

$("#id");
选中的结果是该元素的jQuery对象

$("标签名称");jquery对象的集合，如果选择结果只有一个，那么是当前对象

$(".类名");
jQuery对象的集合，类名是在css中定义

$("selector1seletor2");
满足selector1选择器，并且同时也满足seletor2选择器的元素的集合

注意：并集选择器中，两个选择器不可以分开，中间无空格。

• 全局选择器

$("*");
jQuery对象的集合，会选中所有

• 层次选择器（*）
  • 后代选择器

$("selector1 selector2");
选择selector1内部所有满足selector2的元素

注意：后代选择器中，两个选择器中间是有空格的，与并集选择器区别开。

• 子代选择器

$("selector1>selector2");
选择selector1中满足selector2选择器的内容，扔掉孙代

$("selector1+selector2");
选择满足选择器1元素后面的满足选择器2的元素

注意：只能选择相邻后面的一个

• 同辈元素选择器

$("选择器1~s选择器2");
选择选择器1元素之后的同辈元素，
并且同辈元素满足选择器2的要求

注意：前面的同辈元素是不会被选择的（被选择元素不只一个）

• 属性过滤选择器（*）

$(选择器[attributeName^|$|*=''])
在选择器的基础上，
对属性进行选择=代表属性值必须和'指定值'一致；

^=属性以指定值开头；

$=属性以'指定值'结尾；

*=属性值中包含有'指定值'；

• [attributeName='指定值'] 获取相应属性值为指定值的元素；
• [attributeName^='指定值'] 获取相应属性值以指定值开头的元素；
• [attributeName$='指定值'] 获取相应属性值以指定值结尾的元素；
• [attributeName*='指定值'] 获取相应属性值中包含指定值的元素；
• [attributeName!='指定值'] 获取相应属性值中不包含指定值的元素；

• 基本过滤选择器 都是以:开头
  • :eq(index)：选择索引等于index的元素；
  • :gt(index)：选择索引大于index的元素；
  • :lt(index)：选择索引小于index的元素；
  • :header：选择标签h1~h6的元素；
  • :focus：选择所有获取焦点的元素；
  • :animated 选择所有的动画；
  • :first 选择索引第一个元素；
  • :last 选择索引最后一个元素；
  • :not(选择器) 选择不包含selector选择器的元素；
  • :even 选择索引为偶数的元素；
  • :odd 选择索引为奇数的元素；

注意：

1. 使用等于和小于进行并集选择器时，等于在前；
2. eq后的元素index重新按照0进行排列才能取出正确的数据（推荐显示先用lt，再使用eq）；

• 可见性过滤选择器
  • :visible 选取所有可见元素（占据文档流的位置。例如：visibility:hidden,opacity:0,width:0px）；
  • :hidden 选择所有隐藏元素（例如：display:none,type="hidden）；
• 表单过滤选择器
  • :input 选择所有input元素；

等同于：

$("input")

等同于：

$("input[type='text']")

等同于：

$("input[type='password']")

可使用以下方式选中：

$("input[type='image']")

等同于：

$("input[type='file']")

等同于：

$("input[type='radio']")

等同于：

$("input[type='checkbox']")

等同于：

$("input[type='button']")

等同于：

$("input[type='submit']")

等同于：

$("input[type='reset']")

• 内容过滤选择器
  • :contains("value") 选择元素中内容包含指定值的元素（包括div等标签）；
  • :empty 选中不包含子元素和内容的元素；
  • :has(选择器) 匹配包含有指定选择器选中的元素的元素；
  • :parent 匹配含有子元素或者文本的元素；
• 子元素过滤选择器
  • :nth-child(index) 匹配其父元素下的第N个子或奇偶元素；

注意：index值从1开始，可以是数字，

可以是even偶数，odd奇数，

可以使用表达式2n,3n,3n+1...

• :first-child 匹配所给选择器( :之前的选择器)的第一个子元素；

等同于：

:nth-child(1)

注意：但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一 个子元素。这相当于:nth-child(1)；

• :last-child 匹配所给选择器( :之前的选择器)的最后一个子元素；

注意：:last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素；

• :only-child 唯一的一个子元素；

注意：如果父元素中含有其他元素，那将不会被匹配。（注：这里的其他元素并不包含文本节点，如：图片。用$('p img:only-child')是可以匹配