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模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
js实现跟随鼠标移动的小球
Aug 26 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调用MySQL的存储过程的实现代码
2008/08/12 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
js 函数的副作用分析
2011/08/23 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
javascript中Function类型详解
2015/04/28 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
Python内置类型性能分析过程实例
2020/01/29 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
群众路线教育实践活动心得体会
2014/03/07 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
课内比教学心得体会
2014/09/09 职场文书
辞职信标准格式
2015/02/27 职场文书
python之基数排序的实现
2021/07/26 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle