您的位置：首页 > Web前端 > JQuery

JQuery 中几个类选择器的简单使用介绍

2013-03-14 00:00 826 查看

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航