jQuery选择器有哪些不同之处？

Question

以下是我之前见过的选择器列表：

1. $('.menu')
2. $('menu')
3. $('#menu')

请问在什么情况下会使用这些选择器？

- FLOOD racer

---

看看这个选择器教程，有时候最好的方法是看代码实际操作。http://www.youtube.com/watch?v=7eQI90xYez0 http://tutorialvid.com/viewVideo.php?video_id=MTM4Mw==&title=Introduction_to_jQuery_JavaScript_Framework - Hishalv

阅读手册去哪了？ - Gleno

Answer 1

1. $('.menu') ... 选择具有 class='menu' 属性的元素

2. $('menu') ..... 选择 <menu /> 元素

3. $('#menu') ... 选择具有 id='menu' 属性的元素

- Terry

Answer 2

1. 首先找到 <div class="menu"></div>

2. 其次找到 <menu></menu>

3. 第三个是 <div id="menu"></div>

请注意，这些规则适用于基于CSS的内容。

- Robin Castlin

---

为了更加清晰，这些规则并不基于CSS。.menu是一个CSS类，但是选择器是通过Javascript解析DOM的。另外两个与CSS无关。 - Terry

Answer 3

$('.menu')：所有带有class为menu的元素

$('menu')：所有menu元素

$('#menu')：带有id为menu的元素

- megakorre

Answer 4

$('.menu') -> <div class="menu"></div> or any other tag with class menu
$('menu')  -> <menu></menu>
$('#menu') -> <div id="menu"></div> or any other tag with id menu

- bjornd

Answer 5

jQuery选择器语法与css相同。因此，".menu"将选择所有class为menu的对象，"#menu"将选择id为menu的对象（应该只有一个！）。"menu"会尝试选择类型为menu的元素。

例如：

<div class="foo" id="d1">Div 1</div>
<div class="foo" id="d2">Div 2</div>

<span class="foo" id="s1">Span 1</span>
<span class="foo" id="s2">Span 2</span>

$(".foo").css("background", "red"); //sets the background of all 4 elements to red
$("div").css("background", "blue"); //sets the background of the two divs to blue
$("#s1").css("background", "green"); //sets the background of span 1 to green

- lynks

Answer 6

类选择器（“.class”）
选择具有给定类的所有元素。

元素选择器（“element”）
选择所有具有给定标签名称的元素。

ID选择器（“#id”）
选择一个具有给定id属性的单个元素。

参考资料： http://api.jquery.com/category/selectors/basic-css-selectors/

- Ryre

Answer 7

摘自http://forum.codecall.net/javascript-tutorials/14363-jquery-selectors.html

#id: -> This will match any element with the given ID.

element -> This will match any element supplied.

.class  -> This will match any element with the given class.

- JW8