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 setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
详解如何在JS代码中消灭for循环
Dec 11 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php+mysql实现无限级分类
2015/11/11 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
javascript中indexOf技术详解
2015/05/07 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Python imread、newaxis用法详解
2019/11/04 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
家长给孩子的评语
2014/01/30 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
介绍信怎么写
2015/01/30 职场文书
绵山导游词
2015/02/05 职场文书
文言文辞职信
2015/02/28 职场文书
如何写新闻稿
2015/07/18 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