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


Posted in Javascript onMarch 14, 2013
<%@ 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>
Javascript 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
vue双向绑定简要分析
Mar 23 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 #Javascript
document.createElement()用法
Mar 13 #Javascript
js获得鼠标的坐标值的方法
Mar 13 #Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 #Javascript
九种js弹出对话框的方法总结
Mar 12 #Javascript
瀑布流布局并自动加载实现代码
Mar 12 #Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 #Javascript
You might like
php获得当前的脚本网址
2007/12/10 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
node.js中cluster的使用教程
2017/06/09 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
js编写简易的计算器
2020/07/29 Javascript
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python解析基于xml格式的日志文件
2017/02/25 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
德国自行车商店:Tretwerk
2019/06/21 全球购物
好学生评语大全
2014/05/05 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL