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 相关文章推荐
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
vuejs实现递归树型菜单组件
Jan 13 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP伪静态写法附代码
2008/06/20 PHP
php中的三元运算符使用说明
2011/07/03 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python+mysql实现教务管理系统
2019/02/20 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python的Jenkins接口调用方式
2020/05/12 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
shell的种类有哪些
2015/04/15 面试题
转让协议书范本
2014/04/15 职场文书
出国留学单位推荐信
2015/03/26 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书