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修改CSS属性的代码
May 06 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
vue props 单项数据流实例分享
Feb 16 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
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
Admin generator, filters and I18n
2011/10/06 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
JavaScript按位运算符的应用简析
2014/02/04 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
写出一个方法实现冒泡排序
2016/07/08 面试题
茶叶生产计划书
2014/01/10 职场文书
社区包粽子活动方案
2014/01/21 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
工会文体活动总结
2015/05/07 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
angular异步验证器防抖实例详解
2022/03/31 Javascript