Front-end——jQuery入门及选择器介绍

最新推荐文章于 2021-10-08 15:31:37 发布

Star星屹程序设计

最新推荐文章于 2021-10-08 15:31:37 发布

阅读量540

点赞数

分类专栏： HTML+CSS+JS+jQuery+Vue+XML

本文链接：https://blog.csdn.net/weixin_42067873/article/details/112388376

版权

HTML+CSS+JS+jQuery+Vue+XML 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

一、jQuery技术的介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

注：简化了JavaScript对DOM对象定位以及对DOM对象属性操作开发步骤

1、jQuery学习的重点知识

熟练jQuery选择器和过滤器的语法
熟练掌握jQuery对象所提供的功能函数

2、jQuery的使用

首先需要知道的是jQuery是一个脚本文件，所以需要下载该工具文件，并导入到工程中。

注：jQuery未引入报错：ReferenceError: $ is not defined

（1）jQuery库的引入

<script type="text/javascript" src="js/jquery.min.js"></script>

3、jQuery中的$

$号是jQuery“类”的一个别称，$()构造了一个jQuery对象。所以，“$()”可以叫做jQuery的构造函数。

jquery体系中最重要的工具就那个代表国际财富的$!其实Jquery的$的主要功能就是字符检索功能，同时返回一个Jquery对象，从而利用jquery框架所提供的jquery对象的方法来处理这个对象。

简洁理解jquery的代表符号$, 代表的是jquery的顶层对象，也可以理解为jquery对象本身。

jquery中$的四大功能：

1）$(function)----$(document).ready(function(){});
2）$("#idname")----这个用来代表检索页面中具有本名字空间中唯一标记，其文本标记为“idname”；这个idname前加入“＃”实际是为了与css规范相对应。注：在css编排中，同样使用"#idname"来定义具有唯一姓名（id）来定义对应对象的样式
3）$(".cssidname")----这个用来代表一个css标记标签tag的样式内容；
4）$("httag")----这个最直接的设计代表的是html的保留字标签；

4、jQuery对象与DOM对象区别

（1）DOM对象

创建者：在浏览器加载网页时，由浏览器负责创建
一个HTML标签对应一个DOM标签
可以通过管理DOM对象，来对关联HTML标签中的属性进行操作。

（2）jQuery对象

创建者：是jQuery函数负责创建的——》函数 $(funtion(){})
jQuery对象就是一个数组
jQuery对象中存放的是本次所定位的DOM对象
可以通过jQuery对象中的功能函数，来快速的对所定位的DOM对象进行操作管理
jQuery对象的命名方式：以$开头，如：$obj

二、jQuery对象与DOM对象的转换

1、如何将jQuery对象转换为DOM对象

for(let i = 0; i < $obj.length; i++){
    let domObj = $obj[i];
}

（1）快速遍历函数——each()

each函数中需要传递一个函数，该函数有两个参数，第一个是下标，即index；第二个传入一个对象

function myCheckbox(index, domObj){
	alert("第" + (index+1) + "个checkbox标签的value是：" + domObj.value)
}
function fun5(){
	let $obj = $(":checkbox")
	$obj.each(myCheckbox)
}

2、如何将DOM对象转换成jQuery对象

let $obj = $(domObj)

注：jQuery对象与DOM对象之间属性和函数彼此不能调用

三、jQuery中的选择器语法

1、什么是选择器语法

选择器语法就是对DOM对象进行定位的条件，比如根据ID定位，根据标签类型名

2、在jQuery中选择器类型

在jQuery中只有三种选择器：基本选择器、层级选择器、INPUT标签选择器

3、基本选择器

定位条件：可以根据ID编号，根据标签类型名，根据标签采用的样式选择器进行定位

使用：

