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 Easyui Tree的oncheck事件实现代码
May 28 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
node.js基础知识小结
Feb 26 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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加密解密的代码
2007/07/16 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
用Vue编写抽象组件的方法
2019/05/06 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python json模块使用实例
2015/04/11 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
替换python字典中的key值方法
2018/07/06 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
管理部副部长岗位职责范文
2014/03/09 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2014年医院工作总结
2014/11/20 职场文书
苏州园林导游词
2015/02/03 职场文书
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis