jQuery选择器

Posted 2020-09-27 波涛

选择器是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")  

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

可见性过滤选择器：

执行结果：