JQuery选择器

最新推荐文章于 2022-11-10 08:55:36 发布
最新推荐文章于 2022-11-10 08:55:36 发布
阅读量145 收藏
点赞数
分类专栏： jq 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43553800/article/details/115450517
版权

1. 使用基础选择器
使用Id选择器选取HTML元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ID选择器的示例</title>
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>
	<body>
		 <input type="text" id="testInput" name="test" value=""/>
  		 <input type="button" value="输入的值为"/>
  		 <script type="text/javascript">
		   $(document).ready(function(){
				$("input[type=button]").click(function(){		//为按钮绑定单击事件
					var inputValue = $("#testInput").val();  	//获取文本输入框的值
			 		alert(inputValue);
				});
		   });
		 </script>
	</body>
</html>

在这里插入图片描述

使用标签名选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素选择器的示例</title>
		<style type="text/css">
			img{
				border:1px solid #777;
			   }
			div{
				padding:5px;
				font-size:12px;
				}	
		</style>
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>
	<body>
		<div><img src="img/strawberry.jpg"/>这里种植了一棵草莓</div>
        <div><img src="img/fish.jpg"/>这里养殖了一条鱼</div>
		<input type="button" id="button" value="若干年后" />
		<script type="text/javascript">
		$(document).ready(function(){
		//1、为button绑定点击事件，click方法。
			$("#button").click(function(){
		//2、将两个DIV标记的html内容进行替换，html()方法，innerHTML。注意双引号要变为单引号。
				$("div").eq(0).html("<img src='img/strawberry1.jpg'>这里长出了一片草莓");
				$("div").get(1).innerHTML= "<img src='img/fish1.jpg'>这里的鱼没有了";
			});
		});
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

根据元素的css类选择HTML元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>类名选择器的示例</title>
		<style type="text/css">
			div{
					border:1px solid #003a75;
					background-color:#cef;
					margin:5px; 
					height:35px; 
					width:75px;
					float:left;
					font-size:12px;
					padding:5px;
			   }
		</style>
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>
	<body>
		<div class="myClass">注意观察我的样式</div>
		<div>我的样式是默认的</div>
		<script type="text/javascript">
			$(document).ready(function() {
				//根据注释补全此处代码
				//选取Dom元素：myClass,用变量承接。
				var $myClass = $(".myClass");
				//为选取的Dom元素设置背景颜色:#C50210
				$myClass.css("background-color","#C50210");
				//为选取的Dom元素设置文字颜色:#FFF
				$myClass.css("color","#FFFF00");
			});
		</script>
	</body>
</html>

在这里插入图片描述

选择所有的HTML元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>复合选择器的示例</title>
		<style type="text/css">
			.default{
				border:1px solid #003a75;
				background-color:yellow;
				margin:5px; 
				width:90px;
				float:left;
				font-size:12px;
				padding:5px;
			}
			.change{
				background-color:#C50210;
				color:#FFF;
			}
		</style>
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>
	<body>
		<p class="default">p元素</p>
		<div class="default">div元素</div>
		<span class="default" id="span">ID为span的元素</span>
		<input type="button" value="为div元素和ID为span的元素换肤" />
		<script type="text/javascript">
			$(document).ready(function() {
				//绑定按钮的单击事件，click方法。因为没有任何标志，故使用input[type=button]属性选择器。
				$("input[type=button]").click(function(){
				//添加所使用的CSS类,change。
					$("div,#span").addClass("change");
				});
			});
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

