讲给后台程序员看的前端系列教程(58)——jQuery选择器

Mybatis研习录
笨鸟向东飞
谷哥的小弟

C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

在本节教程中,我们按照类别讲解jQuery选择器。

基本选择器

标签选择器

$("html标签名");

获得匹配标签名称的元素

id选择器

$("#id的属性值");

获得与指定id属性值匹配的元素

类选择器

$(".class的属性值");

获得与指定的class属性值匹配的元素

并集选择器

$("选择器1,选择器2,...");

获取多个选择器选中的所有元素

示 例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery选择器1</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div,span {
				width: 200px;
				height: 200px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}

			div .inner {
				width: 130px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				$("#firstButton").click(function () {
					$("#one").css("backgroundColor","red");
				});
				$("#secondButton").click(function () {
					$("div").css("backgroundColor","red");
				});
				$("#thirdButton").click(function () {
					$(".inner").css("backgroundColor","red");
				});
				$("#fourthButton").click(function () {
					$("span,#two").css("backgroundColor","red");
				});
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者:谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>

		<input type="button" value="设置id为one的元素的背景色为红色" id="firstButton" />
		<input type="button" value="设置元素名为div的所有元素的背景色为红色" id="secondButton" />
		<input type="button" value="设置class为inner的所有元素的背景色为红色" id="thirdButton" />
		<input type="button" value="设置所有的span元素和id为two的元素的背景色为红色" id="fourthButton" />
		<br /><br />

		<div id="one">
			id为one的div
		</div>

		<div id="two">
			id为two的div
			<div class="inner">class为inner的div</div>
		</div>

		<div class="one">
			class为one的div
			<div class="inner">class为inner的div</div>
			<div class="inner">class为inner的div</div>
		</div>
		<div class="one">
			class为one的div
			<div class="inner">class为inner的div</div>
		</div>

		<span class="spanone">class为spanone的span</span>
		<span class="inner">class为inner的span</span>

		<input type="button" value="class为innner的按钮" class="inner" />
	</body>
</html>

在这里插入图片描述

层级选择器

后代选择器

 $("A B");

选择A元素内部的所有B元素

子选择器

$("A > B")

选择A元素内部的所有直接子元素B

示 例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery选择器2</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div,span {
				width: 200px;
				height: 200px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}

			div .inner {
				width: 130px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				$("#firstButton").click(function () {
					$("body div").css("backgroundColor","red");
				});
				$("#secondButton").click(function () {
					$("body>div").css("backgroundColor","red");
				});
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者:谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>

		<input type="button" value="设置body内所有div的背景色为红色" id="firstButton" />
		<input type="button" value="设置body内直接子div的背景色为红色" id="secondButton" />
		<br /><br />

		<div id="one">
			id为one的div
		</div>

		<div id="two">
			id为two的div
			<div class="inner">class为inner的div</div>
		</div>

		<div class="one">
			class为one的div
			<div class="inner">class为inner的div</div>
			<div class="inner">class为inner的div</div>
		</div>
		<div class="one">
			class为one的div
			<div class="inner">class为inner的div</div>
		</div>
	</body>
</html>

在这里插入图片描述

属性选择器

属性名选择器

 $("A[属性名]");

从标签中选择包含指定属性的选择器

属性值选择器

$("A[属性名='值']");

从标签中选择指定属性等于特定值的选择器

复合属性选择器

$("A[属性名='值'][]...") 

包含多个属性条件的选择器

示 例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery选择器3</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div,span {
				width: 200px;
				height: 200px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}

			div .inner {
				width: 130px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				$("#firstButton").click(function () {
					$("div[title]").css("backgroundColor","red");
				});
				$("#secondButton").click(function () {
					$("div[title='title2']").css("backgroundColor","red");
				});
				$("#thirdButton").click(function () {
					$("div[title!='title2']").css("backgroundColor","red");
				});
				$("#fourthButton").click(function () {
					$("div[title^='tit']").css("backgroundColor","red");
				});
				$("#fifthButton").click(function () {
					$("div[title$='le3']").css("backgroundColor","red");
				});
				$("#sixthButton").click(function () {
					$("div[title*='tle']").css("backgroundColor","red");
				});
				$("#seventhButton").click(function () {
					$("div[id][title*='tle']").css("backgroundColor","red");
				});
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者:谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>

		<input type="button" value="设置含有title属性的div元素背景色为红色" id="firstButton" />
		<br />
		<input type="button" value="设置title属性值等于title2的div元素背景色为红色" id="secondButton" />
		<br />
		<input type="button" value="设置title属性值不等于title2的div元素背景色为红色(无属性title属性的元素的也将被选中)" id="thirdButton" />
		<br />
		<input type="button" value="设置title属性值以tit开头的div元素背景色为红色" id="fourthButton" />
		<br />
		<input type="button" value="设置title属性值以le3结尾的div元素背景色为红色" id="fifthButton" />
		<br />
		<input type="button" value="设置title属性值含有tle的div元素背景色为红色" id="sixthButton" />
		<br />
		<input type="button" value="选取有属性id的div元素,再在结果中设置title属性值含有tle的div元素背景色为红色" id="seventhButton" />
		<br /><br />

		<div id="one" title="title1">
			id为one的div
		</div>

		<div id="two" title="title2">
			id为two的div
			<div class="inner">class为inner的div</div>
		</div>

		<div class="one"  title="title3">
			class为one的div
			<div class="inner"  title="title4">class为inner的div</div>
			<div class="inner"  title="title5">class为inner的div</div>
		</div>
		<div class="one">
			class为one的div
			<div class="inner">class为inner的div</div>
		</div>
	</body>
</html>

在这里插入图片描述

过滤选择器

首元素选择器

:first

获得选择的元素中的第一个元素

尾元素选择器

:last

获得选择的元素中的最后一个元素

非元素选择器

:not(selector)

获取不包括指定内容的元素

偶数选择器

 :even

获取索引值为偶数的元素,索引从 0 开始计数

奇数选择器

:odd 

获取索引值为奇数的元素,索引从 0 开始计数

等于索引选择器

 :eq(index) 

获取指定索引的元素

大于索引选择器

:gt(index) 

获取大于指定索引的元素

小于索引选择器

:lt(index)

获取小于指定索引的元素

标题选择器

:header 

获得标题(h1~h6)元素

示 例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery选择器4</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div,span {
				width: 200px;
				height: 200px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}

			div .inner {
				width: 130px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				$("#firstButton").click(function () {
					$("div:first").css("backgroundColor","red");
				});
				$("#secondButton").click(function () {
					$("div:last").css("backgroundColor","red");
				});
				$("#thirdButton").click(function () {
					$("div:not(.one)").css("backgroundColor","red");
				});
				$("#fourthButton").click(function () {
					$("div:even").css("backgroundColor","red");
				});
				$("#fifthButton").click(function () {
					$("div:odd").css("backgroundColor","red");
				});
				$("#sixthButton").click(function () {
					$("div:gt(2)").css("backgroundColor","red");
				});
				$("#seventhButton").click(function () {
					$("div:eq(2)").css("backgroundColor","red");
				});
				$("#eighthButton").click(function () {
					$("div:lt(2)").css("backgroundColor","red");
				});
				$("#ninthButton").click(function () {
					$(":header").css("backgroundColor","yellow");
				});
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者:谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>

		<input type="button" value="设置第一个div元素元素背景色为红色" id="firstButton" />
		<br />
		<input type="button" value="设置最后一个div元素元素背景色为红色" id="secondButton" />
		<br />
		<input type="button" value="设置class不为one的所有div元素的背景色为红色" id="thirdButton" />
		<br />
		<input type="button" value="设置索引值为偶数的div元素的背景色为红色" id="fourthButton" />
		<br />
		<input type="button" value="设置索引值为奇数的div元素的背景色为红色" id="fifthButton" />
		<br />
		<input type="button" value="设置索引值为大于2的div元素的背景色为红色" id="sixthButton" />
		<br />
		<input type="button" value="设置索引值为等于2的div元素的背景色为红色" id="seventhButton" />
		<br />
		<input type="button" value="设置索引值为小于2的div元素的背景色为红色" id="eighthButton" />
		<br />
		<input type="button" value="设置所有的标题元素(h1-h6)的背景色为黄色" id="ninthButton" />
		<br /><br />

		<div id="one" title="title1">
			id为one的div
		</div>

		<div id="two" title="title2">
			id为two的div
			<div class="inner">class为inner的div</div>
		</div>

		<div class="one"  title="title3">
			class为one的div
			<div class="inner"  title="title4">class为inner的div</div>
			<div class="inner"  title="title5">class为inner的div</div>
		</div>
		<div class="one">
			class为one的div
			<div class="inner">class为inner的div</div>
		</div>
	</body>
</html>

在这里插入图片描述

表单过滤选择器

可用元素选择器

 :enabled 

获得可用元素

不可用元素选择器

:disabled 

获得不可用元素

多选选中选择器

 :checked 

获得复选框中选中的元素

单选选中选择器

:radio

获得单选框中选中的元素

示 例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery选择器5</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div,span {
				width: 200px;
				height: 200px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}

			div .inner {
				width: 130px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				$("#firstButton").click(function() {
					$("input[type='text']:enabled").val("enabled value");
				});
				$("#secondButton").click(function() {
					$("input[type='text']:disabled").val("disabled value");
				});
				$("#thirdButton").click(function() {
					var number = $("input[type='checkbox']:checked").length;
					alert(number);
				});
				$("#fourthButton").click(function() {
					var value = $("input[type='radio']:checked").val();
					alert(value);
				});
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者:谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>
		<input type="button" value="利用jQuery对象的val()方法设置表单内可用input元素的值为enabled value" id="firstButton" />
		<br />
		<input type="button" value="利用jQuery对象的val()方法设置表单内不可用input元素的值为disabled value" id="secondButton" />
		<br />
		<input type="button" value="利用jQuery对象的length属性获取复选框中选中的个数" id="thirdButton" />
		<br />
		<input type="button" value="利用jQuery对象的val()方法获取单选框选中的值" id="fourthButton" />
		<br /><br/>
		<form action="" method="">
			<input type="text" value="value1" disabled="disabled">
			<input type="text" value="value2">
			<input type="text" value="value3" disabled="disabled">
			<input type="text" value="value4">
			<br/><br/>
			<input type="checkbox" name="items" value="Java">Java
			<input type="checkbox" name="items" value="C++">C++
			<input type="checkbox" name="items" value="Python">Python
			<input type="checkbox" name="items" value="JavaScript">JavaScript
			<br/><br/>
			<input type="radio" name="gender" value=""><input type="radio" name="gender" value=""></form>
	</body>
</html>

在这里插入图片描述

展开阅读全文

专为程序员设计的数学课

11-11
<p> 限时福利限时福利,<span>15000+程序员的选择!</span> </p> <p> 1、原价 115 元,限时特价仅需 49 元!<br> 2、购课后添加学习助手(微信号:csdnxy68),按提示消息领取编程大礼包!并获取讲师答疑服务! </p> <p> <br> </p> <p> 套餐中一共包含5门程序员必学的数学课程(共47讲) </p> <p> 课程1:《零基础入门微积分》 </p> <p> 课程2:《数理统计与概率论》 </p> <p> 课程3:《代码学习线性代数》 </p> <p> 课程4:《数据处理的最优化》 </p> <p> 课程5:《马尔可夫随机过程》 </p> <p> <br> </p> <p> 哪些人适合学习这门课程? </p> <p> 1)大学生,平时只学习了数学理论,并未接触如何应用数学解决编程问题; </p> <p> 2)对算法、数据结构掌握程度薄弱的人,数学可以让你更好的理解算法、数据结构原理及应用; </p> <p> 3)看不懂大牛代码设计思想的人,因为所有的程序设计底层逻辑都是数学; </p> <p> 4)想学习新技术,如:人工智能、机器学习、深度学习等,这门课程是你的必修课程; </p> <p> 5)想修炼更好的编程内功,在遇到问题时可以灵活的应用数学思维解决问题。 </p> <p> <br> </p> <p> 在这门「专为程序员设计的数学课」系列课中,我们保证你能收获到这些:<br> <br> <span> </span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">①价值300元编程课程大礼包</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">②应用数学优化代码的实操方法</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">③数学理论在编程实战中的应用</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">④程序员必学的5大数学知识</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">⑤人工智能领域必修数学课</span> </p> <p> <br> 备注:此课程只讲程序员所需要的数学,即使你数学基础薄弱,也能听懂,只需要初中的数学知识就足矣。<br> <br> 如何听课? </p> <p> 1、登录CSDN学院 APP 在我的课程中进行学习; </p> <p> 2、登录CSDN学院官网。 </p> <p> <br> </p> <p> 购课后如何领取免费赠送的编程大礼包和加入答疑群? </p> <p> 购课后,添加助教微信:<span> csdnxy68</span>,按提示领取编程大礼包,或观看付费视频的第一节内容扫码进群答疑交流! </p> <p> <img src="https://img-bss.csdn.net/201912251155398753.jpg" alt=""> </p>
©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值