jQuery_内容过滤选择器

最新推荐文章于 2022-05-22 06:45:00 发布
最新推荐文章于 2022-05-22 06:45:00 发布
阅读量451 收藏
点赞数
分类专栏： web 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/williamfan21c/article/details/54237119
版权 


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
div, span, p {
	width: 140px;
	height: 140px;
	margin: 5px;
	background: #aaa;
	border: #000 1px solid;
	float: left;
	font-size: 17px;
	font-family: Verdana;
}

div.mini {
	width: 55px;
	height: 55px;
	background-color: #aaa;
	font-size: 12px;
}

div.hide {
	display: none;
}
</style>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {

		$("#btn1").click(function() {
			$("div:contains('di')").css("background", "#ffbbaa");
		});
		$("#btn2").click(function() {
			$("div:empty").css("background", "#ffbbaa");
		});
		$("#btn3").click(function() {
			$("div:has(.mini)").css("background", "#ffbbaa");
		});

		$("#btn4").click(function() {
			$("div:parent").css("background", "#ffbbaa");
			//$("div:not(:empty)").css("background", "#ffbbaa");
		});

	});
</script>
</head>
<body>
	<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
	<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
	<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
	<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />

	<br>
	<br>
	<div class="one" id="one">
		id 为 one,class 为 one 的div
		<div class="mini">class为mini</div>
	</div>
	<div class="one" id="two" title="test">
		id为two,class为one,title为test的div
		<div class="mini" title="other">class为mini,title为other</div>
		<div class="mini" title="test">class为mini,title为test</div>
	</div>
	<div class="one">
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini"></div>
	</div>
	<div class="one">
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini" title="tesst">class为mini,title为tesst</div>
	</div>
	<div style="display: none;" class="none">style的display为"none"的div</div>
	<div class="hide">class为"hide"的div</div>
	<div>
		包含input的type为"hidden"的div<input type="hidden" size="8">
	</div>
	<div id="mover">正在执行动画的div元素.</div>
</body>
</html>


_noname
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery内容过滤选择器用法分析
10-24
主要介绍了jQuery内容过滤选择器用法,实例分析了:contains()、:has()、:empty()、:parent等内容过滤选择器的使用技巧,需要的朋友可以参考下
【JavaWeb】 JavaScript 开发利器之 jQuery
最新发布
dandelionl_的博客
08-08 1384
jQuery 通过简化 JavaScript 的编码方式和提供丰富的功能集，让开发者可以更快速、高效地构建交互性强、功能丰富的网页应用程序。它的广泛应用和成熟的生态系统使得它成为了现代网页开发中不可或缺的一部分。
jQuery前端开发学习指南(09)——jQuery内容过滤选择器
谷哥的小弟
03-24 220
内容过滤选择器用于根据元素内部文本进行选择。
jquery内容过滤选择器：内容过滤选择器它是根据元素内部文本内容进行选中。
boss_way的博客
11-01 4529
1.1． 内容过滤选择器 内容过滤选择器它是根据元素内部文本内容进行选中。   :Contains（text）：匹配包含给定文本的元素 :Empty：匹配所有不包含子元素或者文本的空元素 :Has(selector):匹配含有选择器所匹配的元素的元素 :addClassL(“类名”)：给所有的标签添加类名 :Parent：匹配含有子元素或者文本的元素 示例： $(fu
jQuery(二)——jQuery选择器之内容过滤选择器
HangHug_L的博客
01-30 364
2. 内容过滤选择器 :contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含子元素或者文本的空元素　　即，空元素 :parent 匹配含有子元素或者文本的元素 　　　即，非空元素 :has(selector) 匹配含有选择器所匹配的元素的元素 ， 仅在其子元素中匹配 :empty和:parent是一对相反的选择。empty选择空元素，parent选择非空的元素。 <div></div> 一对双标签里什么都没有，就是空元素。 如果有一个空格(文
jQuery选择器(二)（基本过滤器，内容过滤器，可见过滤器）
m0_70571756的博客
05-22 5598
jQuery是一个快速、简洁的 JavaScript 框架，是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess，DoMore”，即倡导写更少的代码，做 更多的事情。jQuery封装了 JavaScript 常用的功能代码，提供一种简便的 JavaScript 🍋jQuery选择器 🥙过滤器 🧀1.基本过滤器 🍤2.内容过滤器 🧁3.可见过滤器 ☕️4.属性过滤器 🍹5.子元素过滤器
jQuery内容过滤选择器用法示例
10-21
主要介绍了jQuery内容过滤选择器用法,结合实例形式分析了jQuery中使用contains、empty、has、parent等进行内容过滤的操作技巧,需要的朋友可以参考下
使用jQuery内容过滤选择器选择元素实例讲解
10-27
内容过滤选择器：根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位，接下来为大家详细介绍下jQuery选择器，感兴趣的朋友可以参考下哈
JQuery中属性过滤选择器用法实例分析
10-24
主要介绍了JQuery中属性过滤选择器用法,实例分析了jQuery属性过滤选择器的相关使用技巧,需要的朋友可以参考下
JQuery中的基本过滤选择器
m0_58986621的博客
06-17 2573
first：获取第一个元素 语法：$(" li:first")选取所有<li>元素中的第一个<li>元素
7. jQuery基本过滤选择器
LiGuogang
11-28 234
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;使用jQuery基本过滤选择器选择元素&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt;
jQuery基本过滤选择器
dly的博客
12-19 366
jQuery基本过滤选择器**过滤选择器格式 “：关键字”**:first , 第一个 :last ,最后一个 :eq(index) ，获得指定索引 :gt(index) 大于 :lt(index) 小于 :even 偶数，从 0 开始计数。例如：查找表格的1、3、5…行（即索引值0、2、4…） :odd 奇数 :not(selector) 去除所有与给定选择器匹配的元素 :h
jQuery内容过滤选择器
恋恋玫瑰花
08-11 406
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery内容过滤选择器&lt;/title&gt; &lt;script type="text/javascript" src=&quo
Jquery第三章 过滤选择器
热门推荐
chuanlinlaile的博客
03-16 1万+
第三章 过滤选择器一.基本过滤器写法 描述 $(‘p:first’) 选取页面元素内的第一个p元素 $(‘p:last’) 选取页面元素内的最后一个p元素 $(‘p:not(.select)’) 选取选择器不是select的p元素 $(‘p:even’) 选取索引是偶数的P元素(索引从0开始) $(‘p:odd’) 选取索引是奇数的p元素(索引从0开始) $(‘p:eq(index)’...
jQuery过滤选择器详解
Ydoing的专栏
08-19 246
基本过滤选择器 选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first').css("background","#bfa"); }) 选取最后一个元素(:last) //选择最后一个div元素. $('#...
JQuery内容过滤选择器
零怀念的博客
08-26 2555
常见的内容过滤选择器 NO. 选择器 描述 1 :contains(文本) 包含括号内的文本的元素集合（括号内要加引号） 2 :empty 空元素（不包含子元素或文本的元素）集合 3 :has（选择器） 包含括号中选择器选中的元素集合的元素集合 4 :parent 含有子元素或者文本的元素集合 示例：运用以上选择器 ...
jQuery(二)——jQuery选择器之基本的过滤选择器
HangHug_L的博客
01-30 492
1. 基本的过滤选择器 :first 获取第一个元素 :last 获取最后个元素 :not(selector) 去除所有与给定选择器匹配的元素 　　 即，取反 :even 匹配所有索引值为偶数的元素，从 0 开始计数 :odd 匹配所有索引值为奇数的元素，从 0 开始计数 :eq(index) 匹配一个给定索引值的元素 :gt(index) 匹配所有大于给定索引值的元素 :lt(index) 匹配所有小于给定索引值的元素 :header 匹配如 h1, h2, h3 之类的标题元素 :animated
jq过滤选择器
qq_33530408的博客
07-23 264
引入jq文件jquery-1.12.4.js &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&a
前端基础 -JQuery之 基本过滤选择器
阿甘兄
03-17 604
JQuery基本过滤选择器 基本过滤选择器： :first 第一个 :last 最后一个 :even 偶数 :odd 奇数 :eq() =index :gt() &amp;amp;gt;index :lt() &amp;amp;lt;index 效果图： 代码 &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Transitional/
jQuery过滤选择器实例
06-07
好的，下面是一个 jQuery 过滤选择器的示例： 假设有一段 HTML 代码如下： ```html <ul> <li class="item">Item 1</li> <li class="item">Item 2</li> <li class="item">Item 3</li> <li class="item special">Special Item</li> </ul> ``` 我们可以使用 jQuery 的过滤选择器来选择特定的元素。例如： 1. 选择所有的 `<li>` 元素： ```js $('li'); ``` 2. 选择 class 为 `item` 的 `<li>` 元素： ```js $('li.item'); ``` 3. 选择 class 为 `special` 的 `<li>` 元素： ```js $('li.special'); ``` 4. 选择第一个 `<li>` 元素： ```js $('li:first'); ``` 5. 选择最后一个 `<li>` 元素： ```js $('li:last'); ``` 6. 选择第二个 `<li>` 元素： ```js $('li:eq(1)'); ``` 7. 选择包含文本 `Item 1` 的 `<li>` 元素： ```js $('li:contains("Item 1")'); ``` 8. 选择所有偶数位置的 `<li>` 元素： ```js $('li:even'); ``` 9. 选择所有奇数位置的 `<li>` 元素： ```js $('li:odd'); ``` 以上就是一些 jQuery 过滤选择器的例子。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值