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脚本实现Web页面信息交互
Oct 11 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
React配置子路由的实现
Jun 03 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
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
php URL验证正则表达式
2011/07/19 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
浅析tr的隐藏和显示问题
2014/03/05 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
vue-loader教程介绍
2017/06/14 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
全面了解Python环境配置及项目建立
2016/06/30 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
领导干部培训感言
2014/01/23 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
监督检查工作方案
2014/05/28 职场文书
2015大学生实训报告
2014/11/05 职场文书
工作年限证明范本
2015/06/15 职场文书
学校远程教育工作总结
2015/08/11 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技