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 相关文章推荐
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
vue.js全局API之nextTick全面解析
Jul 07 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 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
写一个用户在线显示的程序
2006/10/09 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Python如何实现邮件功能
2020/05/27 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
毕业自我鉴定
2013/11/05 职场文书
前台接待岗位职责
2013/12/03 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
运动会广播稿300字
2015/08/19 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
python中subplot大小的设置步骤
2021/06/28 Python