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 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
JavaScript中Function详解
Feb 27 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
详解Vue的异步更新实现原理
Dec 22 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
原生JS轮播图插件
2017/02/09 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
Python中的高级数据结构详解
2015/03/27 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
土木工程应届生求职信
2013/10/31 职场文书
临床医学系毕业生推荐信
2013/11/09 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
社团活动总结格式
2014/08/29 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python