JQuery 中简单的几个类选择器使用方法

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestClassSelector.aspx.cs" Inherits="WebApplication1.TestClassSelector" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.0.min.js"></script>
    <style type="text/css">
        .first_div {
            background-color:red;
        }
        .second_div {
            background-color:green;
        }
        .first_span {
            500px;
            height:100px;
        }
        .eric_sun_class {
            font-family:Arial;
            font-size:18px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="first_div">
                This is the first div
            </div>
            <div class="second_div">
                This is the second div
            </div>
            <div class="first_div">
                <span class="first_span">
                    This is the first span
                </span>
            </div>
            <span class="first_span eric_sun_class">
                This is the first span + eric sun class.
            </span>
            <br />
            <span class="eric_sun_class">
                This is the eric sun class.
            </span>
            <br />
            <input type="button" value="Test" onclick="btn_Click();" />
        </div>
    </form>
</body>
</html>

<script type="text/javascript">
    function btn_Click() {
        alert($(".first_div").text());
        alert($(".first_div.first_span").text());
    }
</script>

$(".first_div, .first_span")

将包含有.first_div 或者 .first_span" 的对象都取到。这里取到 4 个对象。
此处的Html对应

<div class="first_div">
      This is the first div
</div>

<div class="first_div">
        <span class="first_span">
               This is the first span
        </span>
</div>

<span class="first_span eric_sun_class">
     This is the first span + eric sun class.
</span>

$(".first_div .first_span")

将以 .first_div 为类的控件下的以 .first_span 为类的对象取到（类与类之间带有空格逐层取）。这里只取到 1 个。

对应的 className="first_span" 此处的Html对应

<div class="first_div">
       <span class="first_span">
              This is the first span
        </span>
</div>

$(".first_span.eric_sun_class")

将包含有.first_span 并且同时包含有 .eric_sun_class 类的对象取到（类与类之间没有空格类似于 ‘与’ 操作）。这里只取到1个。

对应的 className="first_span eric_sun_class" 此处的Html 对应

  <span class="first_span eric_sun_class">
        This is the first span + eric sun class.
  </span>

http://www.w3.org/TR/css3-selectors/

JQuery 中简单的几个 类选择器 使用方法

JQuery 中简单的几个类选择器使用方法