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控制台调试的方法
Mar 07 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
vue项目出现页面空白的解决方案
Oct 31 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
C# Assembly类访问程序集信息
2009/06/13 PHP
php数组一对一替换实现代码
2012/08/31 PHP
PHP生成树的方法
2015/07/28 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
jQuery实现跨域
2015/02/03 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
node.js require() 源码解读
2015/12/13 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python入门之井字棋小游戏
2020/03/05 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
python 多线程中join()的作用
2020/10/29 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
新闻稿怎么写
2015/07/18 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS