jQuery过滤选择器

最新推荐文章于 2023-07-22 08:42:18 发布
最新推荐文章于 2023-07-22 08:42:18 发布
阅读量246 收藏
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71385552/article/details/130822961
版权

一、过滤选择器的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQ过滤选择器</title>
		<!-- 引入JQ类库 -->
		<script src="js/jquery.min.js"></script>
		<!-- 写入jq代码 -->
		<script type="text/javascript">
			$(function(){
				//属性过滤选择器,选择偶数行（索引第一行为0）
				var a1=$("ul>li:even");
				a1.css("color","blue");
				
				//使用当前元素之外的所有相邻元素
				$("ul>li:first").siblings().css("color","red");
				
			});
		</script>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>橘子</li>
			<li>香蕉</li>
			<li>香梨</li>
			<li>提子</li>
			<ol>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ol>
		</ul>
	</body>
</html>

运行效果图：

二、表单过滤选择器 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单过滤选择器</title>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			/* $(function(){
				//$("input[type='text']").val("JQ设置的值");
				
				//获取下面表单的value值
				var date=$("input[type='text']").val();
				alert(date);
			}); */
			$(function(){
				$("input[type='text']:enabled").val("JQ上设置可用表单的值");
				$("input[type='text']:disabled").val("JQ设置不可用表单的值");
				
				$("#a1").val("通过ID选择器设置值");
				
				//按钮事件
				$("#btn").click(function(){
					var sex=$("input[type='radio']:checked").val();
					alert(sex);
					
					var hobby=$("input[type='checkbox']:checked");
					for(var i=0;i<hobby.length;i++){
						alert(hobby[i].value);
					}
				});
			});
		</script>
	</head>
	<body>
		<form action="#" method="post">
			可用表单：<input type="text" name="a1" id="a1" value="11" /><br />
			不可用表单：<input type="text" name="a2" value="22" disabled="true" /><br />
			单选框：<input type="radio" name="sex" value="0" checked="true"/>男
					<input type="radio" name="sex" value="1" />女<br />
			复选框：<input type="checkbox" name="hobby" value="唱歌" />唱歌
			<input type="checkbox" name="hobby" value="跳舞" />跳舞
			<input type="checkbox" name="hobby" value="篮球" />篮球<br/>
			下拉列表：<select>
						<option value ="河南">河南</option>
						<option value ="河北">河南</option>
						<option value ="山东">河南</option>
						<option value ="山西">河南</option>

					 </select>
			<br />
			<input type="button" id="btn" value="提交" />


		</form>
	</body>
</html>

