jQuery I 之 jQuery 选择器

 

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类型元素应用样式