首页 > 代码库 > jQuery选择器——基础选择器、层次选择器

jQuery选择器——基础选择器、层次选择器

注:$("#tt")获取的永远是对象,即时网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时,不能使用以下代码

if($("#tt")){}
而应该根据获取到元素的长度来判断,代码如下:
if($("#tt").length>0){}
或者转换DOM对象来判断,代码如下:
if($("tt")[0]){}


基本选择器

#id   id选择器    $("#test")选取id为test的元素

.class    类选择器  $(".test")选取class为test的元素

element   元素选择器  $("p")选取所有<p>元素

*    匹配所有元素  $("*")选取所有元素

selector1,slector2,....,selectorN   匹配到每个元素合并后一起返回  $("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素

eg:

$("#one").css("background","#000000");//jQuery
document.getElementById("one").style.color = "red";//DOM

 

层次选择器

$("div span")  选取div里所有的span元素

$("div>span")  选取div下的span子元素

$(".one+div")  选取class为one的下一个div同辈元素

$("#two~div") 选取id为two的元素后面的所有div同辈元素

注:后面两个选择器可以用更简单的方式代替

$(".one").next("div");

$("#two").nextAll("div");

上边两个方法都是选取后边的div元素

$("#two").siblings("div");不分前后,获取全部同级div












jQuery选择器——基础选择器、层次选择器