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

时间:2013-03-14    点击:71   
复制代码 代码如下:

<%@ 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>
Jquery刷新页面背景图片随机变换的实现方法
jQuery方法简洁实现隔行换色及toggleClass的使用
jquery使用ColorBox弹出图片组浏览层实例演示
JavaScript 函数replace深入了解
JS异常处理的一个想法(sofish)
> 返回     
地址:上海市普陀区胶州路941号长久商务中心 电话: QQ:
© Copyright 2012 上海网络 Product All Rights Reserved