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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 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开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
四年大学自我鉴定
2014/02/17 职场文书
学位证书委托书
2014/09/30 职场文书
老人节标语大全
2014/10/08 职场文书
公务员考察材料范文
2014/12/23 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
大学生自荐书范文
2015/03/05 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
户外拓展训练感想
2015/08/07 职场文书
同学聚会开幕词
2019/04/02 职场文书
Go语言并发编程 sync.Once
2021/10/16 Golang
Python requests用法和django后台处理详解
2022/03/19 Python