jquery选择器简述


Posted in Javascript onAugust 31, 2015

jQuery选择器使得获得页面元素变得更加容易、更加灵活,从而大大减轻了开发人员的压力。如同盖楼一样,没有砖瓦,就盖不起楼房,得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性。

jquery选择器大方向可以分为这样:

jquery选择器简述

下面我们先来看看基本选择器总的CSS选择器:

jquery选择器简述

1.标签选择器:

$("element")

其中,参数element,表示待查找的HTML标记名,如$("div"),标签选择器获取元素的方式是高效的,因为它继承自javascript中的getEmelentsByTagName,它获取的是整个元素的集合。

2.ID选择器

$("id")

其中,参数id表示待查找的元素的id属性值,应该在其前面加上数字符“#”,它获取元素的方式也是高效的,因为它继承自JavaScript中的getElementById(""),id在页面中是唯一的,符合CSS标准。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>ID选择器</title>
 <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
 <script type="text/javascript">
 $(function () {
 alert($("#idInput").val());
 });
 

 </script>
</head>
<body>
 <input type="text" value="你好,我是ID选择器" id="idInput"/>
</body>
</html>

3.类选择器

$("class")

其中,参数class指定应用于带选择器元素的类名,应在其前面加上(.)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>class选择器</title>
 <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
 <script type="text/javascript">
 $(function () {
 $(".myClass").css("border", "2px solid blue");

 });

 </script>
</head>
<body>
 <input type="datetime" value="" class="myClass"/>
 <div class="myClass">我是DIV,哇哈哈哈</div>
</body>
</html>

4.通用选择器

通用选择器(*)匹配所有元素,多用于结合上下文来搜索,也就是找到HTML页面中所有的标签。语法格式如下:

$("*")

用通用选择器,找到所有元素,统一设置样式。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>通用选择器</title>
 <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
 <script type="text/javascript">
 $(function () {
 $("*").css("background-color", "green");
 });
 </script>
</head>
<body>
 <p>窗前明月光</p>
 <ul>
 <li>China</li>
 <li>Chinese</li>
 <li>中国</li>
 <li>中国人</li>
 </ul>
 <input type="text" value="" />
 <div>
 我是DIV
 </div>
</body>
</html>

5.群组选择器

群组选择器又叫多元素选择器,用于选择所有指定的选择器组合的结果,语法格式如下:

$("selector1,selector2,selector3,.....,selectorN");

其中,selector1,selector2,selector3,和selectorN均为有效的任意选择器。根据需要,可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。

多元素选择器,是选择不同元素的有效方法,在返回的jquery对象中,DOM元素的顺序可能有所不同,因为他们是按照文档顺序排列的。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>群组选择器</title>
 <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
 <script type="text/javascript">
 $(function () {
 $("p,ul,#myID,.myClass").css("background-color", "green");


 });

 </script>
</head>
<body>
 <p>我是段落标签</p>
 <ul>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 </ul>
 <input type="text" id="myID" value="我是文本框"/>
 <span class="myClass">我是内联元素,Span</span>
</body>
</html>

以上就是小编整理的关于jquery选择器的小结,希望对大家进一步了解jquery选择器有所帮助。

Javascript 相关文章推荐
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
react 创建单例组件的方法
Apr 26 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
微信小程序实现底部弹出模态框
Nov 18 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 #Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 #Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 #Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 #Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 #Javascript
javascript中sort() 方法使用详解
Aug 30 #Javascript
javascript中的正则表达式使用详解
Aug 30 #Javascript
You might like
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
员工试用期考核自我鉴定
2014/04/13 职场文书
数学系毕业生求职信
2014/05/29 职场文书
教师一帮一活动总结
2014/07/08 职场文书
教师个人考察材料
2014/12/16 职场文书
部门2015年度工作总结
2015/04/29 职场文书
读书笔记格式
2015/07/02 职场文书
中学政教处工作总结
2015/08/13 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python