jQuery 学习总结

VIP文章 a南北呀

已于 2022-05-03 15:11:29 修改

阅读量627

点赞数

分类专栏： Java-jQuery 文章标签： jquery javascript

于 2022-05-03 15:01:28 首次发布

本文链接：https://blog.csdn.net/m0_60439135/article/details/124555414

版权

jQuery

jQuery的概念

jQuery是什么？
- jQuery是js库
- 在库中封装了很多方法可供开发人员调用
dom对象和jquery对象
- dom对象，使用javascript的语法创建的对象叫做dom对象，也就是js对象。
- var obj = document.getElementById(“txt1”); obj是dom对象，也叫做js对象。
jquery对象是什么？
- 使用jquery语法表示对象叫做jquery对象，注意：jquery表示的对象都是数组。
- jquery对象是由n个dom对象组成的一个数组对象。
- 例如 var jobj = $(“#txt1”) , jobj就是使用jquery语法表示的对象。也就是jquery对象。它是一个数组。现在数组中就一个值。因为使用的是id选择器，id在dom中是唯一的。

jQuery的思维导图

在这里插入图片描述

jQuery的语法

dom对象可以和jquery对象相互的转换。

dom对象可以转为jquery ，语法： $(dom对象)

<html>
	<head>
		<meta charset="utf-8">
		<title>dom对象转为jQuery对象</title>
        <!--引入jquery库，可到官网下载js文件-->
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// dom对象转为jQuery对象
			function toJquery(){
           
				var btn = document.getElementById("btn");
				alert("dom:" + btn.value);
				var $btn = $(btn);
				alert("jquery:" + $btn.val());
			}
			// jQuery转为dom对象 注意jquery是一个数组
			function toDom(){
           
				var $btn = $("#btn1");
				// var btn = $btn[0];
				var btn = $btn.get(0); // 第二种方式
				alert(btn.value);
			}
		</script>
	</head>
	<body>
		<input type="button" value="dom转为jquery" id="btn" onclick="toJquery()" />
		<input type="button" value="jquery转为dom" id="btn1" onclick="toDom()" /></body>
</html>

jquery对象也可以转为dom对象，语法：从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get{0).

<html>
	<head>
		<title>jQuery转为dom</title>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			function sum(){
           
				var $text = $("#text"); // 获取jquery对象
				var text = $text.get(0); // 把jquery对象转为dom对象
				var num = text.value; // 调用dom的属性value
				text.value =  num * num; // 进行平方输出
			}			
		</script>
	</head>
	<body>
		<input type="button" value="计算平方" onclick="sum()" />
		<input type="text" id="text" />
	</body>
</html>

无论从数组中获取哪一个数组，下标是什么，获取的也都会是dom对象，因为jquery就是数组，数组中存放的就是dom对象。

为什么要进行dom和jquery的转换
- 目的是要使用对象的方法，或者方法。
- 当你是dom对象时，可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数，必须是jquery对象才可以。

选择器

什么是选择器？
- 就是一个字符串，用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom
- 可分为基本选择器和表单选择器

基本选择器（常用选择器）

id选择器，语法： $(“#dom对象的id值”)
- 通过dom对象的id定位dom对象的。通过id找对象， id在当前页面中是唯一值。
class选择器，语法： $(".class样式名)
- class表示css中的样式，使用样式的名称定位dom对象的。
标签选择器，语法： $(“标签名称”)
- 使用标签名称定位dom对象的

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>选择器的使用</title>
		<style type="text/css">
			div{
           
				background: gray;
				width: 200px;
				height: 200px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			/*
				语法：
					id选择器：$("#id")
					类选择器：$(".class名")
					标签选择器：$("标签名")
			*/
			// ID选择器
			function show1(){
           
				var div = $("#div1"); // 获取jquery对象
				div.css("background", "blue"); // 使用jquery的方法进行设置背景颜色
			}
			// 类选择器
			function show2(){
           
				var div = $(".div2");
				div.css("background", "red");
			}
			// 标签选择器
			function show3(){
           
				var div = $("div");
				div.css("background", "black");
			}
			// 所有选择器-->整个页面变粉色
			function show4(){
           
				var div = $("*");
				div.css("background", "pink");
			}
			// 混合选择器 --> 使用","隔开
			function show5(){
           
				var div = $(".div2, span");
				div.css("background", "orange");
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
		<br />
		<div class="div2"></div>
		<br />
		<div></div>
		<br />
		<span id="span1">span标签</span>
		<br />
		<input type="button" value="id选择器"  onclick="show1()"/><br />
		<input type="button" value="class选择器"  onclick="show2()"/><br />
		<input type="button" value="标签选择器"  onclick="show3()"/><br />
		<input type="button" value="所有选择器"  onclick="show4()"/><br />
		<input type="button" value="混合选择器"  onclick="show5()"/><br />
	</body>
</html>

表单选择器

使用标签的type属性值，定位dom对象的方式。
语法： $(“:type属性值”)
例如： $(" : t e x t "), 选择的是所有的单行文本框，$ (“:button”) ,选择的是所有的按钮。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单选择器的使用</title>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			/*
				语法：
					$(":type属性值")
				作用：主要是处理表单的
					注意：不是只能处理表单，当没有表单的时候也可以使用此方法。
			*/
		   function fun1(){
           
			   var s = $(":text");
			   alert(s.val());
		   }
		   
		   function fun2(){
           
			   var s = $(":button");
			   alert(s.val());
		   }
		   
		   function fun3(){
           
			   var s = $(":checkbox");
			   for (var i = 0; i < s.length; i++) {
           
					var f = s[i]; // 把jQuery转为dom对象
					alert(f.value);
				}
		   }
		
		   function