JQuery元素选择器简介
JQuery选择器（$( )）可以用来选择，创建DOM元素。一般来说，过去我们使用JS去控制页面的DOM，比如下面这段JS：<script type="text/javascript"> function test(){var frm = document.form1;var tb = document.getElementById("tb1"); //获取表格对象var trs = tb.getElementsByTagName("tr"); //获取所有的<tr>//等等}</script>
使用WINDOW.document对象的getElementById或getElementsByTagName去获取页面里的DOM元素，而现在，我们可以使用$( )，让一切变的简洁与简单。
$( )使用类似CSS的语法格式，比如：
$("li")选中页面中所有包含li元素的DOM。等同的，$("a")。选中所有连接。
或者我们可以根据DOM的ID来进行选择，比如：
$("#someDiv")，我们责选中了以下DIV：
<div id="someDiv">我是DIV，ID叫someDiv <tt>someDiv</tt></div>
我们还可以使用更强大的选择器，比如：
$(".someDiv")或$("DomName.className")如：$("ul.myList")我们可以选中拥有CSS类someDiv的元素。
比如我们还可以对以下HTML代码：
<div id="someDiv">我是DIV，ID叫someDiv <tt>someDiv</tt></div>
这样选择：$("#someDiv tt")，我们就可以取得 <tt>someDiv</tt> 这个DOM元素。
还可以获取Form表单，如有下HTML：
<form action="" method="put" ><div> <label>Text:</label> <input type="text" id="aTextField" name="someTextField"/></div><button type="submit" id="submitButton">Submit</button></form>
用选择器：$("form #aTextField") 获取 <input type="text" id="aTextField" name="someTextField"/> 。
JQuery选择器非常强大，包括子选择器，容器选择器，特性选择器，而且JQuery选择器本身附带了许多不同的方法，我们可以查询JQuery文档。
JQuery的子选择器，一般来说，有如下HTML：
<ul class="myList"><li><a href="http://jquery.com">jQuery supports</a> <ul> <li><a href="css1">CSS1</a></li> <li><a href="css2">CSS2</a></li> <li><a href="css3">CSS3</a></li> <li>Basic XPath</li> </ul></li><li>jQuery also supports <ul> <li>Custom selectors</li> <li>Form selectors</li> </ul></li></ul>
如果我们要选择 <li><a href="css1">CSS1</a></li> 这个DOM元素，怎么办？我们这样使用JQuery选择器：$(".myList li ul li a")，发现我们会选中所有ul下的li。这个时候我们可以使用子选择器来选定第一个li。如： $(".myList > li > a")，这里使用了符号">"。
而特性选择器：如$(form)会选择所有form中含有method的form。
选择器还可以按位置来选择，比如：$("form div label:first")，它可以帮我们选择第一个label。$("form div label:odd")选中为奇数的label。或者偶数$("form div label:even")的label。最后一个label，$(form div label:last)。
包括我们还可以使用$(input:checked)，来选中radio被选中的元素。$(input:checked)来选中已经被选中的checkbox。
$(#languages tbody tr td:eq(2))这个选择器会选择第3个td。从0开始：
eq(n)，选择第n个DOM元素；gt(n)，选择除n以外的所有元素；lt(n)，选择除n以外之前的所有DOM元素。
包括可以让JQUERY创建一个新页面：
<html> <head> <title></title> <script type="text/javascript" src="scripts/jquery-1.2.1.js"></script> <script type="text/javascript"> $(function(){//add one div$("<div class='foo'>I have foo!</div><div>I don 't</div>").appendTo("#someParentDiv");//add two div$("<div>Hi,I'm 2....OK?</div>").appendTo("#hello"); }); $(function(){$("#j").html("DOM元素DIV的总和为："+$("div").size()); }); </script> </head> <body> <div id="j">Div 1</div> <div id="someParentDiv">Div 2</div> <div id="hello">Div 3</div> <div id="gg">hi...gogo!</div></body> </html>
一般来说，我们选择到了DOM元素的目的是为了取得列如TEXT这些元素的值，在JQUERY中我们可以这样获得：
/*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value");//或者 var textval = $("#text_id").val(); /*获取单选按钮的值*/ var valradio = $("input[@type=radio][@checked]").val(); /*获取复选框的值*/ var checkboxval = $("#checkbox_id").attr("value")； /*获取下拉列表中所有的值*/ var selectval = $('#select_id').val();
如：
<html> <head> <title></title> <script type="text/javascript" src="scripts/jquery-1.2.1.js"></script> <script type="text/javascript"> function x(){var x=$("#aTextField").attr("value"); alert(x);} </script> </head> <body> <div id="j">Div 1</div> <input type="text" id="aTextField" /></body> </html>
例子来自：《JQUERY IN ACTION》
页:
[1]