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 相关文章推荐
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
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中的比较运算符详解
2013/10/28 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
js select常用操作控制代码
2010/03/16 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
如何提高数据访问速度
2016/12/26 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
详解vue 实例方法和数据
2017/10/23 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
python3中dict(字典)的使用方法示例
2017/03/22 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
django的settings中设置中文支持的实现
2019/04/28 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
python实现查找所有程序的安装信息
2020/02/18 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
管理部部长岗位职责
2013/12/05 职场文书
产品质量承诺书范文
2014/03/27 职场文书
药店促销活动总结
2014/07/10 职场文书
校庆团日活动总结
2014/08/28 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
毕业论文致谢词
2015/05/14 职场文书
家长通知书家长意见
2015/06/03 职场文书