首页 > 代码库 > jQuery选择器

jQuery选择器

选择器是jQuery的根基,在jQuery中,对事件的处理,遍历DOM和Ajax操作都依赖于选择器

基本选择器:6种:

标签选择器

     语法:element   返回值:元素集合

标签选择器:

//$("h1").css("color","red")

类选择器

//$(".myclass").css("color","green")

     ID选择器 :

     语法:.class   返回值:元素集合

     //$("#myid").css("color","yellow")

     并集选择器 :

     语法:#id       返回值:单个元素

     //$("div#my").css("color","blue")

     交集选择器:

     语法:selector1, selector2...selectorN    返回值:元素集合

//$("div,#my").css("color","yellow")

    全局选择器:

      语法:*     返回值:集合元素   

$("*").css("color","yellow")

 

 

层次选择器:后代选择器:

 语法:ancestor descendant   返回值:元素集合

 后代选择器:

$("A B").css("color","yellow")

 子选择器: 

 语法:parent>child    返回值:元素集合

定位的只是直接子类

 $("A>B").css("color","yellow")

 相邻元素选择器:

 语法:prev+next        返回值:元素集合

 $("A+B").css("color","yellow")

 同辈元素选择器:

 语法:prev~sibings     返回值:元素集合

锁定prev之后的元素,不能锁定prev之前的元素

$("A~B").css("color","yellow")

 

属性选择器:

$(“[class=odds]”).css(“background”,”red”)  

$(“[id!=box]”).css(“background”,”red”)

Title元素中以h开头:

$(“[title^=h]”).css(“background”,”red”)

Title元素中以jp结尾:

$(“[title$=jp]”).css(“background”,”red”)

Title元素中以含s的:

$(“[title*=s]”).css(“background”,”red”)

包含class属性 且title属性值中含有s的li元素

$(“li[class][title*=s]”).css(“background”,”red”)

 

过滤选择器:

基本过滤选择器:

//$("li:first").css("background","#09F")     //第一个

           //$("li:last").css("background","#09F")       //最后一个

          //$("li:not(.three)").css("background","#09F") //class不为three的

           //$("li:even").css("background","#09F")    //索引值为偶数的

           //$("li:odd").css("background","#09F")       //索引值为奇数的

           //$("li:eq(1)").css("background","#09F")   //索引值等于一

           //$("li:gt(1)").css("background","#09F")   //索引值大于一

           //$("li:lt(1)").css("background","#09F")   //索引值小于一

           //$(":header").css("background","#09F")  

//所有标题

           $(":focus").css("background","#09F")  

 //获取焦点的元素的背景颜色

可见性过滤选择器:

执行结果:

 

jQuery选择器