选择器

传统的Javascript是通过document.getElementById()函数来选择页面元素，这需要被选择的元素具有定义好的ID。相比之下，jQuery对页面元素的选择就要灵活多，它不但支持通过ID选择，而且还支持Class Name、元素及其位置顺序、以及这些方法的组合。

如果你对CSS熟悉，你一定知道什么是ID和Class。ID和Class都是对页面元素的标识，不同的是ID是对某个元素的标识（不同的元素不可以具有相同的ID），而Class是对一类元素的标识（不同元素可以具有相同的Class）。 jQuery用到的ID和Class就是来自CSS。

1. 通过“ID”来选择：

<p id="myID">这一段落的ID是“myID"</p>

//用以下jQuery来选择这一段落，然后加上特效（向右移动10px）

$("#myID").animate({ marginLeft: 10}, 'fast');

2. 通过“Class”来选择：

<p class="myClass">这一段落的Class是”myClass“</p>

//用以下的jQuery来选择这一段落，然后附加上一个词

$(".myClass").append("<b>Hello</b>"

3. 通过“元素及其位置顺序”来选择：

<ul>

  <li>第一列</li>

  <li>第二列</li>

  <li>第三列</li>

</ul>

//使用下列jQuery对第三列进行选择，然后加上特效

$('li:eq(2)').animate({ marginLeft: 10}, 'fast');

4. 使用“上述方法的组合”来多项选择：

<p id="myID">paragraph with id</p>

<p class="myClass">paragraph with class</p>

<ul>

  <li>第一列</li>

  <li>第二列</li>

  <li>第三列</li>

</ul>

//使用以下jQuery可以把上面的HTML元素都选中

$('#myID, .myClass, li:eq(2)').$('li').append("-被选中");

注意：

• 选择页面元素的格式是：$('selector') , 这里selector是你要选择的元素，它可以是以上4种情况。
• 元素选择后，通常要执行一些操作，以上例子里使用了animate和append，更多更深入的探讨将在以后的文章里详述。
• jQuery的选择器(selector)功能强大，所包含的内容比较多，这里只是对最基本的功能进行介绍。我会在以后的文章里对它进行更加详细的介绍。
• Update:2/15/2009: $('selector')是jQuery('selector')的缩写，如果你的Javascript代码包含有对$的其他定义，你必须使用jQuery来代替$

转载于:https://www.cnblogs.com/Look_Sun/archive/2010/02/11/1667509.html