jQuery选择器的一些使用心得

最新推荐文章于 2018-07-11 16:01:55 发布
最新推荐文章于 2018-07-11 16:01:55 发布
阅读量1.1k 收藏
点赞数
分类专栏： jQuery + CSS 文章标签： jquery class function div input n2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sruru/article/details/7788782
版权

1. :empty选择器，选择所有的没有子节点且内容为空的节点，就是说，如果含有子节点且子节点为空，该节点不会被选中，如果没有子节点，但是当前节点内容不为空，一样不会被选中。（或者说文本内容可以看作是文本节点）例如

<tr>

<td>a<td>

<td><p></p><td>

<td></td>

</tr>

在jQuery中使用$(":empty")选择器，仅<td></td>被选中


2. contains(text),选择所有包括指定text的元素，要特别提醒一点是，单独使用$(:contains(text))会发生意想不到的结果，例如以下情况，整个页面都会变成红色。<p></p>是包括在<body></body>中的文本。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(":contains(p)").css("background-color","red");
});
</script>
</head>
<body>
<p></p>
</body>

</html>


3.has选择器。在例子中，整个页面都变成红色,匹配含有选择器所匹配的元素的元素,所以匹配到道德元素是selector的父元素

:has(selector) 匹配含有选择器所匹配的元素的元素 给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("body:has(.intro)").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>


4. :parent选择器，匹配所有包含子元素或者内容不为空的元素，则<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>两列变为红色，第三列不变色，因为第三列不含有子元素或者内容。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p:parent").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p></p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>


5.属性选择器：包含指定属性[attr]，指定属性等于，不等于，开头，结尾，任意位置，都可以进行筛选，也可以使用符合属性条件进行筛选。

[attributeFilter1][attributeFilter2][attributeFilterN] 复合属性选择器，需要同时满足多个条件时使用。 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的: 
$("input[id][name$='man']")

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("h1:[class = 'intro']").css("background-color","red");
  $("p:has(.intro)").css("background-color","red");
});
</script>
</head>
<body>
<h1 class="intro">Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>

  $("h1:[class = 'intro']").css("background-color","red");
  $("p:has(.intro)").css("background-color","red");

这两句话区别出了:has和属性选择器的区别，has选出包含指定属性选择器的父元素，属性选择器选择出包含指定属性的元素，所以Welcome to My Homepage变为红色，My name is Donald不变色。


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("a:[href$=.org][class='intro']").css("background-color","red");
});
</script>
</head>
<body>


<a href="http://www.w3schools.com">w3schools.com</a>
<br />
<a href="http://www.google.com">Google.com</a>
<br />
<a href="http://www.wikipedia.org" class="intro">wikipedia.org</a>
</body>
</html>


只有wikipedia.org变成红色。


6.子元素选择器

名称 说明 举例
:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用: 
nth-child(even) 
:nth-child(odd) 
:nth-child(3n) 
:nth-child(2) 
:nth-child(3n+1) 
:nth-child(3n+2)

 在每个 ul 查找第 2 个li: 
$("ul li:nth-child(2)")
:first-child

匹配第一个子元素

':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

 在每个 ul 中查找第一个 li: 
$("ul li:first-child")
:last-child

匹配最后一个子元素

':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

 在每个 ul 中查找最后一个 li: 
$("ul li:last-child")
:only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

 在 ul 中查找是唯一子元素的 li: 
$("ul li:only-child")

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#choose li:nth-child(1)").css("background-color","red");
  $(".abc li:only-child").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>


Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>


<ul class="abc">
<li>abc</li>
</ul>
</body>
</html>

运行结果：<li>abc</li> 和<li>Goofy</li>均为红色标出。

 PS：以下语句均可以实现<li>abc</li> 红色标出。

 $(".abc li:only-child").css("background-color","red");

 $(".abc li:first-child").css("background-color","red");

 $(".abc li:last-child").css("background-color","red");

更多的内容参见：http://www.blogjava.net/ywj-316/archive/2010/01/21/310340.html