同时选择多个HTML元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ancestor descendant选择器的示例</title>
		<style type="text/css">
			body{
				margin:0px;
			}
			#bottom{
				background-image:url(img/bg_bottom.jpg);	/*设置背景*/
				width:800px;	/*设置宽度*/
				height:58px;	/*设置高度*/
				clear: both;	/*设置左右两侧无浮动内容*/
				text-align:center;	/*设置居中对齐*/
				padding-top:10px;	/*设置顶边距*/
				font-size:9pt;	/*设置字体大小*/
			}
			.copyright{
				color:#FFFFFF;	/*设置文字颜色*/
				list-style:none;	/*不显示项目符号*/
				line-height:20px;	/*设置行高*/
			}
		</style>
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>
	<body>
		<div id="bottom">
			<ul>
				<li>技术服务热线：400-675-1066 传真：0431-84972266 企业邮箱：mingrisoft@mingrisoft.com</li>
				<li>Copyright &copy; www.mrbccd.com All Rights Reserved! </li>
			</ul>
		</div>
		<ul>
			<li>技术服务热线：400-675-1066 传真：0431-84972266 企业邮箱：mingrisoft@mingrisoft.com</li>
			<li>Copyright &copy; www.mrbccd.com All Rights Reserved! </li>
		</ul>
		<script type="text/javascript">
			$(document).ready(function(){
			       //为div元素的子元素ul添加样式
			      $("div ul").addClass("copyright");
			});
		</script>
	</body>
</html>

在这里插入图片描述

2. 使用层次选择器

使用parent>child选择器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>parent>child选择器的示例</title>
		<style type="text/css">
			input{
				margin:5px;						/*设置input元素的外边距为5像素*/
			}
			.input {
				font-size: 12pt;					/*设置文字大小*/
				color: #333333;						/*设置文字颜色*/
				background-color:#cef;	/*设置背景颜色*/
				border: 1px solid #000000;	/*设置边框*/
			}
		</style>
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>
	<body>
		<form id="form1" name="form1" method="post" action="">
			  姓&nbsp;&nbsp;名：<input type="text" name="name" id="name" />
			  <br />
			  籍&nbsp;&nbsp;贯：<input name="native" type="text" id="native" />
			  <br />
			  生&nbsp;&nbsp;日：<input type="text" name="birthday" id="birthday" />
			  <br />
			  E-mail：<input type="text" name="email" id="email" />
			  <br />
			  <span>
			  <input type="button" name="change" id="change" value="换肤"/>
			  </span>
			  <input type="button" name="default" id="default" value="恢复默认"/>
			  <br /> 
		</form>
		<script type="text/javascript">
			$(document).ready(function(){
				//绑定"换肤"按钮的单击事件,#change click方法
				$("#change").click(function(){
				//为表单元素的直接子元素input添加样式,form>input, .input样式
					$("form>input").addClass("input");
				});
			  	//绑定“恢复默认”按钮的单击事件，#default click方法
			  	$("#default").click(function(){
			  	//移除为表单元素的直接子元素input添加的样式,	form>input, .input样式
			  		$("form>input").removeClass("input");
			  	});	
			});
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

