JQuery 中几个类选择器的简单使用介绍 - Web前端
作者：98wpeu发布时间：2026-06-12分类：网页前端技术浏览：110
导读：复制代码代码如下:<%@PageLanguage="c#"AutoeventWireup="true"codeBehind="Testclassselector.a...
复制代码 代码如下:
<%@ Page Language="c#" AutoeventWireup="true" codeBehind="Testclassselector.aspx.cs" Inherits="WEBAPPlication1.TestClassSelector" %>
<!DOCtypehtml>
<HTMLxmlns="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>
<%@ Page Language="c#" AutoeventWireup="true" codeBehind="Testclassselector.aspx.cs" Inherits="WEBAPPlication1.TestClassSelector" %>
<!DOCtypehtml>
<HTMLxmlns="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鼠标滑过提示title具体实现代码 - Web前端
- jQueryUI写一个调整分类的拖放效果实现代码 - Web前端
- 幻灯片带网页设计中的20个奇妙应用示例小结 - Web前端
- jQuery.each()用法分享 - Web前端
- 很酷的60款jQuery 幻灯片演示和下载 - Web前端
- jQuery之$(document).ready()使用介绍 - Web前端
- 查看源码的工具 学习jQuery源码不错的工具 - Web前端
- jquery制作搜狐快站页面效果示例分享 - Web前端
- JQuery获取浏览器窗口内容部分高度的代码 - Web前端
- jQuery 1.7.2中getAll方法的疑惑分析 - Web前端
- 网页前端技术排行
-
- 1【第六章】Foundation之按钮和下拉功能 - Web前端
- 2jQuery编写widget的一些技巧分享 - Web前端
- 3在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 4基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 5分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 6jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 9JS网页制作实例:标签云 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性