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 相关文章推荐
Document对象内容集合(比较全)
Sep 06 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
vue一步步实现alert功能
Jul 05 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
详解vue-router 初始化时做了什么
Jun 11 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
js module大战
Apr 19 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/09/10 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
python特性语法之遍历、公共方法、引用
2018/08/08 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python读取指定字节长度的文本方法
2019/08/27 Python
python中uuid模块实例浅析
2020/12/29 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
班级德育工作实施方案
2014/02/21 职场文书
优秀大学生自荐信
2014/06/09 职场文书
争先创优演讲稿
2014/09/15 职场文书
六五普法宣传标语
2014/10/06 职场文书
优秀班集体申报材料
2014/12/25 职场文书
化验室岗位职责
2015/02/14 职场文书
公司开业致辞
2015/07/29 职场文书
外出考察学习心得体会
2016/01/18 职场文书
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