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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
vuex的module模块用法示例
Nov 12 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
javascript常用功能汇总
2015/07/05 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
pandas数据集的端到端处理
2019/02/18 Python
Python占用的内存优化教程
2019/07/28 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
python获取Linux发行版名称
2019/08/30 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
入党函调证明材料
2014/12/24 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
Python实现数据的序列化操作详解
2022/07/07 Python