jQuery九类选择器

终极目的:通过选择器，能定位web页面中的任何标签

1.基本选择器

<div id="div1ID">div1</div><div id="div2ID">div2</div><span class="myClass">span</span><p>p</p><script type="text/javascript">//1)查找ID为"div1ID"的元素$("#div1ID")//2)查找标签为DIV的元素$("div")//3)查找所有样式是"myClass"的元素$(".myClass")//4)查找所有标签为DIV,SPAN,P元素$("div,span,p")//5)查找所有ID为div1ID,CLASS为myClass,标签为P元素$("#div1ID,.myClass,p")

2.层次选择器

<form><input type="text" value="a"/><table><tr><td><input type="checkbox" value="b"/></td></tr></table></form><label></label><input type="radio" value="c"/><input type="radio" value="d"/><input type="radio" value="e"/><script type="text/javascript">//1)匹配表单form下所有的input元素$("form input")//在给定的祖先元素下匹配所有的后代元素。在这里form是祖先，input是后代。 //2)匹配表单form下所有的子级input元素 $("form>input") //在给定的父元素下匹配所有的子元素  //3)匹配跟在标签label后面的第一个input元素 $("label + input")  //4)匹配所有与标签label后面的input元素个数$("label ~ input")</script>

3.增强基本选择器

<ul>    <li>list item 1</li>    <li>list item 2</li>    <li>list item 3</li>    <li>list item 4</li>    <li>list item 5</li></ul><input type="checkbox" checked/><input type="checkbox" /><input type="checkbox"/><table border="1">  <tr><td>line1</td></tr>  <tr><td>line2</td></tr>  <tr><td>line3</td></tr></table><h1>h1</h1><h2>h2</h2> <h3>h3</h3><p>p</p><script type="text/javascript">//1)匹配所有li标签中第一个li标签$('li').first() //2)匹配所有li标签中最后一个li标签 $('li').last()  //3)匹配所有未选中的input元素 $("input:not(:checked)")  //4)匹配表格的奇数行 $("tr:even")  //5)匹配表格的偶数行 $("tr:odd")  //6)匹配表格中第二行，从索引号0开始 $("tr:eq(1)")  //7)匹配所有大于给定索引值的元素 $("tr:gt(0)")  //8)匹配所有小于给定索引值的元素 $("tr:lt(2)")  //9)匹配如 h1, h2, h3之类的标题元素 $(":header")</script>

4.内容选择器

<style type="text/css">   .myClass{   font-size:44px;   color:blue   }</style><div><p>John Resig</p></div><div><p>George Martin</p></div><div>Malcom John Sinclair</div><div>J. Ohn</div><p></p><p></p><div></div><script type="text/javascript">//1)匹配包含给定文本的元素$("div:contains('John')") //2)匹配所有不包含子元素或者文本的空元素 $("p:empty")  //3)给所有包含p元素的div元素添加一个myClass样式 $("div:has(p)").addClass("myClass");  //4)匹配所有含有子元素或者文本的p元素个数(就是匹配有子元素或者文本的p元素),即p为父元素 $("p:parent")</script>

5.可见性选择器

<table border="1" align="center"><tr style="display:none"><td>Value 1</td></tr><tr><td>Value 2</td></tr><tr><td>Value 3</td></tr></table><script type="text/javascript">//1)匹配隐藏的tr元素$("tr:hidden")//2)匹配所有可见的tr元素$("tr:visible")</script>

6.属性选择器

<div><p>Hello!</p></div><div id="test2"></div><input type="checkbox" name="newsletter" value="Hot Fuzz" /><input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" /><input type="checkbox" name="newsaccept" value="Evil Plans" /><script type="text/javascript">//1)匹配所有含有 id 属性的 div 元素$("div[id]") //2)匹配所有name属性是newsletter的input元素，并将其选中 $("input[name='newsletter']")   //3)匹配所有name属性不是newsletter的input元素  $("input[name!='newsletter']")    //4)匹配所有name属性以'news'开始的input元素  $("input[name^='news']")    //5)匹配所有name属性以'letter'结尾的input元素  $("input[name$='letter']")    //6)匹配所有name属性包含'news'的input元素  $("input[name*='man']")    //7)匹配所有含有id属性，并且它的name属性是以"letter"结尾的input元素  $("input[id][name$='man']")</script>

7.子元素选择器

<ul><li>John</li><li>Karl</li><li>Brandon</li></ul><ul><li>Glen</li><li>Tane</li><li>Ralph</li></ul><ul><li>Jack</li></ul><script type="text/javascript">//1)匹配和迭代 每个ul中第1个li元素,索引从1开始$("ul li:first-child")//2)匹配和迭代 每个ul中最后1个li元素中的内容,索引从1开始$("ul li:last-child")//3)在ul中查找是唯一子元素的li元素的内容$("ul li:only-child")//4)迭代每个ul中第2个li元素中的内容,索引从1开始$("ul li:nth-child(2)")//参数为2代表迭代第2个</script>

8.表单选择器

<form><input type="button" value="Input Button"/><br/><input type="checkbox" /><br/><input type="file" /><br/><input type="hidden" /><br/><input type="image" /><br/><input type="password" /><br/><input type="radio" /><br/><input type="reset" /><br/><input type="submit" /><br/><input type="text" /><br/><select><option>Option</option></select><br/><textarea></textarea><br/><button>Button</button><br/></form><script type="text/javascript">//1)匹配所有的input元素$(":input")  //2)匹配所有文本框  $(":text")  //3)匹配所有密码框  $(":password")  //4)匹配所有单选按钮  $(":radio")  //5)匹配所有复选框  $(":radio")  //6)匹配所有提交按钮  $(":submit")  //7)匹配所有图像域  $(":image")  //8)匹配所有重置按钮  $(":reset")  //9)匹配所有普通按钮  $(":button") //10)匹配所有文件域 $(":file") //11)匹配所有input元素为隐藏域 $("tr:hidden")</script>

9.表达对象属性选择器

<form><input type="text" name="email" disabled="disabled" /><input type="text" name="password" disabled="disabled" /><input type="text" name="id" /><input type="checkbox" name="newsletter" checked="checked" value="Daily" /><input type="checkbox" name="newsletter" value="Weekly" /><input type="checkbox" name="newsletter" checked="checked" value="Monthly" /><select><option value="1">广东</option><option value="2" selected="selected">湖南</option><option value="3">湖北</option></select></form><script type="text/javascript">//1)匹配所有可用的input元素$("input:enabled") //2)匹配所有不可用的input元素 $("input:disabled") //3)匹配所有选中的复选框元素 $("input:checked") //4)匹配所有选中的选项元素 $("select option:selected")</script>