Jquery选择器(二)--Hierarchy

层级选择器


[1]  ancestor descendant      Returns: Array<Element(s)>
      说明： 返回"descendant"匹配的且为"ancestor "匹配元素的所有子孙元素。      
      

$("form input").css("border", "2px dotted blue");

$("form input").css("border", "2px dotted blue");

       ancestor： Selector--一个有效的选择器。
       descendant： Selector--一个有效的选择器且匹配的元素为第一个选择器匹配元素的子孙元素。


[2]  parent > child       Returns: Array<Element(s)>
      说明： 返回"child"匹配的且为"parent"匹配元素的所有子元素。      
      

$("#main > *").css("border", "3px double red");

$("#main > *").css("border", "3px double red");

       parent： Selector--一个有效的选择器。
       child： Selector--一个有效的选择器且匹配的元素为第一个选择器匹配元素的子元素。

[3]  prev + next       Returns: Array<Element(s)>
      说明： 返回"next"匹配的且紧跟"prev"匹配元素之后的一个元素的元素集合。      
      

$("label + input").css("color", "blue").val("Labeled!")

$("label + input").css("color", "blue").val("Labeled!")

       prev： Selector--一个有效的选择器。
       next： Selector--一个有效的选择器且匹配的元素为第一个选择器匹配元素的下一个紧邻元素。

[4]  prev ~ siblings      Returns: Array<Element(s)>
      说明： 返回紧随"prev"匹配元素之后的所有与"siblings"匹配的兄弟元素。
      

$("#prev ~ div").css("border", "3px groove blue");

$("#prev ~ div").css("border", "3px groove blue");

       prev： Selector--一个有效的选择器。
       siblings： Selector--一个有效的选择器且匹配的元素为第一个选择器匹配元素的兄弟元素。