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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 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
解析htaccess伪静态的规则
2013/06/18 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
学生请假条
2014/04/11 职场文书
小学班级特色活动方案
2014/08/31 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
Java 写一个简单的图书管理系统
2022/04/26 Java/Android