$("#id编号")：用来代替 document.getElementById("id") ，即根据ID编号定位对应的DOM对象，让DOM对象保存到一个数组中并返回。返回的这个数组就是jQuery对象
$(".样式选择器名称")：用来代替 document.getElementsByClassName("样式选择器名") 将使用了指定的样式选择器的DOM对象保存到同一个数组中并返回。返回的这个数组就是jQuery对象
$("标签类型名")：用来代替 document.getElementsByTagName("标签类型名") 将所有指定的标签类型所关联的DOM对象保存到同一个数组中并返回。返回的这个数组就是jQuery对象
$("*")：定位浏览器中所有的DOM对象保存到同一个数组中并返回。返回的这个数组就是jQuery对象（用于浏览器全局切换皮肤）
$("条件1，条件2")：只要DOM对象满足其中的一种条件（至少一个），就会被定位到数组中，即相当于mysql中的or
$符号，本身代表一个类（即jQuery类）

<!!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<title>jQuery的使用</title>
		<style type="text/css">
			div{
				background: #7F7F7F;
				width: 200px;
				height: 100px;
			}
		</style>
	</head>
	
	<body>
		<!-- 定义被选择的对象 -->
		<div id="one" class="two"></div><br>
		<div class="two"></div><br>
		<div></div><br>
		<span>我是span标签</span><br />
		
		<!-- 定义按钮 -->
		<input type="button" id="btn01" value="选择id为one的元素" onclick="fun1()" />
		<input type="button" id="btn02" value="选择class为two的元素" onclick="fun2()" />
		<input type="button" id="btn03" value="选中所有的div元素" onclick="fun3()"/>
		<input type="button" id="btn04" value="选中所有元素" onclick="fun4()" />
		<input type="button" id="btn05" value="选中id为one与所有的span元素" onclick="fun5()" />
		
		<script>
			function fun1(){
				let $obj = $("#one")
				$obj.css({
					background: '#FF0000'
				})
			}
			
			function fun2(){
				let $obj = $(".two")
				$obj.css({
					background: '#00FF00'
				})
			}
			
			function fun3(){
				$("div").css({
					background: '#0000FF'
				})
			}
			
			function fun4(){
				$("*").css({
					background: 'yellow'	
				})
			}
			
			function fun5(){
				$("#one,span").css({
					background: 'coral'
				})
			}
		</script>
	</body>
</html>

（1）全选框案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的主页</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#selectAllBut{}
			.ah{}
		</style>
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
		
		<script>
			function selectAll(){
				//1、获取第一个checkbox的选中状态
				let flag = $("#selectAllBut").prop("checked")
				//2、为所有数据行的checkbox设置选中状态
				$(".ah").prop("checked", flag)
			}
		</script>
		
		<input type="checkbox" onclick="selectAll()" id="selectAllBut"/>全选<br />
		<input type="checkbox" class="ah"/>学习<br />
		<input type="checkbox" class="ah"/>睡觉<br />
		<input type="checkbox" class="ah"/>吃饭<br />
	</body>
</html>

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
返回属性的值：$(selector).prop(property)
设置属性和值：$(selector).prop(property,value)
使用函数设置属性和值：$(selector).prop(property,function(index,currentvalue))
设置多个属性和值：$(selector).prop({property:value, property:value,...})

4、层级选择器

定位条件：可以根据标签之间的父子关系定位；可以根据标签之间的兄弟关系定位

标签之间的关系：

（1）父子关系，即包含关系
（2）兄弟关系：两个标签拥有相同的父标签，并且彼此之间没有包含关系

使用：

$("定位父标签条件>定位子标签条件")：定位当前父标签下，所有满足条件的直接子标签。
$("定位父标签条件定位子标签条件")：定位当前父标签下，所有满足条件的直接子标签和间接子标签
$("定位当前标签条件~定位兄弟标签条件")：定位当前标签后面，所有满足条件的兄弟标签
$("定位当前标签条件+定位兄弟标签条件")：定位当前标签后面与之近邻的，并且满足条件的所有兄弟标签
$("定位当前标签条件").siblings("定位兄弟标签条件")：定位当前标签（前面与后面）所有满足条件的兄弟标签

简单案例：

