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 DOM学习第八章 表单错误提示
Feb 19 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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个人网站架设连环讲(四)
2006/10/09 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
python使用pymysql实现操作mysql
2016/09/13 Python
pycharm安装图文教程
2017/05/02 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
总经理秘书工作职责
2013/12/26 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
入党自我鉴定
2014/03/25 职场文书
搞笑的获奖感言
2014/08/16 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书