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 相关文章推荐
基于jQuery的左右滚动实现代码
Dec 03 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
js倒计时显示实例
Dec 11 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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设计模式中的工厂模式
2008/06/12 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
js控制的遮罩层实例介绍
2013/05/29 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python2.7实现爬虫网页数据
2018/05/25 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
新年晚会主持词
2014/03/24 职场文书
毕业留言寄语大全
2014/04/10 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
小学体育组工作总结
2015/08/13 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL