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中的数学函数
Apr 04 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
jquery操作angularjs对象
Jun 26 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
JS工厂模式开发实践案例分析
Oct 17 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
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
自荐信需注意事项
2014/01/25 职场文书
电子专业自荐信
2014/07/01 职场文书
见习报告的格式
2014/11/04 职场文书
南极大冒险观后感
2015/06/05 职场文书
如何撰写创业策划书
2019/06/27 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
Python 视频画质增强
2022/04/28 Python