jQuery层级选择器用法分析_jquery

在HTML文档中，每个元素总是处于DOM节点树上的某个位置，文档层次结构中元素之间总是存在于某种层级关系，如父级和子级的关系等。

1. 子元素选择器

用于查找在给定的父元素下查找 这个父元素下的所有子元素，语法格式：

复制代码 代码如下:

$("parent->chilid");

2. 后代元素选择器

用于在给定的祖先元素下匹配所有的后代元素，语法格式:

复制代码 代码如下:

$("ancestor descendant");

3. 紧邻同辈元素选择器

用于匹配所有紧邻在prev元素后的next元素，语法格式:

复制代码 代码如下:

$("prev + next")

4. 相邻同辈元素选择器

用于选择某元素后面的所有同辈元素，语法格式如下：

复制代码 代码如下:

$("prev~siblings")

综合实例：

复制代码 代码如下:

 
 
 
 
 
 
 
 
 
  

 
       form元素的后代input元素为:input1, input2, input3 
        
      

 
         

maindiv的子元素:id为div1

 
         

maindiv的子元素:id为div2

 
      

  
        
      
 
       maindiv的所有子元素为:div1, div2 
  

 
 

效果图如下图所示：

希望本文所述对大家的jQuery程序设计有所帮助。