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 {
            width: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://developer.51cto.com/art/201009/226852.htm

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM