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 常见开发使用技巧总结
Dec 26 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
substr()函数中文版
2006/10/09 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
Node.js批量给图片加水印的方法
2016/11/15 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
高三生物教学反思
2014/01/25 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
司机职责范本
2014/03/08 职场文书
英文请假条
2014/04/11 职场文书
2014年中秋寄语
2014/08/11 职场文书