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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 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
joomla数据库操作示例代码
2016/01/06 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
Python理解递归的方法总结
2019/01/28 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
上课睡觉检讨书
2014/01/28 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
遗嘱继承公证书
2014/04/09 职场文书
预防传染病方案
2014/06/14 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
销售员岗位职责范本
2015/04/11 职场文书
红高粱观后感
2015/06/10 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android