1 基本选择器
#myid, el, .myclass, *, selector1,selector2
2 层次选择器
elParent elChild 匹配所有子元素，孙元素
elParent > elChild 只匹配父元素紧接的一个子元素,不匹配孙元素
prev+next 只匹配前一个元素同级紧接的下一个元素
prev ~ siblings 匹配prev同级之后的元素数组
3 滤镜选择器
主要介绍基本滤镜选择器
一 基本滤镜选择器可分为
a 位置控制滤镜选择器,index从0开始
：first,:last,:even,:odd,:eq(index),:gt(index),:lt(index),
$("tr:gt(1)").addClass("rose"); //在表格中，从大于序号1那一行(第3行)应用样式
$("tr:lt(2)").addClass("indianred"); //在表格中，从小于序号2那一行(第2行)应用样式
b 隐藏显示滤镜选择器
: empty,:parent,:hidden,:visible
$("td:parent").addClass("indianred"); //匹配所有 含有 元素或文本的列,这个parent表示td中的元素或文本
$("tr:hidden").show().addClass("indianred"); //这个是表示行隐藏
$("tr:visible").addClass("indianred"); //匹配所有的可见元素
c 内容限制滤镜选择器
:contains(text) 选择包含指定文本的元素,:has(selector),not(selector),:header,:animated 实现动画
$(":header").addClass("rose"); //匹配所有<h>开头的元素
$("div:not(animated)").animated({ left: "+=20"}); 对不在执行动画的元素执行一个动画特效,左边宽度增加20px(即向右移动20px)
二 子元素滤镜选择器
E:nth-child(index/even/odd/equation),E:first-child,E:last-child,E:only-child
E:nth-child(index/even/odd/equation),匹配所有el在其父元素下满足(index/even/odd/equatin), 这里index从1开始
如: $("ul li:nth-child(even)").addClass("indianred"); //选择奇数元素应用样式,与下一个方法合成制作"斑马线"
$("ul li:nth-child(odd)").addClass("rose"); //选择偶数元素应用样式
$("ul li:nth-child(3n)").addClass("indianred"); 表示选择所有ul 元素下的序号为3的倍数的li元素.下面三个选择器与此类似
E:first-child,E:last-child,E:only-child
三 表单滤镜选择器
1.表单内容滤镜选择器,返回值都是数组
:input,:text,:password,:radio,:checkbox,:submit,:image,:reset,:button,:file
示例 $(":text").addClass("indianred"); //为text类型元素应用样式
$(":image").addClass("borderstyle"); //为image类型元素应用 实线边框 样式
2.表单功能滤镜选择器
:enabled,:disabled,:checked,:selected 返回值都是数组
示例 $("input:enabled").addClass("indianred"); //为所有可用的input类型元素应用样式
四 属性滤镜选择器
有6种 ,返回值都是数组
[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value]
其中[attribute^=value] 匹配属性attribute的值以value开始的元素
[attribute$=value] 匹配属性attribute的值以value开始的元素
[attribute*=value] 匹配属性attribute的值包含value的元素
示例 : $("input[class]").addClass("rose"); 表示为带有class属性的input类型元素应用样式
$("input[name^=first]").addClass("indianred"); //为属性name以first开始的input类型元素应用样式
$("input[name*=stna]").addClass("indianred"); //为属性name包含stna开始的input类型元素应用样式
$("input[class][name=firstname]").addClass("indianred"); //为属性name的值等于firstname,并且带有class属性的input类型元素应用样式