Web 前端学习 之jQuery基本过滤器

最新推荐文章于 2022-11-04 21:57:15 发布
最新推荐文章于 2022-11-04 21:57:15 发布
阅读量160 收藏 1
点赞数
分类专栏： # web开发学习 文章标签： html jquery web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Weary_PJ/article/details/107630027
版权

Web 前端学习 之jQuery基本过滤器

介绍

在这里插入图片描述

基本过滤器

first

在这里插入图片描述

last

在这里插入图片描述

not()

在这里插入图片描述

even 偶数

### not()

odd 奇数

在这里插入图片描述

eq equal 等于

在这里插入图片描述

gt greater than 大于

在这里插入图片描述

lt less than 小于

在这里插入图片描述

header 标题

在这里插入图片描述

animated 正在执行动画效果

在这里插入图片描述

案例

需求如下
在这里插入图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<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="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
			});
			
			$(document).ready(function(){
				//1.选择第一个 div 元素  
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

				//2.选择最后一个 div 元素
				$("#btn2").click(function(){
					$("div:last").css("background", "#bbffaa");
				});

				//3.选择class不为 one 的所有 div 元素
				$("#btn3").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");
				});

				//4.选择索引值为偶数的 div 元素
				$("#btn4").click(function(){
					$("div:even").css("background", "#bbffaa");
				});

				//5.选择索引值为奇数的 div 元素
				$("#btn5").click(function(){
					$("div:odd").css("background", "#bbffaa");
				});

				//6.选择索引值为大于 3 的 div 元素
				$("#btn6").click(function(){
					$("div:gt(3)").css("background", "#bbffaa");
				});

				//7.选择索引值为等于 3 的 div 元素
				$("#btn7").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});

				//8.选择索引值为小于 3 的 div 元素
				$("#btn8").click(function(){
					$("div:lt(3)").css("background", "#bbffaa");
				});

				//9.选择所有的标题元素
				$("#btn9").click(function(){
					$(":header").css("background", "#bbffaa");
				});

				//10.选择当前正在执行动画的所有元素
				$("#btn10").click(function(){
					$(":animated").css("background", "#bbffaa");
				});
				//11.选择没有执行动画的最后一个div
				$("#btn11").click(function(){
					$("div:not(:animated):last").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="选择第一个 div 元素" id="btn1" />
		<input type="button" value="选择最后一个 div 元素" id="btn2" />
		<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
		<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
		<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
		<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
		<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
		<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
		<input type="button" value="选择所有的标题元素" id="btn9" />
		<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />		
		<input type="button" value="选择没有执行动画的最后一个div" id="btn11" />


		<h3>基本选择器.</h3>
		<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>
Joker-Tong
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JQuery过滤器
我的1024的博客
11-26 2416
在JQuery中可以使用过滤器对选取的数据进行过滤，选择更加明确的元素，JQuery过滤器的通常语法：$("选择器:过滤器") 基本过滤器： ：first(可以找到匹配的第一个元素) &lt;html&gt; &lt;head&gt; &lt;script src="jquery.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&am
jQuery基础过滤器（Basic Filter）
weixin_56418710的博客
07-17 404
jQuery基础过滤器学习
jQuery基础——使用过滤器—1过滤
weixin_57575133的博客
11-04 2734
jQuery选择器能够模仿CSS和XPath语法，提供高效、准确匹配元素的方法，jQuery过滤器是一系列简单、实用的jQuery对象方法，建立在选择器基础上对jQuery对象进行二次过滤。在jQuery框架中，过滤器通过Sizzle.filter子类实现，包含过滤、查找和串联三类操作行为。
Jquery 查询条件动态过滤器
weixin_34088838的博客
12-09 256
2019独角兽企业重金招聘Python工程师标准>>> ...
过滤器实现代码,每一行都有注释
砖业手艺混子的博客
09-20 590
过滤器的简单实现,不废话,直接上代码 import javax.servlet.*; import javax.servlet.annotation.WebFilter;//要导入javaee-api-7.0.jar包 import javax.servlet.http.HttpServletRequest;// import javax.servlet.http.HttpServletResponse;// import java.io.IOException; @WebFilter(urlPatter
jQuery之【过滤器】
weixin_48485216的博客
05-07 786
一、概述 1、过滤器就是过滤条件，对已经定位到数组中的DOM对象进行过滤筛选，过滤条件不能独立出现在jQuery函数，如果使用只能出现在选择器后方。 2、jQuery对象中存储的DOM对象顺序与页面标签声明位置关系为顺序关系。按照出现的顺序 二、基本过滤器 1、选择第一个first，保留数组中第一个DOM对象 语法：$("选择器:first") 2、选择最后一个last，保留数组中最后一个DOM对象 语法：$("选择器:last") 3、选择数组中指定对象 语法：$("选择器:e
jQuery选择器(二)（基本过滤器，内容过滤器，可见过滤器）
m0_70571756的博客
05-22 5598
jQuery是一个快速、简洁的 JavaScript 框架，是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess，DoMore”，即倡导写更少的代码，做 更多的事情。jQuery封装了 JavaScript 常用的功能代码，提供一种简便的 JavaScript 🍋jQuery选择器 🥙过滤器 🧀1.基本过滤器 🍤2.内容过滤器 🧁3.可见过滤器 ☕️4.属性过滤器 🍹5.子元素过滤器
web前端vue filter 过滤器
11-27
vue的过滤器通常用在一些常见的文本格式化，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。 比如给价格自动加上中文的钱的字符“￥”或者是给一个时间段或（时间戳）相互之间的转换过滤。 在javascript和...
web前端开发JQuery常用实例代码片段(50个)
11-23
本文给大家展示50个jquery代码片段，这些代码...//允许你减少集合中的匹配元素的过滤器， //只剩下那些与给定的选择器匹配的部分。在这种情况下， //查询删除了任何没（:not）有（:has） //包含class为“selected”（.s
jQuery入门精讲
06-10
本课程帮助学员掌握jQuery的基本用法及技能，使学员在前端开发过程中事半功倍，从而更加高效的完成开发工作。【课程特色】 1、课程设计循序渐进、讲解细致、通俗易懂、非常适合自主学习 2、教学过程实例丰富、强调...
小型Web项目《家乐福网上超市》源码
12-22
后端使用JSP+Servlet+Tomcat，前端使用HTML+CSS+JS+JQuery实现的一个小型Web家乐福网上超市，可用于二次开发或课程作业答辩，易扩展和修改，包含图片验证码验证、注册登陆、加入购物车、校验登陆过滤器防止未登陆的...
基于Java web的图书管理系统
04-05
项目名称：基于Java web的图书管理系统（Library) 当前版本：V2.0.2版本 难度等级：✩✩  复杂程度：✩✩✩✩  用户类型：双角色（普通用户和管理员） 设计模式：MVC（jsp+servlet+javabean) 项目架构：B/S架构 ...
jQuery--过滤器【基本过滤器语法使用】详细代码及注释
m0_55877024的博客
02-09 469
过滤器 过滤器是一个字符串，用了筛选dom对象的，过滤器是和选择器一起使用的，在选择了dom对象后，在进行过滤筛选。 1---基本过滤器：使用dom对象在数组中的位置，作为过滤条件。 1)：选择数组中第一个dom成员 语法：$("选择器：first") 2)：选择数组中最后一个成员 语法：$("选择器：last") 3)：选择等于下标的dom成员 语法：$("选择器：eq(下标)") 4)：选择大于某个下标的所有成员 语法：$("选择器：gt(下标)") 5)：选择小于某个下标的所有成员 语法：$("
JQuery-基本过滤器详解
兮遥
08-20 917
jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系 <div>1</div> dom1 <div>2</div> dom2 <div>3</div> dom3 $("div") = [dom1,dom2,dom3] 过滤器就是过滤条件，对已经定位到数组中DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。 基本过滤器 ...
jq的基本过滤器
jx1234562的博客
09-07 966
本文介绍jq的基本过滤器，其实个人觉得过滤器和选择器和层级选择器基本上都大同小异，性质都是一样的选择元素，并对元素的一些属性作改动过滤器有first，last,even,odd,见名知意我们可以知道first是选择第一个，last是选择最后一个，even选择偶数个（0，2，4.。。。），odd(奇数个) 具体的代码实现:       这里代码有点长所以请读者见谅哈！     ...
【jQuery】---基本过滤器
lyn
06-30 1146
【前言】      最近小编正在学习jQuery的知识，总结一下最近在项目中用到的知识。【正文】     jQuery first() 方法        first() 方法返回被选元素的首个元素。          下面的例子选取首个 &lt;ul&gt; 元素内部的第一个 &lt;li&gt; 元素：$(document).ready(function(){ $("ul li").fir...
JQuery基本过滤器
weixin_34372728的博客
11-12 425
转载于:https://www.cnblogs.com/tcpblog/p/9949286.html
web前端之添加过滤器
ningmeng1227的博客
09-20 1275
1.new-> filter例子1：设置编码过滤器：自动设置成utf-8有用的方法：doFilter() 方法 web.xml里面有filter的配置<!-- 转换乱码 --> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframewo
前端过滤html，css，js
qq_32721653的博客
09-10 685
&lt;div class="container-fluid"&gt;&lt;!-- container-fluid --&gt; &lt;div class="row"&gt;        &lt;div class="col-md-9"&gt;                           &lt;script&gt;(adsbygoogle =
web前端学习（十七
最新发布
10-20
根据提供的引用内容，我可以为您介绍一下Web前端学习的相关内容。 Web前端开发是指利用HTML、CSS、JavaScript等技术开发网站的过程。对于初学者来说，可以从HTML、CSS、JavaScript的基础语法和常用标签、属性、方法...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Joker-Tong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值