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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 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读取msn上的用户信息类
2008/12/05 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
Javascript 面向对象 命名空间
2010/05/13 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
Javascript中replace()小结
2015/09/30 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python使用心得之获得github代码库列表
2014/06/25 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
彻底搞懂Python字符编码
2018/01/23 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
python3 求约数的实例
2019/12/05 Python
python实现字符串和数字拼接
2020/03/02 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
公司同意接收函
2014/01/13 职场文书
优秀教师事迹材料
2014/12/15 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
详解运行Python的神器Jupyter Notebook
2021/06/03 Python