jQuery 选择器

<%@  page  language = "java"  import = "java.util.*"  pageEncoding = "UTF-8" %>

<! DOCTYPE  HTML  PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN">

< html >

< head >

< title > 选择器 </ title >

< meta  http-equiv = "pragma"  content = "no-cache" >

< meta  http-equiv = "cache-control"  content = "no-cache" >

< meta  http-equiv = "expires"  content = "0" >

< script  type = "text/javascript"  src = "jquery-1.11.1.js" ></ script >

< script  type = "text/javascript" >

          $(document).ready( function (){

                    //获取第一个元素

           //       var div = $("div:first");

                   

                    //去除所有与给定选择器匹配的元素

                    //var div = $("input:not(:checked)");

                    //var div =$("input:not(:checked)")

                   

                    //:even :匹配所有索引值为偶数的元素，从 0 开始计数

                    //var div = $("div:even");

                   

                    //:odd :匹配所有索引值为奇数的元素，从 0 开始计数

                    //var div = $("div:odd");

                   

                    //:eq(index):匹配一个给定索引值的元素

                    //var div = $("div:eq(1)");  //得到：div2的内容

                   

                    //:gt(index):匹配所有大于给定索引值的元素

                    //var div = $("div:gt(1)");  //输出：div3,div4....

                   

                    //:lang:选择指定语言的所有元素。

                    //:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">

                    //:last() :获取最后个元素

                    //var div =$("div:last");

                   

                    //:lt(index):匹配所有小于给定索引值的元素

                    //var div=$("div:lt(3)");  //输出div1,div2,div3

                   

                   

                   

                    //--------内容选择器---------

                    //:contains(text):匹配包含给定文本的元素

                    //var div = $("div:contains('3')");  //输出div3

                   

                    //:empty:匹配所有不包含子元素或者文本的空元素

                    //var div = $("div:empty");   //id为div6的选中

                   

                    //:has(selector) ：匹配含有选择器所匹配的元素的元素

                    //var div = $("div:has(p)");  //输出该标签的所有内容：div4内容     <p>Hello</p>

                   

                    //:parent 匹配含有子元素或者文本的元素

                    //var div = $("div:parent");  

                   

                   

                   

                    //----------可见性--------------

                    //:hidden : 匹配所有不可见元素，或者type为hidden的元素

                   var  div = $( "input:hidden" );   //选中 name为apple的隐藏标签

                   

                    //:visible ：匹配所有可见元素

                    //var div =$ ("div:visible");

                   

                   

                   

                    //-------------属性----------------------

                    //[attribute] ：匹配包含给定属性的元素

                    //var div = $("div[id]");   //输出所有包含id的标签内容

                   

                    //[attribute=value] ： 匹配给定的属性是某个特定值的元素

                    //var div = $("div[id=div3]");  //输出：div3内容

                   

                   

                    //[attribute!=value] ： 匹配所有不含指定的属性

                    //var div = $("div[id!=div3]");  //输出：不含div3的内容

                   

                    //[attribute^=value] ： 匹配给定的属性是以某些值开始的元素

                   var  div = $( "div[class^=b]" );   //输出:div3和div4的内容

                   

                   

                    //[attribute$=value] ： 匹配给定的属性是以某些值结束的元素

                   var  div = $( "div[class$=b]" );   //输出:div3和div4的内容

                   

                    //alert(div.val());

                    //循环遍历

                   div.each (  function (){

                             alert($( this ).html());

                   });

          });

</ script >

</ head >

< body >

           < input  type = "hidden" name = "apple"  />

           < input  name = "flower"  checked = "checked"  />

           < input  type = "checkbox"  checked = "checked"  name = "run"  value = "跑步" /> 跑步

           < input  type = "checkbox"  name = "swimming"    value = "游泳" /> 游泳

                    < div  id = "div1" > div1内容 </ div >

                     < div  id = "div2"  class = "aaa" > div2内容 </ div >

                    < div  id = "div3"  class = "bbb" > div3内容 </ div >

                    < div  id = "div4"  class = "bbb" > div4内容

                              < p > Hello </ p >

                              </ div >

                    < div  id = "div5" >

                              < div  id = "div6" ></ div >

                              < div  id = "div7" > div7内容 </ div >

                             

                    </ div >

</ body >

</ html >