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程序来实现动画功能
Mar 06 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 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 array的学习笔记
2012/05/16 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
js玩一玩WSH吧
2007/02/23 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
详解Python的Django框架中的中间件
2015/07/24 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
ipython和python区别详解
2019/06/26 Python
python如何将多个PDF进行合并
2019/08/13 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Python 在局部变量域中执行代码
2020/08/07 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
html Table 表头固定的实现
2019/01/22 HTML / CSS
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
药店营业员岗位职责
2015/04/14 职场文书
党员承诺书格式范文
2015/04/28 职场文书
信访维稳承诺书
2015/05/04 职场文书
如何在Python中创建二叉树
2021/03/30 Python
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
mysql sock 文件解析及作用讲解
2022/07/15 MySQL