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的datepicker的本地化以及Today问题
May 23 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
Bootstrap实现翻页效果
Nov 27 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
js实现每日签到功能
Nov 29 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python入门教程 python入门神图一张
2018/03/05 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
详解Python3 基本数据类型
2019/04/19 Python
python实现从wind导入数据
2019/12/03 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
大学生期末自我鉴定
2014/02/01 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
公安机关起诉意见书
2015/05/20 职场文书
青年联谊会致辞
2015/07/31 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL