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 parseInt 大改造
Sep 27 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
在vue中使用Base64转码的案例
Aug 07 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
PyMongo安装使用笔记
2015/04/27 Python
python修改操作系统时间的方法
2015/05/18 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
python实现整数的二进制循环移位
2019/03/08 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
协议书与合同的区别
2014/04/18 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
裁员通知
2015/04/25 职场文书
商标侵权律师函
2015/05/27 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python