jQuery选择元素入门

何喜

热爱前端程序猿

选择元素

使用 $()函数

我们通过jQuery的各种选择符和方法取得的结果集合会被包装在 jQuery对象 中。
为了创建jQuery对象，就要是使用$()函数。这个函数接受CSS选择符作为参数，返回包含页面中对应元素的jQuery对象。

CSS选择符

我们用一个实例解说

<ul id="selected-plays">
    <li>Comedies
        <li><a href="/asyoulikeit/">As You Like It</a></li>
        <li>All's Well That Ends Well</li>
        <li>A Midsummer Night's Dream</li>
        <li>Twelfth Night</li>
    <li>Tragedies
        <li><a href="hamlet.pdf">Hamlet</a></li>
        <li>Macbeth</li>
        <li>Romeo and Juliet</li>

我们想为最顶层的项（Comedies、Tragedies）水平排列，也只有水平项水平排列，其它项的添加背景颜色的样式。
我们可以设置两个类

.horizontal {
  float: left;
  list-style: none;
  margin: 10px;
.sub-level {
  background: #ccc;

要实现上面的需求，我们可以这样写JS：

$(document).ready(function(){
    $('#selected-plays > li').addClass('horizontal'); //为顶层添加样式
    $('#selected-plays li:not(.horizontal)').addClass('sub-level'); //为其它添加样式

最后得到的效果图是

属性选择符

假如我们要选择带有alt属性的所有图像元素，可使用以下代码：

$('img[alt]')

当然我们也可以配合正则一起使用。比如我们想给带有herf属性，即以http开头且任意位置包含weclassroom的所以链接
添加一个henrylink类，可使用如下代码：

$('a[href^="http"][href*="henry"]').addClass('henrylink');