Jquery基础教程之-选择元素

jQuery利用了CSS选择符的能力，让我们能够在DOM中快捷而轻松地获取元素或元素集合。
本章将介绍如下内容：
 网页中元素的结构；
 如何通过CSS选择符在页面中查找元素；
 扩展jQuery标准的CSS选择符；
 让选择页面元素更灵活的DOM遍历方法

2．1．网页元素DOM结构

<html>
    <head>
        <title>the title</title>
    </head>
    <body>
        <div>
            <p>This is a paragraph.</p>
            <p>This is another paragraph.</p>
            <p>This is yet another paragraph.</p>
        </div>
    </body>
</html>

DOM树结构如下：
这里写图片描述

2．2使用 $() 函数
我们通过jQuery的各种选择符和方法取得的结果集合会被包装在jQuery对象中。通过 jQuery对象实际地操作这些元素会非常简单。可以轻松地为jQuery对象绑定事件、添加漂亮的效果，也可以将多重修改或效果通过jQuery对象连缀到一起。
三种基本选择符：标签名、ID和类。这些选择符可以单独使用，也可以与其他选择符组合使用:
这里写图片描述

2.3 CSS选择符
jQuery支持CSS规范1到规范3中的几乎所有选择符
为了学习在jQuery中如何使用CSS选择符，我们选择了一个很多网站中都会有的通常用于导航的结构——嵌套的无序列表

<body>
  <div id="container">
      <h2>Selected Shakespeare Plays</h2>
      <ul id="selected-plays" class="clear-after">
        <li>Comedies
          <ul>
            <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>
          </ul>
        </li>
        <li>Tragedies
          <ul>
            <li><a href="hamlet.pdf">Hamlet</a></li>
            <li>Macbeth</li>
            <li>Romeo and Juliet</li>
          </ul>
        </li>
        <li>Histories
          <ul>
            <li>Henry IV (<a href="mailto:[email protected]">email</a>)
              <ul>
                <li>Part I</li>
                <li>Part II</li>
              </ul>
            </li>
            <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
            <li>Richard II</li>
          </ul>
        </li>
      </ul>

      <h2>Shakespeare's Plays</h2>
      <table>
        <tr>
          <td>As You Like It</td>
          <td>Comedy</td>
          <td></td>
        </tr>
        <tr>
          <td>All's Well that Ends Well</td>
          <td>Comedy</td>
          <td>1601</td>
        </tr>
        <tr>
          <td>Hamlet</td>
          <td>Tragedy</td>
          <td>1604</td>
        </tr>
        <tr>
          <td>Macbeth</td>
          <td>Tragedy</td>
          <td>1606</td>
        </tr>
        <tr>
          <td>Romeo and Juliet</td>
          <td>Tragedy</td>
          <td>1595</td>
        </tr>
        <tr>
          <td>Henry IV, Part I</td>
          <td>History</td>
          <td>1596</td>
        </tr>
        <tr>
          <td>Henry V</td>
          <td>History</td>
          <td>1599</td>
        </tr>
      </table>
      <h2>Shakespeare's Sonnets</h2>
      <table>
        <tr>
          <td>The Fair Youth</td>
          <td>1–126</td>
        </tr>
        <tr>
          <td>The Dark Lady</td>
          <td>127–152</td>
        </tr>
        <tr>
          <td>The Rival Poet</td>
          <td>78–86</td>
        </tr>
      </table>
    </div>
</body>

我们注意到，其中第一个

标签则全都没有与之关
联的类。在没有应用任何样式的情况下，这个列表的外观如图2-2所示。

图2-2中的嵌套列表按照我们期望的方式显示——一组带符号的列表项垂直排列，并且每个
列表都按照各自的级别进行了缩进

基于列表项的级别添加样式：
假设我们想让顶级的项（Comedies、Tragedies和Histories），而且只有顶级的项水平排列，那
么可以先在样式表中定义一个 horizontal 类：

.horizontal {
    float: left;
    list-style: none;
    margin: 10px;
}

这里，我们没有直接在HTML中添加 horizontal 类，而只是将它动态地添加给位于顶级的
列表项Comedies、Tragedies和Histories，以便示范jQuery中选择符的用法，如代码清单2-1所示
代码清单：2-1

$(document).ready(function() {
    $('#selected-plays > li').addClass('horizontal');
});

第2行代码使用子元素组合符（ > ）将 horizontal 类只添加到位于顶级的项中。实际上，位于 $() 函数中的选择符的含义是，查找ID为 selected-plays 的元素（ #selected-plays ）的子元素（ > ）中所有的列表项（ li ）
效果图如下：
这里写图片描述

要为其他项（非顶级的项）添加样式，有很多种方式。因为已经为顶级项添加了 horizontal
类，所以取得全部非顶级项的一种方式，就是使用否定式伪类选择符来识别没有 horizontal 类的所有列表项。注意代码清单2-2添加的第3行代码。
代码清单2-2

$(document).ready(function() {
    $('#selected-plays > li').addClass('horizontal');
    $('#selected-plays li:not(.horizontal)').addClass('sub-level');
});

这一次取得的每个列表项（

）：
 是ID为 selected-plays 的元素（ #selected-plays ）的后代元素。
 没有 horizontal 类（ :not(.horizontal) ）。
在为这些列表项添加了 sub-level 类之后，它们的背景颜色变为在样式表规则中定义的浅
灰色。

.sub-level {
 background: #ccc;
}

效果图如下：
这里写图片描述

Jquery基础教程之-选择元素

猜你喜欢