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深入理解js闭包
Jul 03 Javascript
validator验证控件使用代码
Nov 23 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
jQuery 插件开发指南
Nov 14 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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作为Shell脚本语言使用
2006/10/09 PHP
php 高性能书写
2010/12/11 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
python中id函数运行方式
2020/07/03 Python
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
SQL注入攻击的种类有哪些
2013/12/30 面试题
建筑经济管理专业求职信分享
2014/01/06 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
导游词之介休绵山
2019/12/31 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle