你的位置:首页 > Java教程

[Java教程]jquery选择器(原创)二


jquery选择器,选择接着学:

前面学习了基本选择器中的CSS选择器,现在学层级选择器:

1.子元素选择器

子元素选择器,用于在给定的父元素下,查找这个父元素下面的所有的子元素,语法格式,如下:

$("parent>child")

其中,参数parent是任意有效的选择器;child也是一个选择器,并且它是第一个选择器的子元素,用于筛选子元素。两个参数之间,用“>”分隔:

<!DOCTYPE html><html "http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title>jquery子元素选择器</title>  <script type="text/javascript" src="js/jquery-1.11.0.js"></script>  <script type="text/javascript">    $(function () {      $("form>input");    });  </script></head><body>  <form>     <label>标题</label>    <input name="title" type="text"/>    <div>      <input name="content" type="text"/>    </div>  </form></body></html>

结果是;<input name="title" type="text"/>

2,后代元素选择器

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

$("ancestor descendant")

其中,参数ancestor是任意有效的选择器,descendant也是一个选择器,用于筛选后代元素,后代元素可能是ancestor元素的子元素,孙元素,重孙元素等,两个参数之间用空格分隔。

<!DOCTYPE html><html "http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title>后代元素选择器</title>  <script type="text/javascript" src="js/jquery-1.11.0.js"></script>  <script type="text/javascript">    $(document).ready(function () {      $("form input");    });  </script></head><body>  <form>     <label>label</label>    <input name="news" type="text" value="text1"/>    <label>label3</label>    <div>      <label>label2</label>      <input type="text" name="news2" value="text1"/>    </div>  </form></body></html>

结果是:

3,紧邻同辈元素选择器

紧邻同辈元素选择器,用于匹配所有紧接在Prev元素后的next元素,语法格式:

$("prev+next")

其中,prev(selector)表示任意有效的选器器;next(selector)表示一个有效选择器并且紧接着第一个选择器,两者用“+”分隔.

<!DOCTYPE html><html "http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title>紧邻同辈元素选择器</title>  <script type="text/javascript" src="js/jquery-1.11.0.js"></script>  <script type="text/javascript">    $(function () {      $("div+span")    });  </script></head><body>  <form>    <div>div1</div>    <span>span1</span>    <div>      <span>span2</span>    </div>    <span>span3</span>  </form></body></html>

结果是:

4.相邻同辈元素选择器

相邻同辈元素选择器,用于选择某元素后面的所有的同辈元素,语法格式:

$("prev~siblings")

其中,参数prev表示任意有效的选择器,siblings也是一个选择器,用于筛选prev后面的所有同辈元素,两者之间用破浪线(~)分隔,

<!DOCTYPE html><html "http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title>相邻同辈元素选择器</title>  <script type="text/javascript" src="js/jquery-1.11.0.js"></script>    <script type="text/javascript">    $(document).ready(function () {      $("div~input").css("border", "2px solid blue");      $("input~p").css("color", "red");    });  </script>  <style type="text/css">    p     {      color:blue;      font-size:14px;    }    div, input     {      border:1px solid red; width:200px;height:100px;    }  </style></head><body>  <div></div>  <input type="text" value=""/>  <input type="text" value=""/>  <p>段落标记</p></body></html>

变化前:

 

变化后:

 

好了,时间不早了,今天就学到这~~~。