JQuery 层次选择器

来源：互联网发布：新网互联域名转出编辑：程序博客网时间：2024/06/06 00:05

在DOM元素之间的层次关系主要包含元素的后代元素、子元素、相邻元素和兄弟元素等

HTML的结构:

<body><form class="frm" action="#" method="post">  <div class="f_item">    <label for="name">姓名:</label>    <input name="name" type="text" class="form-text" id="name" />  </div>  <div class="f_item">    <label for="password">密码:</label>    <input name="password" type="password" class="form-text" id="password" />  </div>  <div class="f_item">    <label for="sex">性别:</label>    <input name="sex" type="radio" class="form-radio" id="sex"  checked="checked"/>男    <input name="sex" type="radio" class="form-radio" id="sex" />女  </div>  <fieldset>    <div class="f_item">      <label>地址:</label>      <input name="address" type="text" class="text-form" id="address"/>    </div>  </fieldset>  <div class="f_item">    <input type="submit" value="submit" class="form-submit" id="submit" />    <input type="reset" value="reset" calss="form-submit" id="reset" />  </div></form> <input type="button" value="button" id="button" /></body>

1.（ancestor descendant）在给定的祖先元素下匹配所有的后代元素;比如说子元素还有孙子辈的元素等

$("form input").css("border","1px solid red");

2.子元素选择器（parent > child）

$("form > div").css("border","1px solid red");

Firefox firebug下的HTML变化：

3.相邻元素选择器（prev + next）

$("fieldset + div").css("border","1px solid red");

（prev + next）可以用next()来替换
next([expr])取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

$("fieldset").next("div").css("border","1px solid red");

4.兄弟选择器（prev ~ siblings）选取prev元素之后的所有siblings兄弟元素。

$("div ~ div").css("border","1px solid red");

（prev ~ siblings）可以用nextAll([expr])替换
nextAll([expr])查找当前元素之后所有的同辈元素。

$("div").nextAll().css("border","1px solid red");

0 0