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 disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
jQuery的事件预绑定
Dec 05 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 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创建多级目录代码
2008/06/05 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
django 修改server端口号的方法
2018/05/14 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
网站域名和主机:Domain.com
2019/04/01 全球购物
.net工程师笔试题
2012/06/09 面试题
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
体育教师求职信
2014/06/30 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL