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 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
浅谈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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
webpack3之loader全解析
2017/10/26 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
Python yield 小结和实例
2014/04/25 Python
python生成IP段的方法
2015/07/07 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
python 字典的打印实现
2019/09/26 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Python图像读写方法对比
2020/11/16 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
结婚典礼证婚词
2014/01/08 职场文书
《花木兰》教学反思
2014/04/09 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
技术经济专业求职信
2014/09/03 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
一般党员对照检查材料
2014/09/24 职场文书
迟到检讨书范文
2015/01/27 职场文书
邀请函范文
2015/02/02 职场文书
简历自荐信范文
2015/03/09 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python