JQuery 中幾個類選擇器的簡單使用介紹
更新時間：2013年03月14日 09:00:26 作者：
類選擇器想必很多喜歡jquery的朋友早早就涉及到了吧，它們的使用也應(yīng)該了如指掌了吧，接下來幫大家溫習(xí)下幾個簡單類選擇器的使用方法，感興趣的你可以參考下哈，希望對你有所幫助
復(fù)制代碼 代碼如下:
<%@ 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>
復(fù)制代碼 代碼如下:
$(".first_div, .first_span")
將包含有.first_div 或者 .first_span" 的對象都取到。 這里取到 4 個 對象。
此處的Html對應(yīng)
復(fù)制代碼 代碼如下:
<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>
復(fù)制代碼 代碼如下:
$(".first_div .first_span")
將以 .first_div 為類的控件 下的 以 .first_span 為類 的對象取到（類與類之間帶有空格 逐層?。?。 這里只取到 1 個。
對應(yīng)的 className="first_span" 此處的Html對應(yīng)
復(fù)制代碼 代碼如下:
<div class="first_div">
<span class="first_span">
This is the first span
</span>
</div>
復(fù)制代碼 代碼如下:
$(".first_span.eric_sun_class")
將包含有.first_span 并且同時包含有 .eric_sun_class 類的 對象取到（類與類之間沒有空格 類似于 ‘與' 操作）。 這里只取到1個。
對應(yīng)的 className="first_span eric_sun_class" 此處的Html 對應(yīng)
復(fù)制代碼 代碼如下:
<span class="first_span eric_sun_class">
This is the first span + eric sun class.
</span>
您可能感興趣的文章:
- jQuery類選擇器用法實例
- 使用jquery選擇器如何獲取父級元素、同級元素、子元素
- jquery選擇器之屬性過濾選擇器詳解
- jquery 中多條件選擇器,相對選擇器,層次選擇器的區(qū)別
- jQuery Selector選擇器小結(jié)
- Jquery選擇器中使用變量實現(xiàn)動態(tài)選擇例子
- JQuery中$之選擇器用法介紹
- Jquery顏色選擇器ColorPicker實現(xiàn)代碼
- jQuery過濾選擇器:not()方法使用介紹
- jquery 屬性選擇器（匹配具有指定屬性的元素）
- jquery選擇器大全 全面詳解jquery選擇器
- jQuery中的類名選擇器（.class）用法簡單示例
相關(guān)文章
這篇文章主要介紹了JQuery對表格進行操作的常用技巧,需要的朋友可以參考下2014-04-04
通過jQuery方法選中了元素，如何基于這些已經(jīng)選中的元素進行下一步的遍歷呢？下面有個不錯的示例，大家可以參考下2014-05-05
jQuery使用each方法與for語句遍歷數(shù)組示例
這篇文章主要介紹了jQuery使用each方法與for語句遍歷數(shù)組,結(jié)合實例形式簡單對比分析了兩種方法在遍歷數(shù)組時的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
jquery trigger偽造a標(biāo)簽的click事件取代window.open方法
這篇文章主要介紹了使用jquery trigger 觸發(fā)a標(biāo)簽的click事件取代window.open方法,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了jQuery xml字符串的解析、讀取及查找方法,涉及jQuery方法針對xml字符串的解析、讀取及遍歷查詢等操作相關(guān)技巧,需要的朋友可以參考下2016-03-03
本文主要分享了jQuery實現(xiàn)大圖輪播的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
客戶端用一個html頁面調(diào)用一個ashx文件（一般http處理程序），返回 json格式的自定義對象2010-04-04
本文給大家分享的是jQuery制作文字輪播的特效，非常的實用，屬于作者原創(chuàng)代碼，分享給大家2017-02-02
通過jquery還原含有rowspan、colspan的table的實現(xiàn)方法
通過jquery還原含有rowspan、colspan的table的實現(xiàn)方法，學(xué)習(xí)jquery的朋友可以參考下2012-02-02
下面小編就為大家分享一篇提高jQuery性能的十個訣竅。很實用的。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11