代码如下:

<%@
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 几种类选择器方式的更多相关文章

  1. JQ001-认识jQuery 和 JQ002-jQuery选择器

    JQ001-认识jQuery jQuery环境配置:将jQuery.js文件引入到html页面中即可. 代码如下: <!DOCTYPE html> <html> <hea ...

  2. JQuery：JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  3. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  4. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  5. JQuery————基础&&基础选择器

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  6. jQuery使用（一）：jQuery对象与选择器

    一.简单的一些介绍 1.jQuery是由普通的是由一些系列操作DOM节点的函数和一些其他的工具方法组成的js库. 2.为什么要使用jQuery库? jQuery面向用户良好的设计在使用过程中彻底解放了 ...

  7. 24款最好的jQuery日期时间选择器插件

    如果你正在创建一个网络表单,有很多事情你需要在你的应用程序中使用.有时您需要特别的输入,从用户的日期和时间,如发票日期,生日,交货时间,或任何其他此类信息.如果你有这样的需要,可以极大地从动态的jQu ...

  8. jQuery.data() 的实现方式,jQuery16018518865841457738的由来,jQuery后边一串数字的由来

    原文地址: http://xxing22657-yahoo-com-cn.iteye.com/blog/1042440 jQuery.data() 的实现方式 jQuery.data() 的作用是为普 ...

  9. jQuery基础---常规选择器

    内容摘要: 1.简单选择器 2.进阶选择器 3.高级选择器 发文不易,转载请注明出处! jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名. ...

随机推荐

  1. usaco No Change, 2013 Nov 不找零（二分查找+状压dp）

    Description 约翰带着 N 头奶牛在超市买东西,现在他们正在排队付钱,排在第 i 个位置的奶牛需要支付 Ci 元.今天说好所有东西都是约翰请客的,但直到付账的时候,约翰才意识到自己没带钱,身 ...

  2. 关于flex布局中的兼容性问题

    这几天在做项目中用到了flex布局,但是在测试的过程中发现他的兼容性实在是太差了,仅仅用到水平和垂直居中的样式,没想到兼容性代码就写了好几行. display:flex; display:-webki ...

  3. 一个基于React整套技术栈+Node.js的前端页面制作工具

    pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...

  4. Spring meven 配置

    使用maven的仓库化管理,可以更方便有效的控制文件. 在官网下载maven. 官网的地址:http://maven.apache.org/download.cgi  请选择最新的版本下载, 这里我用 ...

  5. poj 2828 Buy Tickets【线段树 单点更新】

    倒着插,先不理解意思,后来看一篇题解说模拟一下 手动模拟一下就好理解了----- 不过话说一直写挫---一直改啊----- 好心塞------ #include <cstdio> #inc ...

  6. php基础-------preg_replace()与preg_replace_callback()

    1.preg_replace() 执行一个正则表达式的搜索和替换. 语法: mixed preg_replace ( mixed $pattern , mixed $replacement , mix ...

  7. ZBrush中自动保存在哪里

    在使用 ZBrush®执行任何会话期间,您都可以设置将文件自动保存,并可以修改保存时间间隔,文件保存位置等设置.发生系统错误后要重新启动ZBrush时,可以从临时文件夹或指定的文件夹中恢复备份文件.如 ...

  8. 在Windows环境下使用短信猫收发短信的简单配置：

    Windows简单配置: 1.插入usb接口,打开电脑的设备管理器,装驱动后,查看端口下设备的com(串口)是多少,接下来就是配置短信猫的必须参数: 如果短信猫是COM(串口)口的,一般端口是COM1 ...

  9. 安装Oracle 12c及解决遇到的问题

    一.[INS-30131]执行安装程序验证所需的初始设置失败(原因:无法访问临时位置) 原文链接:https://blog.csdn.net/u013388049/article/details/85 ...

  10. js单体内置对象

    js单体内置对象:js的内置对象,是ECMAScritp提供的.不依赖于宿主环境的对象,我的理解就是在我们开发之前js里面就已经存在的对象.单体内置对象就是是不需要通过new来实例化的,例如我们的st ...