JQuery 中几个类选择器的简单使用介绍
2018-10-12 13:51
921 查看
<%@ 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的treeview插件使用-简单介绍
- jQuery的选择器中的通配符使用介绍
- jQuery基本过滤选择器使用介绍
- jQuery的选择器中的通配符使用介绍
- JQuery 中简单的几个 类选择器 使用方法
- Jquery的几个选择器介绍
- jQuery过滤选择器:not()方法使用介绍
- jQuery的选择器中的通配符使用介绍
- jquery选择器原理介绍($()使用方法)
- jQuery-Selectors(选择器)的使用(三、简单篇)
- jQuery-Selectors(选择器)的使用(三、简单篇)
- 几个简单的jQuery使用方法
- jquery选择器的简单使用
- jQuery层次选择器选择元素使用介绍
- jQuery的选择器中的通配符使用介绍
- jquery选择器的选择使用及性能介绍
- 使用jQuery在对象中缓存选择器的简单方法
- jquery选择器的选择使用及性能介绍
- jQuery :first选择器使用介绍