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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
js选项卡的制作方法
Jan 23 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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使用者状态管理功能的应用
2006/10/09 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
关于JavaScript的一些看法
2009/05/27 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
js post提交调用方法
2014/02/12 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
python中使用np.delete()的实例方法
2021/02/01 Python
python中添加模块导入路径的方法
2021/02/03 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
数控专业应届生求职信
2013/11/27 职场文书
小学生家长评语大全
2014/02/10 职场文书
英文请假条
2014/04/11 职场文书
护士求职信范文
2014/05/24 职场文书
会计学自荐信
2014/06/03 职场文书
社团活动总结模板
2014/06/30 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
上甘岭观后感
2015/06/10 职场文书
《从现在开始》教学反思
2016/02/16 职场文书