运行效果图：

 三、知识点练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#context{
				width: 200px;
				height: 200px;
				background-color: coral;
			}
		</style>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery.min.js"></script>
		<!-- 书写js代码 -->
		<script type="text/javascript">
			//加载文档
			$(function(){
				//1.按钮点击事件
				$("#btn").click(function(){
					//设置第一个li为红色，其他元素为蓝色
					$("ul>li:first").css("color","red").siblings().css("color","blue");
				});
				
				$("#toWidth").click(function(){
					$("#context").css("width","500px")
				});
				$("#toHeigth").click(function(){
					$("#context").css("height","500px");
				});
				$("#toHidden").click(function(){
					//淡入效果
					$("#context").fadeOut(1000);
					//向上隐藏效果
					//$("#context").slideUp();
				});
				$("#toShow").click(function(){
					//淡出效果
					$("#context").fadeIn(1000);
					//向下展示效果
					//$("#context").slideDown();
				});
				$("#toToggle").click(function(){
					//让div元素切换
					$("#context").slideToggle();
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>橘子</li>
			<li>香蕉</li>
			<li>香梨</li>
			<li>提子</li>
		</ul>
		<button id="btn">按钮</button>	<br>
		
		<hr >
		<button id="toWidth">变宽</button>
		<button id="toHeigth">变高</button>
		<button id="toHidden">隐藏</button>
		<button id="toShow">显示</button>
		<button id="toToggle">切换</button>
		
		<div id="context">
			
		</div>
	</body>
</html>

运行效果图：

 

52Hertzℕℕ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery中过滤选择器
you4580的专栏
03-22 358
语法： :header 获得标题（h1~h6）元素，固定写法。语法： :not(selector) 不包括指定内容的元素。语法： :first 获得选择的元素中的第一个元素。语法： :last 获得选择的元素中的最后一个元素。语法： :gt(index) 大于指定索引元素。语法： :lt(index) 小于指定索引元素。语法： :even 偶数，从 0 开始计数。语法： :eq(index) 指定索引元素。语法： :odd 奇数，从 0 开始计数。
jQuery基础——使用选择器—2过滤选择器
weixin_57575133的博客
11-03 853
过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器的语法形式与CSS的伪类选择器的语法格式相同，以冒号作为前缀标识符。根据需求的不同，过滤选择器又可以分为定位过滤器、内容过滤器和可见过滤器。
JQuery全部过滤选择器详细介绍下
最新发布
业精于勤，荒于嬉
07-22 821
● 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素1、[attribute] 用法: $(“div[id]”) ; 返回值 集合元素2、[attribute=value] 用法: $(“input[name=‘newsletter’]”).attr(“checked”, true); 返回值 集合元素3、[attribute!=value] 用法: $(“input[name!=‘newsletter’]”).attr(“checked”, true); 返回值集合元素4、[attribute^=
05-jquery基本过滤器
伊甸园的博客
01-20 919
$(“选择器”).事件名称（事件的处理函数）$(“选择器”): 选择0或多个dom对象，并绑定事件。语法：$(:“选择器>option:selected”)语法： $ (“:checkbox:checked”)语法：$ (“:text:disabled”)语法：$ (“:text:enabled”)语法：$(“选择器：eq(下标)”)语法：$(“选择器：gt(下标)”)语法：$(“选择器：lt(下标)”)语法：$(“选择器：first”)语法：$(“选择器：last”)
jQuery选择器(二)（基本过滤器，内容过滤器，可见过滤器）
m0_70571756的博客
05-22 5635
jQuery是一个快速、简洁的 JavaScript 框架，是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess，DoMore”，即倡导写更少的代码，做 更多的事情。jQuery封装了 JavaScript 常用的功能代码，提供一种简便的 JavaScript 🍋jQuery选择器 🥙过滤器 🧀1.基本过滤器 🍤2.内容过滤器 🧁3.可见过滤器 ☕️4.属性过滤器 🍹5.子元素过滤器
jQuery过滤选择器详解
10-24
本文主要给大家详细介绍了jQuery过滤选择器，包含基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器等，十分全面,需要的朋友可以参考下
jQuery过滤选择器用法示例
11-22
本文实例讲述了jQuery过滤选择器用法。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
jQuery过滤选择器用法分析
10-24
主要介绍了jQuery过滤选择器用法,实例分析了:first、:last、:odd、:even等等常用的过滤选择器的使用技巧,非常具有实用价值,需要的朋友可以参考下
jQuery过滤选择器经典应用
10-21
jQuery过滤选择器是jQuery库中一个非常强大的功能，它允许开发者根据特定条件筛选DOM元素，以便进行更加精确的操作。在上述实例中，我们看到的是如何使用过滤选择器来实现元素的显示与隐藏，这是一个非常实用的功能...
jQuery11(过滤器的3个练习)
xbc1213的博客
02-06 399
过滤器练习1题目:点击按钮变色,改变字体大小.实例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
Jquery4 过滤选择器
ako881010的博客
09-25 130
学习要点： 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似 CSS3里的伪类，可以让不支持 CSS3 的低版本浏览器也能支持。和常规选择器一样，jQuery 为了更方便开发者使用，提供了很多独有的过滤器。 一．基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DO...
jQuery事件篇---过滤选择器 & 表单选择器
weixin_30916125的博客
07-15 292
内容提纲： 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易，转载请注明出处！ 过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似与 CSS3(http://t.mb5u.com/css3/)里的伪类，可以让不支持 ...
标签属性匹配 事件
iteye_8184的博客
07-06 161
         1.  attribute^=value    匹配给定的属性是以某些值开始的元素 HTML 代码: &lt;input name="newsletter" /&gt; &lt;input name="milkman" /&gt; &lt;input name="newsboy" /&gt; &lt;input name="letter_man&qu
JQuery选择器 表单对象属性过滤选择器
YuYuLingYan的博客
08-05 264
HTML部分 <body> <h3> 表单对象属性过滤选择器.</h3> <form id="form1" action="#"> <button type="reset">重置所有表单元素</button> <br /><br /> <button id="btn1">对表单内 可用input 赋值操作.</button>
jquery选择器之过滤选择器
qq_28596151的博客
05-16 1333
1、jquery过滤选择器    1.1、:first选择器。    解释：选中匹配到的所有元素的第一个元素    举例：$("div:first")    文档中可能不止一个div元素，$("div")选中文档中所有的div元素，然后在这里面过滤出第一个div元素，返回给调用者，供其使用。    1.2、:last选择器    这个功能和:first选择器功能基本一样，差别是一个返回选中的第一个...
jQuery选择器 过滤选择器(一.基本过滤选择器)
妖怪的博客
02-17 805
1.:first;2.:last;3.;not(selector);4.:even;5.:odd;6.:eq(index);7.:gt(index);8.:lt(index);9.:header;10.:animated;11.:focus;
jQuery表单过滤选择器
u013313232的博客
10-19 318
jQuery表单过滤选择器 /** :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden 表单对象的属性 :enabled :disabled :checked :selected */ 加粗样式 //1.对表单内 可用input 赋值操作 $("#btn1").click(function(){.
jQuery过滤选择器实例
06-07
好的，下面是一个 jQuery 过滤选择器的示例： 假设有一段 HTML 代码如下： ```html <li class="item">Item 1 <li class="item">Item 2 <li class="item">Item 3 <li class="item special">Special Item ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值