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 相关文章推荐
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
原生javascript获取元素样式
Dec 31 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
vue中如何使用ztree
Feb 06 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
JavaScript运动原理基础知识详解
Apr 02 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
js回调函数仿360开机
2019/12/26 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
python 默认参数相关知识详解
2019/09/18 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
opencv 阈值分割的具体使用
2020/07/08 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
连锁经营管理专业大学生求职信
2013/10/30 职场文书
交通事故被告代理词
2015/05/23 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
Python词云的正确实现方法实例
2021/05/08 Python