jQuery-选择器

一:JQuery和DOM转换  

  转换:
  jquery对象[0] => Dom对象
  Dom对象 => $(Dom对象)

$('#i1')[0] <=====>document.getElementById('i1')

d=document.getElementById("i1")
$(d)

二:选择器

  选择器分为:基本选择器,层级选择器,属性选择器,基本筛选器

  1)基本选择器

选择器 使用 说明 例子
ID #id 根据给定的ID匹配一个元素 $("#li")
元素 element 根据给定的元素标签名匹配所有元素 $("a")
.class 根据给定的css类名匹配元素 $(".li")
* * 匹配所有元素  
组合

selector1,selector2

将每一个选择器匹配到的元素合并后一起返回
$("div,span,p.myClass")

 

 

 

 

 

  

  2)层级选择器

使用 说明 例子 备注

ancestor descendant

在给定的祖先元素下匹配所有的后代元素
$("form input")
 
parent>child 在给定的父元素下匹配所有的子元素
$("form > input")
 
prev+next 匹配所有紧接在 prev 元素后的 next 元素
$("label + input")
使用比较少,可以使用筛选器替代
prev  ~siblings 匹配 prev 元素之后的所有 siblings 元素
$("form ~ input")
使用比较少,可以使用筛选器替代

 

 

 

 

 

 

 

 

  3)属性选择器

使用 说明 例子 备注

[attribute]

 匹配包含给定属性的元素  
$("div[id]")
 

[attribute=value]

 匹配给定的属性是某个特定值的元素  
$("input[name='newsletter']")
 

[attribute!=value]

 匹配所有不含有指定的属性  
$("input[name!='newsletter']")
 

[attribute^=value]

 匹配给定的属性是以某些值开始的元素  
$("input[name^='news']")
 
 [attribute$=value]  匹配给定的属性是以某些值结尾的元素  
$("input[name$='letter']")
 

[attribute*=value]

 匹配给定的属性是以包含某些值的元素  
$("input[name*='man']")
 

[attrSel1][attrSel2][attrSelN]

 复合属性选择器,需要同时满足多个条件时使用  
$("input[id][name$='man']")
 

 

 

 

 

 

 

 

 

 

  4)基本筛选器

使用 说明 例子 备注

:first

 获取第一个元素  
$('li:first');
 

:not(selector)

 去除所有与给定选择器匹配的元素  
$("input:not(:checked)")
 

:even

 匹配所有索引值为偶数的元素,从 0 开始计数  
$("tr:even")
 

:odd

 匹配所有索引值为奇数的元素,从 0 开始计数  
$("tr:odd")
 

:eq(index)

 匹配一个给定索引值的元素  
$("tr:eq(1)")
 

:gt(index)

 匹配所有大于给定索引值的元素  
$("tr:gt(0)")
 
:last  获取最后个元素  
$('li:last')
 

:lt(index)

 匹配所有小于给定索引值的元素    
:header  匹配如 h1, h2, h3之类的标题元素  
$(":header").css("background", "#EEE");
 

posted on 2017-10-02 13:25  shisanjun  阅读(159)  评论(0编辑  收藏  举报

导航