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 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
python中__call__内置函数用法实例
2015/06/04 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python函数装饰器实现方法详解
2018/12/22 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
绘画设计学生的个人自我评价
2013/09/20 职场文书
专营店会计助理岗位职责
2013/11/29 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
绘画专业自荐信
2014/07/04 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
单位车辆管理制度
2015/08/05 职场文书
超市员工管理制度
2015/08/06 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书