<!!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				background: gray;
			}
		</style>
	</head>
	<body>
		<div id="one">我是div01</div>
		<div id="two">我是div02</div>
		<div>我是div03
			<div class="son">我是div03的子div</div>
			<div class="son">我是div03的子div</div>
		</div>
		<div>我是div04</div>
		<span>我是span标签</span><br />
		
		<input type="button"  id="btn01" value="选择body中所有的div子标签" onclick="fun1()"/>
		<input type="button"  id="btn02" value="选择body下的直接div子标签" onclick="fun2()"/>
		<input type="button"  id="btn03" value="选中id为one的下一个兄弟div" onclick="fun3()"/>
		<input type="button"  id="btn04" value="选中id为two的所有后面兄弟div" onclick="fun4()"/>
		<input type="button"  id="btn05" value="选择id为two的所有兄弟div" onclick="fun5()"/>
		
		
		<script type="text/javascript">
			function fun1(){
				$("body div").css({
					background: 'pink'
				})
			}
			
			function fun2(){
				$("body>div").css({
					background: 'orange'
				})
			}
			
			function fun3(){
				$("#one+div").css({
					background: 'aqua'
				})
			}
			
			function fun4(){
				$("#two~div").css({
					background: 'red'
				})
			}
			
			function fun5(){
				$("#two").siblings("div").css({
					background: 'green'
				})
			}
		</script>
	</body>
</html>

5、INPUT标签选择器

type取值：text、password、radio、checkbox、file、button、submit、reset

INPUT标签作用：作为浏览器向网站发送请求时携带请求参数。

使用：

$(":type属性名字")
$(":button")：定位页面中所有的button关联的DOM

简单案例：

使用用户名和密码模拟对百度页面进行请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<body>
		<center>
			<form action="http://www.baidu.com">
				loginName: <input type="text" name="uname" /><br>
				password :  <input type="password" name="pass" /><br>
				<input type="submit" />
			</form>
		</center>
	</body>
</html>

按钮点击事件获取input标签的值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>
	
	<body>
		<!-- 定义表单元素 -->
		<form id="myForm" action="">用户名：
			<input type="text" name="username" /><br><br>
		密&nbsp;&nbsp;码：
			<input type="password" name="passwd" /><br><br>
		性&nbsp;&nbsp;别：
			<input type="radio" name="gender" value="1" checked/>男
			<input type="radio" name="gender" value="0" />女<br><br>
		照&nbsp;&nbsp;片：
			<input type="file" name="photo"/><br><br>
		兴&nbsp;&nbsp;趣：
			<input type="checkbox" name="interest" value="music" checked/>音乐
			<input type="checkbox" name="interest" value="food" />美食
			<input type="checkbox" name="interest" value="travel" />旅游
			<input type="checkbox" name="interest" value="shopping" />购物
			<br><br>
			<input type="submit" value="提交"/>
		</form>
		<br><br>
		<!-- 定义按钮 -->
		<button id="btn01" onclick="fun1()">选择文本输入框并输出用户输入的值</button>
		<button id="btn02" onclick="fun2()">选择密码输入框输出用户输入的密码</button>
		<button id="btn03" onclick="fun3()">选择单选框的value属性值</button>
		<button id="btn04" onclick="fun4()">选择文件上传框并输出用户选择的文件</button>
		<button id="btn05" onclick="fun5()">选择复选框并输出用户选择的值</button>
		
		<script type="text/javascript">
			function fun1(){
				let $obj = $(":text")
				let value = $obj.val()  //val()函数：jQuery对象中的一个功能函数，用于读取jQuery对象中第一个DOM对象的value属性内容
				alert("文本框的value值是" + value)
			}
			
			function fun2(){
				let value = $(":password").val()
				alert("密码框中的内容是：" + value)
			}
			
			function myFun(index, domObj){
				alert("第" + (index+1) + "个radio标签的value是：" + domObj.value)
			}
			function fun3(){
				let $obj = $(":radio")
				//因为有两个单选框，所以此时需要使用到jQuery对象转换成DOM对象
				for(let i = 0; i < $obj.length; i++){
					let = domObj = $obj[i]
					myFun(i, domObj)
				}
			}
			
			function fun4(){
				alert($(":file").val()) //file类型的val值为路径
			}
			
			function myCheckbox(index, domObj){
				alert("第" + (index+1) + "个checkbox标签的value是：" + domObj.value)
			}
			function fun5(){
				let $obj = $(":checkbox")
				$obj.each(myCheckbox)
			}
		</script>
		
		</center>
	</body>
</html>