jQuery基本选择器选择元素使用介绍


Posted in Javascript onApril 18, 2013
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!-- 
1.基本选择器:是jQuery中使用最频繁的选择器,它由元素Id、Class、元素名、多个选择符组成,通过基本选择器可以实现大多数页面元素的查找 
jQuery选择器详解 
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 
--> 
<title></title> 
<!--使用jQuery基本选择器选择元素:一个页面包含两个<div>标记,其中一个用于设置ID属性,另一个用于设置Class属性;我们再增加一个<span>标记,全部元素初始值均为隐藏,然后通过jQuery基本选择器显示相应的页面标记。--> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
body{font-size:12px;text-align:center;} 
.clsFrame{width:300px;height:100px} 
.clsFrame div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px} 
.clsOne{background-color:#eee} 
</style> 
<script type="text/javascript"> 
$(function () { //ID匹配元素 
$('#divOne').css('display', 'block'); 
}) 
$(function () { //元素名匹配元素 
$('div span').css('display', 'block'); 
}) 
$(function () { //类匹配元素 
$('.clsFrame .clsOne').css('display', 'block'); 
}) 
$(function () { //匹配所有元素 
$('*').css('display', 'block'); 
}) 
$(function () { //合并匹配元素 
$('#divOne,span').css('display', 'block'); 
}) 
</script> 
</head> 
<body> 
<div class="clsFrame"> 
<div id="divOne"> 
ID</div> 
<div class="clsOne"> 
CLASS</div> 
<span>SPAN</span> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
js字符串转成JSON
Nov 07 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
layui实现数据分页功能
Jul 27 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 #Javascript
jQuery基本过滤选择器使用介绍
Apr 18 #Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 #Javascript
jQuery随机切换图片的小例子
Apr 18 #Javascript
JS 各种网页尺寸判断实例方法
Apr 18 #Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 #Javascript
JS隐藏参数post传值实例
Apr 18 #Javascript
You might like
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
动态加载js的几种方法
2006/10/23 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
Python脚本实现集群检测和管理功能
2015/03/06 Python
python二分查找算法的递归实现方法
2016/05/12 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
python实现中文文本分句的例子
2019/07/15 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
物业客服专员岗位职责
2013/11/30 职场文书
文秘人员工作职责
2014/01/31 职场文书
给面试官的感谢信
2014/02/01 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
python实现剪贴板的操作
2021/07/01 Python
python中super()函数的理解与基本使用
2021/08/30 Python
js中Object.create实例用法详解
2021/10/05 Javascript