jQuery之选择器

对象之间的转换

DOM对象：直接使用JavaScript获取的节点对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

DOM对象转换成jQuery对象

• $(DOM对象)

jQuery对象转换成DOM对象

• jQuery对象[index]
• jQuery对象.get(index)

基本选择器

• 标签选择器 $(“a”)
• ID选择器 $(“#id”) $(“p#id”)
• 类选择器 $(“.class”) $(“h2.class”)
• 通配选择器 $("*")

其他选择器

• 并集选择器 $ (“elem1,elem2,elem3”)
• 后代选择器 $(ul li)
• 父子选择器 $(ul>li)
• 后面第一个兄弟元素 prev + next
• 后面所有的兄弟元素 prev ~ next

举例

//只是第一行变颜色 
$("ul li:first").css("background-color","red"); 
$("ul li").first().css("background-color","red"); 

//最后一行变颜色 
$("ul li:last").css("background-color","green"); 
$("ul li").last().css("background-color","green"); 

//获得索引是奇数对象  索引从0开始 
$("ul li:odd").css("background-color","green"); 

//获得索引是偶数对象  索引从0开始 
$("ul li:even").css("background-color","green"); 

//获得索引下标位3的对象 
$("ul li:eq(3)").css("background-color","green"); 

//获得大于指定索引下标的对象 
$("ul li:gt(3)").css("background-color","green"); 

//获得小于指定索引下标的对象 
$("ul li:lt(3)").css("background-color","green"); 

子选择器

$("ul li:nth-child(1)").css("background-color","green"); 

$("ul li:first-child").css("background-color","darkred"); 

$("ul li:last-child").css("background-color","darkred");   

$("ul li:only-child").css("background-color","#00A40C");

属性模糊定位选择

//type属性等于text 
$("input[type=text]").css("background-color","#00A40C"); 

// name属性用z开头的 
$("input[name^=z]").css("background-color","#FF0000"); 

// name属性同d结尾的 
$("input[name$=d]").css("background-color","green"); 

//name属性中包含p的元素 
$("input[name*=p]").css("background-color","green"); 

//复合属性选择器，需要同时满足多个条件时使用 
$("input[type=text][name^=z]").css("background-color","deeppink");

表单属性选择器

//获得form表单中的所有的表单项 
var inp= $(":input")  

//获得标签名称是input 的所有的标签对象 
var  inp2=$("input"); 
alert(inp.length+"----"+inp2.length); 
$("input[type=text]") 

//input标签 type属性等于text所对应的对象
$(":text").css("background-color","green"); 
$(":password").css("background-color","red"); 

//获得input标签中含有disabled属性的对象 
var but=  $("input:disabled");  
alert(but.val()); 

//获得含有checked属性的对象 
var  ch =$("input:checked");

来源：CSDN

作者：Python'sGod

链接：https://blog.csdn.net/weixin_44733660/article/details/103865112