sruru
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery选择器之基本选择器用法实例分析
12-09
本文实例讲述了jQuery选择器之基本选择器用法。分享给大家供大家参考，具体如下： 初学jQuery，为了能系统地学习好jQuery，今天特意把自己的学习心得归纳一下，贴上来与初学者共享，今天我主要总结的是jquery的基本...
jQuery选择器心得
iaRMB的博客
10-23 217
:empty选择器，选择所有的没有子节点且内容为空的节点，就是说，如果含有子节点且子节点为空，该节点不会被选中，如果没有子节点，但是当前节点内容不为空，一样不会被选中。（或者说文本内容可以看作是文本节点）例如 a 在jQuery中使用$(":empty")选择器，仅被选中 contains(text),选择所有包括指定text的元素，要特别提醒一点是，单独使用$(:contains(...
jquery 选择器 -高级使用 新的 心得
weixin_33704234的博客
09-22 65
jQuery的each函数: each函数等同于c语言中的for函数: 里面每次循环的 "context 上下文" == 当前的dom ,可以使用this, 也可以使用$(this) 这个this就相当于for中的 循环变量i 对循环的控制: c语言的跳出循环 break == each函数中的 return false; c语言中跳出当次循环,继续下一次continue == each中的 re...
JQuery选择器使用心得
启舰
01-07 1634
1，子标签选择器$("ancestor descebdabt")与$("ancestor>descebdabt")的区别 $(“.nav li”)与$(“.nav>li”)的区别 如代码 111 222 第一个选择器，“空格”指类nav下子标签及子子标签，子子子标签……等，所有其子孙标签中的所有
JQuery选择器学习总结（二）
qq_33721778的博客
08-04 301
1.遍历选择器（1）:first 第一个控件 $("p:first").css("font-size","30px"); （2）:last 最后一个控件 $("p:last").css("background-color","#666"); （3）:even 偶数个控件 $("p:even").css("color","green")
Jquery选择器完全总结
热门推荐
anxpp的博客
05-24 2万+
基本的选择器 元素选择器element ID选择器#id 类选择器.class 匹配所有元素通常用于结合上下文搜索* 根据多个规则获取元素selector1,selector2,selectorN 层次结构中选取 选取指定元素内所有匹配的元素ancestor descendant 选择指定父元素下匹配的子元素parent>child 选择所有紧接在指定元素后指定的匹配元素prev+next 选择指定元素之后的所有指定的
JQuery 学习笔记 选择器之一
12-09
本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录下来,一方面加强自己的印象,另一方面共享下学习的经验,呵,小弟刚开始写这种...
JQuery学习总结【一】
11-28
我们在使用的时候将Jquery-1.4.2.js和jquery.1.4.2-vsdoc,js放在一起，其实vsdoc.js是对于前面的解释说明，它是让我们在编写代码的时候可以点操作出来。 *:练习《点击按钮弹出对话框的内容》 《点击网页里面的文字使...
jquery简单体验
12-01
jquery简单体验query是继prototype之后又一个优秀的Javascrīpt框架。...使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。 一，找到你了！ 还记得$()这个东西吧？p
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
11-23
本文总结述了15个值得开发人员关注的jQuery开发技巧和心得。非常精辟实用！分享给大家供大家参考，具体如下： 在这篇文章中，我们将介绍15个让你的jQuery更加有效的技巧，大部分关于性能提升的，希望大家能够喜欢！ ...
[jQuery]：jQuery选择器总结
我只是个程序员。
09-26 889
jQuery选择器是继承了CSS和Xpath的部分语法，总体分为四种：基本选择器、层次选择器、过滤选择器和表单选择器。
jQuery选择器总结
京魂的博客
07-11 355
1、元素选择器：$("标签名") 例：$("p") 选择p元素 2、属性选择器：$([属性]) 例：$("[href]") 选取所有带有 href 属性的元素 3、元素属性选择器：$("标签名[属性 符号 值][属性 符号 值]...") 例： $("input[name='test']") 选择所有的name属性等于'test'的input元素 $("input[name!='test..
jQuery选择器学习小结
Edward_Potato的博客
09-23 363
常规选择器： 1、子代选择器：> 1 2 3 4 5 6 (function(){(function(){ (‘#divid > p’).css(‘color’,’red’); })
【前端】jQuer选择器小结
Louis Lee's Blog
12-31 1517
1 摘要工欲善其事必先利其器，要想用好jQuery，就要做好自己的基本功。本篇博客对于jQuery中的选择器进行了一个小结，对于基本选择器、层次选择器、过滤选择器和表单选择器进行了分别列表和解释。2 什么是jQuery选择器顾名思义，选择器即选择某个对象或事物的器具。而jQuery选择器的操作对象则是DOM树的某个元素，例如HTML元素中的某个div块、button按钮和a链接，当然也可以是其中的d
后端开发是一个涉及广泛技术和工具的领域.docx
04-30
后端开发是一个涉及广泛技术和工具的领域，这些资源对于构建健壮、可扩展和高效的Web应用程序至关重要。以下是对后端开发资源的简要介绍： 首先，掌握一门或多门编程语言是后端开发的基础。Java、Python和Node.js是其中最受欢迎的几种。Java以其跨平台性和丰富的库而著名，Python则因其简洁的语法和广泛的应用领域而备受欢迎。Node.js则通过其基于JavaScript的单线程异步I/O模型，为Web开发提供了高性能的解决方案。 其次，数据库技术是后端开发中不可或缺的一部分。关系型数据库（如MySQL、PostgreSQL）和非关系型数据库（如MongoDB、Redis）各有其特点和应用场景。关系型数据库适合存储结构化数据，而非关系型数据库则更适合处理大量非结构化数据。 此外，Web开发框架也是后端开发的重要资源。例如，Express是一个基于Node.js的Web应用开发框架，它提供了丰富的API和中间件支持，使得开发人员能够快速地构建Web应用程序。Django则是一个用Python编写的Web应用框架，它采用了MVC的软件设计模式，使得代码结构更加清晰和易于维护。
华为数字化转型实践28个精华问答glkm.pptx
04-30
华为数字化转型实践28个精华问答glkm.pptx
新员工入职培训全流程资料包gl.zip
04-30
新员工入职培训全流程资料包（100+个文件） 1入职流程指引 万科新职员入职通知书 万科新职员入职引导手册 新进员工跟进管理表 新员工入职报到工作单(文职) 新员工入职报到流程 新员工入职流程表 新员工入职手续办理流程(工厂 新员工入职手续清单 新员工入职须知 新员工入职训流程 新员工入职引导表(导师用) 2 入职工具表格 3 培训方案计划 4培训管理流程 5培训教材课件 6 培训效果检测 7 员工管理制度 8 劳动合同协议 9 新员工培训PPT模板(28套)
三菱PLC通讯程序实例
04-30
FX5U PLC作为主、从站的通讯方式程序实例，以及包含详细说明文件...
技术需求报告-集行波测距与故障录波功能于一体的电网综合故障分析系统.docx
最新发布
04-30
技术需求报告-集行波测距与故障录波功能于一体的电网综合故障分析系统.docx
jquery选择器
06-01
jQuery提供了多种选择器方法，以下是其中的一些： 1. ID选择器： 使用“#”符号，后跟ID名称，如下所示： ``` $("#myId") ``` 2. 类选择器： 使用“.”符号，后跟类名称，如下所示： ``` $(".myClass") ``` 3...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值