使用pre+next选择器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>prev + next选择器的示例</title>
		<style type="text/css">
			.background{background:#cef}
			body{font-size:12px;}
		</style>
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>
	<body>
		<div>
		    <label>第一个label</label>
		    <p>第一个p</p>
		    <fieldset>
		        <label>第二个label</label>
		        <p>第二个p</p>
		    </fieldset>
		</div>
		<p>div外面的p</p>
		<script type="text/javascript">
			$(document).ready(function() {
				//为lable后面的一个同辈p标记添加样式：background.
				$("label+p").addClass("background");
		
				
			});
		</script>
	</body>
</html>

在这里插入图片描述

使用pre~siblings选择器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>prev ~ siblings选择器的示例</title>
		<style type="text/css">
			.background{background:#cef}
			body{font-size:12px;}
		</style>
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>
	<body>
		<div>
		    <p>第一个p</p>
		    <p>第二个p</p>
		</div>
		<p>div外面的p</p>
		<p>div外面的p2</p>
		<script type="text/javascript">
			$(document).ready(function() {				
		     //为div后面的所有同辈p标记添加样式：background.
		     $("div~p").addClass("background");
				
			});
		</script>
	</body>
</html>

在这里插入图片描述

代码不满意头发掉满地
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
Jquery 获得<input type="text" id="test">中的value
weixin_34004750的博客
01-20 93
2019独角兽企业重金招聘Python工程师标准>>> ...
JS获取页面所有input type=“text”的ID和value
bao500600的博客
01-12 1513
function getdate(){ //获取ID为cargetdate下面的input为text的ID和value，如果是页面所有的input则将document.getElementById("cargetdate")换为document即可var list=document.getElementById("cargetdate").getElementsByTagName(...
【input 标签的 type 属性详解】
热门推荐
Hey_Coder
09-30 5万+
input 标签的 type 属性详解1. input 输入标签的type 属性1.1 input 标签的 type类型 属性的常用属性值⑴ type="text"⑵ type="button"⑶ type="checkbox"⑷ type="file"⑸ type="hidden"⑹ type="image"⑺ type="password"⑻ type="radio"⑼ type="rese...
详解jQuery选择器
10-20
在深入了解具体的jQuery选择器之前，首先要了解jQuery本身是什么。jQuery是一个快速、简洁的JavaScript框架，它通过封装JavaScript的常用功能，提供一种简洁的编程模式，使得HTML文档的操作、事件处理、动画设计和...
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery 选择器
01-19
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
Jquery选择器 $实现原理
10-29
要了解JQuery选择器$的实现原理，首先需要理解JavaScript中函数作用域与闭包的概念。JQuery是一个封装了大量DOM操作的JavaScript库，它将常用的DOM操作方法封装成函数，并通过$符号作为快捷访问方式。 JQuery在加载...
jquery 选择器部分整理
10-29
jQuery选择器是jQuery库中最基本且强大的特性之一，它允许开发者快速准确地选取和操作DOM元素。在详细解读jQuery选择器之前，首先需要了解jQuery本身是一个JavaScript库，它通过简化的选择器和方法来简化HTML文档...
jQuery选择器全面总结
10-26
这篇文章将对jQuery选择器进行全面总结，帮助开发者更好地理解和运用这些工具。 首先，我们要了解基本选择器，这是jQuery选择器的基础。包括： 1. **ID选择器**: 使用`#`符号后跟元素的ID，如`jQuery("#ID")`，它...
jquery选择器大全 全面详解jquery选择器
10-26
jQuery选择器的设计灵感来源于CSS（层叠样式表）选择器，但功能更加强大，允许开发者以简洁的语法获取特定的DOM元素。 1. **基本选择器** - `#id`：通过元素的ID属性来选取单个元素，如`$("#myID")`。 - `element...
jQuery选择器及jquery案例详解(必看)
10-22
本文将重点介绍jQuery选择器的种类和使用，以及通过具体的案例来深入理解jQuery选择器的应用。 首先，jQuery选择器是jQuery库的核心部分之一，它允许开发者通过不同的语法来选择页面上的元素。选择器可以分为几大类...
input标签里面type常用属性（注册登录表单常用元素）
dayexiaofan的博客
01-14 1万+
之前写一些小项目的时候，在表单这一块因为知道的type属性就text、password、button、submit等一些值，而且form表单也应用的不是很灵活，所以通过简单的学习，认识到以前写的form表单有多搞笑（连type=data都不知道）。 现在，就对form表单里常用的元素进行整理。 type值 代表的含义 text 文本 password 密码 button ...
jQuery选择器方法总结
最新发布
weixin_67271870的博客
11-10 2086
("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素。$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签。
用Jquery取label标签时要用$("#ID名称").text()取值
七号空间
01-21 4659
用jQuery取htm标签label时要用$(‘#lbl’).text();取值， 而赋值则是$(‘#lbl’).html(‘http://www.ns-talk.com’); 文本框取值 赋值 是 $(‘#txt’).val(),而label标签不一样， 同理div等也是...
jquery基本选择器：id选择器、class选择器、标签选择器、通配符选择器
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-28 6541
全栈工程师开发手册 （作者：栾鹏） jquery系列教程1-选择器全解jquery基本选择器jquery基本选择器，包括id选择器、class选择器、标签选择器、通配符选择器，同时配合选择器的空格、逗号等语法，可以实现大部分需要的选择功能。 代码如下：$("#myid"); //根据id获取元素，等价于document.getElementById(), $
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值