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" onsubmit="return false;">
<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[method])会选择所有form中含有method的form。
选择器还可以按位置来选择，比如：$("form div label:first")，它可以帮我们选择第一个label。$("form div label:odd")选中为奇数的label。或者偶数$("form div label:even")的label。最后一个label，$(form div label:last)。
包括我们还可以使用$(input[type=radio]:checked)，来选中radio被选中的元素。$(input[type=checkbox]: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" onclick="x()"/>
</body>
</html>
例子来自：《JQUERY IN ACTION》
分享到：
相关推荐
`colorpicker.png`是`jQuery ColorPicker`的图标资源文件，它包含了颜色选择器的UI元素，如滑块、色板等。由于该插件不需要额外的CSS文件，所有样式都内置于JavaScript中，这使得它更容易集成到现有的项目中，而不会...
3. **元素选择器**: 直接使用元素名称来选取所有该类型的元素，例如`$("div")`将选取所有`<div>`元素。 4. **标签选择器与类选择器结合**: 如`$("div.myClass")`，选取所有同时是`<div>`并且class为"myClass"的元素...
本项目“jquery周历选择器”利用jQuery的灵活性和易用性，构建了一个适用于混合应用程序（Hybrid App）的周历选择器组件。 1. **周历选择器设计**： - 周历选择器通常用于日程管理或时间规划应用，显示一周的日期...
3. **元素选择器** 直接使用元素名称来选取所有匹配的元素。例如，`$("p")`会选择所有的段落元素。 4. **后代选择器 ( )** 使用空格来选取某个元素的后代元素。例如，`$("div p")`会选择所有在`div`元素内的`p`...
在jQuery中，选择器分为多种类型，包括基础选择器、类别选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器和通用选择器等。 1. **基础选择器**：主要包括`$()`，用于选取一个或多个DOM元素...
jQuery提供了多种内置的选择器，如ID选择器（#id）、类选择器（.class）、元素选择器（element）等，它们用于定位HTML文档中的特定元素。双向选择器则在此基础上增加了更复杂的逻辑，它可以同时选取两个或多个相关的...
选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景，熟悉并...
3. **初始化插件**：使用jQuery选择器选择该元素，然后调用日期选择器插件的初始化方法，例如`$(selector).dateInput(options);`，其中`options`是可选的配置对象。 4. **配置选项**：根据需求设置日期选择器的配置...
本文将深入探讨“jQuery动态选择器”这一主题，结合标签中的“源码”和“工具”概念，我们将会看到jQuery如何通过其丰富的选择器功能来高效地选取和操作网页元素。 动态选择器是jQuery的核心特性之一，它允许开发者...
一、jQuery颜色选择器简介 jQuery颜色选择器是一个方便的工具，它允许用户在网页上以图形化的方式选取颜色。这些选择器通常以调色板的形式呈现，用户可以通过点击或滑动来挑选所需颜色。这种交互性提高了用户的参与...
其中，样式选择器是jQuery的核心功能之一，它允许我们根据CSS样式规则来选取DOM元素，极大地提高了我们的工作效率。本文将深入探讨一个仅30行左右的jQuery样式选择器插件源码，揭示其背后的巧妙设计和实现原理。 ...
1. jQuery选择器和DOM操作：如何使用jQuery选择特定的HTML元素，如`.addClass()`, `.removeClass()`, `.val()`等方法来改变元素的样式和内容。 2. 事件处理：掌握`.on()`, `.click()`, `.change()`等事件监听器的...
- `$()`：这是jQuery的基本选择器，用于选取一个或多个元素。例如：`$("div")`会选择所有`<div>`元素。 - `#id`：通过ID选择元素，如`$("#myID")`。 - `.class`：通过类名选择元素，如`$(".myClass")`。 - `tag`...
1. **直系子元素选择器**：`parent > child`，仅选取指定父元素的直接子元素，例如`$('div > span')`将选取所有直接位于`<div>`标签内的`<span>`元素，排除嵌套层级更深的匹配项。 2. **相邻兄弟选择器**：`prev + ...
4. **初始化插件**：在页面加载完成后（通常在`$(document).ready()`函数中），使用jQuery选择器找到元素并调用颜色选择器插件的初始化方法，设置相关配置，如预设颜色、回调函数等。 5. **事件监听**：你可以监听...
然后，你需要通过jQuery的选择器找到需要添加日期选择器的元素，并调用插件的初始化方法。通常，初始化方法的名称会遵循jQuery插件的命名规范，如`$.fn.datepicker`： ```javascript $(document).ready(function() ...
1. **基本选择器**：包括`$()`函数内的ID选择器（如`$("#myID")`）、类选择器（`.myClass`）、元素选择器（`$("div")`）和标签选择器（`$("p")`）。这些选择器基于元素的ID、类名、标签名来定位元素。 2. **组合...
基本选择器包括ID选择器（#id）、类选择器（.class）和元素选择器（element）。例如： - `$("#myID")` 选择ID为"myID"的元素。 - `$(".myClass")` 选择所有class包含"myClass"的元素。 - `$("div")` 选择所有`<div>...
- **元素选择器**：通过元素的标签名来选取，直接写标签名。例如`$('p')`选取所有的`<p>`元素。 - **通配符选择器**：用`*`来选取所有元素。例如`$('*')`选取页面上的所有元素。 组合选择器可以同时选取多个元素，...