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 浏览器判断实现函数
Aug 20 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
php minixml详解
2008/07/19 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
php简单统计在线人数的方法
2016/05/10 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
python局域网ip扫描示例分享
2014/04/03 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
化工机械应届生求职信
2013/11/04 职场文书
办公室前台的岗位职责
2013/12/20 职场文书
优秀民警事迹材料
2014/01/29 职场文书
统计岗位职责
2014/02/21 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
大学新生入学感想
2015/08/07 职场文书