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

其他 2020-03-10 23:07:01 阅读次数: 0

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>

在这里插入图片描述

谷哥的小弟 博客专家
发布了1022 篇原创文章 · 获赞 1986 · 访问量 238万+
他的留言板 关注

猜你喜欢

转载自blog.csdn.net/lfdfhl/article/details/102667100
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022