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

2019独角兽企业重金招聘Python工程师标准>>>

注：$("#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

转载于:https://my.oschina.net/u/2255569/blog/341785