Jquery基础

山i

于 2021-10-15 20:27:00 发布

阅读量150

点赞数

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

本文链接：https://blog.csdn.net/zxcWh/article/details/120789363

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery的基本概念和用法，包括导入jQuery库、选择器的使用、DOM操作、事件处理、CSS样式设置等。通过实例展示了如何使用jQuery简化JavaScript编程，如元素选取、元素操作、事件绑定、动画效果等，帮助读者快速掌握jQuery的核心功能。

摘要由CSDN通过智能技术生成

Jquery基础

您需要具备的基础知识

在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

HTML

CSS

JavaScript

jQuery 简介

1.什么是 jQuery ？

jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]

jQuery 是一个 JavaScript 函数库。[.js]
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。

jQuery库包含以下功能：

1.HTML元素选取

2.HTML元素操作

3.CSS 操作

4.HTML 事件函数

5.JavaScript 特效和动画[元素的隐藏和显示]

6.HTML DOM 遍历和修改

7.AJAX请求【获取后台处理程序返回的数据值】高级操作

Jquery下载

jQuery 官网

Download the compressed, production jQuery 3.6.0---jquery-3.6.0.min.js

Download the uncompressed, development jQuery 3.6.0---jquery-3.6.0.js

Jquery是以“.js”结尾的，说明他是一个javascript文件。可以按照javascript的用法使用。

jquery-3.6.0.min.js--jquery的发布版，它的特点小，节省内存。因为它里面的内容被压缩了。

jquery-3.6.0.js---jquery的开发版，它的特点有注释可以查看具体的内容。它是没有压缩的。

jQuery的使用

1.通过script标记导入本地jquery函数库文件到网页中。它是一个javascript文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过script标记使用</title>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				alert("通过script标记引入独立的jquery文件");
			});
		</script>
	</head>
	<body>
	</body>
</html>

适用于我们将jquery函数库文件下载到本地计算机以后操作。

2.通过script标记利用网络地址导入jquery函数库到网页中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过script标记使用</title>
		<!-- 导入jquery函数库【网络地址】 -->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			$(function(){
				alert("通过script标记引入独立的jquery文件");
			});
		</script>
	</head>
	<body>
	</body>
</html>

jQuery 语法

通过 jQuery，您可以选取HTML 元素【标记】，并对它们执行"操作"（actions）。

基础语法： $(selector).action()

美元符号定义 $ -表示jQuery，jQuery表示$。我们可以使用$代替jQuery。
选择符（selector）---"查询"和"查找"需要被控制的 HTML 元素。可以将被控制的 HTML 元素转换成jQuery对象。【 $(selector)--jQuery的构造器--创建jQuery对象】
action()指对得到的jQuery对象调用的函数/属性

Javascript的页面初始化事件

body中提供οnlοad=“函数”
window.οnlοad=function(){}

Jquery的初始化函数

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery的初始化函数</title>
		<!--导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			/*
			$(document).ready(function(){
				alert("jquery初始化函数的--原始写法");
			});
			*/
		   /*
		   $(function(){
			   alert("jquery初始化函数的--简化写法");
		   });
		   */
		   //$==jQuery，当我们在程序中需要jQuery，可以使用$代替
		   jQuery(function(){
		   			   alert("jquery初始化函数的--简化写法");
		   });
		</script>
	</head>
	<body>
	</body>
</html>

实例:测试语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试jquery的语法</title>
		<!--导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				/**
				 * 基础语法： $(selector).action()
				 * 1.美元符号定义 $ -表示jQuery，jQuery表示$。我们可以使用$代替jQuery。
				 * 2.选择符（selector）---"查询"和"查找"需要被控制的 HTML 元素。
				 * 可以将被控制的 HTML 元素转换成jQuery对象。
				 * 3.action()指对得到的jQuery对象调用的函数/属性
				 */
				//$("#p1").css("font-size","50px");
				
				//我们可以在jquery的函数中使用javascript语法。
				//var pdom=document.getElementById("p1");
				//alert(pdom); //[object HTMLParagraphElement]
				//$(selector)jQuery的构造器[创建jQuery对象]
				//var jqobj=$("#p1");
				//alert(jqobj); //[object Object]
				
				//不能使用javascript对象【dom对象】调用jQuery的函数和属性
				//var pdom=document.getElementById("p1");
				//pdom.css("font-size","50px");
				//pdom.style.fontSize="50px";
				//不能使用jquery对象调用javascript的函数和属性
				//var jqobj=$("#p1");
				//jqobj.style.fontSize="50px";
			});
		</script>
	</head>
	<body>
		<p id="p1">测试jquery的语法</p>
	</body>
</html>

Jquery对象与javascript对象的转换

javascript对象----》Jquery对象-------【$(javascript对象)】
Jquery对象------》javascript对象-----【Jquery对象.get()】

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试jquery的语法</title>
		<!--导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				//$(javascript对象)
				//将javascript对象【dom对象】转换出成jQuery对象
				//var pdom=document.getElementById("p1");
				//var jqobj=$(pdom);
				//alert(jqobj); //[object Object]
				//jqobj.css("font-size","50px");
				
				//jquery的构造有常用的两种
				//$(selecter)---将被选中的html标记构造成Jquery对象
				//$(javascript对象)---将javascript对象构造成Jquery对象
				
				//jquery对象.get();
				//将jquery对象转换成javascript对象【dom对象】
				//var jqobj=$("#p1");
				//var javascriptobj=jqobj.get();
				//alert(javascriptobj); //[object HTMLParagraphElement]
				//var javascriptobj=$("#p1").get();
				//alert(javascriptobj);  //[object HTMLParagraphElement]
			});
		</script>
	</head>
	<body>
		<p id="p1">测试jquery的语法</p>
	</body>
</html>

jquery的构造有常用的两种

$(selecter)---将被选中的html标记构造成Jquery对象

$(javascript对象)---将javascript对象构造成Jquery对象

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

1.元素选择器

jQuery 元素选择器基于元素名选取元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素选择器</title>
		<!--导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				//元素选择器--根据元素名称选中html元素
				//$("html元素名称")
				//如果需要给多个元素作用同一个动作，无需遍历
				//var parry=$("p");
				//parry.css("font-size","50px");
			   //如果需要给每一个元素作用不同一个动作，就需要遍历
			   var parry=$("p");
			   var size=20;
			   for(var i=0;i<parry.length;i++){
				   size=i*10+size;
				   //遍历出来的对象是javascript对象
				   $(parry[i]).css("font-size",size+"px");
			   }
			});
		</script>
	</head>
	<body>
		<p>测试jquery的元素选择器1</p>
		<p>测试jquery的元素选择器2</p>
		<p>测试jquery的元素选择器3</p>
		<p>测试jquery的元素选择器4</p>
	</body>
</html>

2.#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>#id 选择器</title>
		<!--导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				//#id 选择器--根据元素id属性值选中html元素
				$("#p1").css({"font-size":"30px","color":"red"});
				//当id属性值相同时只能得到第一个元素
				$("#p2").css({"font-size":"40px","color":"red"});
				$("#p3").css({"font-size":"50px","color":"red"});
			});
		</script>
	</head>
	<body>
		<p id="p1">测试jquery的id选择器1</p>
		<p id="p2">测试jquery的id选择器2</p>
		<p id="p2">测试jquery的id选择器3</p>
		<p id="p3">测试jquery的id选择器4</p>
	</body>
</html>

3..class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class选择器</title>
		<!--导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				//class选择器--根据元素class属性值选中html元素
				$(".p1").css({"font-size":"30px","color":"red"});
				//当class属性值相同时会得到一组
				//当需要单独控制每一个元素是需要遍历，遍历的每一个元素都是javasript对象
				$(".p2").css({"font-size":"40px","color":"red"});
				$(".p3").css({"font-size":"50px","color":"red"});
			});
		</script>
	</head>
	<body>
		<p class="p1">测试jquery的class选择器1</p>
		<p class="p2">测试jquery的class选择器2</p>
		<p class="p2">测试jquery的class选择器3</p>
		<p class="p3">测试jquery的class选择器4</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				//元素选择器
				$("p").css("background-color","black");
				//.class选择器
				$("p.test1").css("color","red");
				//id选择器
				$("#test2").css("color","blue");
				$("p:first").css("color","green");
				$("ul li:first").css("font-size","30px");
				$("ul li:last-child").css("font-size","40px");
				$("[href]").css("font-size","20px");
				$(":button").css("width","180px");
				$("table").css("width","480px");
				$("tr:even").css("background-color","red");
				$("tr:odd").css("background-color","blue");
			});
		</script>
	</head>
	<body>
		<p>测试jquery的基础语法1</p>
		<p class="test1">测试jquery的基础语法2</p>
		<p>测试jquery的基础语法3</p>
		<p id="test2">测试jquery的基础语法4</p>
		<ul>
			<li>name=zhangsan</li>
			<li>age=23</li>
			<li>address=xian</li>
		</ul>
		<ul>
			<li>name=lisi</li>
			<li>age=23</li>
			<li>address=xian</li>
		</ul>
		<ul>
			<li><a href="#">name=wangwu</a></li>
			<li><a href="#">age=23</a></li>
			<li><a href="#">address=xian</a></li>
		</ul>
		<input type="button" value="测试button1"/>
		<input type="button" value="测试button2"/>
		<table border="1px">
			<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
			<tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>
			<tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>
			<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
			<tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>
			<tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>
		</table>
	</body>
</html>

2.jQuery HTML

1.jQuery获取/设置文本元素的值

jQuery获取元素的值 text()、html() 以及 val()

text()---返回所选元素的文本内容

html()--返回所选元素的内容（包括 HTML 标记）

val()----返回表单字段的值

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取/设置html元素的文本值</title>
		<!-- 导入jquery的函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				/*
				jQuery获取元素的值  text()、html() 以及 val()
				text()---返回所选元素的文本内容
				html()--返回所选元素的内容（包括 HTML 标记）
				val()----返回表单字段的值
				*/
			    //获取元素的值
				//var h1value=$("#h1").text();//不包含html标记
				//var h1value=$("#h1").html();//包含html标记
				//var butvalue=$(":button").val(); //获取表单元素的文本值
				
				//jQuery设置元素的值  text(content)、html(content) 以及 val(content)
				//text(content)---设置所选元素的文本内容[不解释html标记]
				//html(content)--设置所选元素的内容[解释html标记]
				//val(content)----设置表单字段的值
				//$("#h1").text("<font color='red'>设置文本元素的值</font>");
				//$("#h1").html("<font color='red'>设置文本元素的值</font>");
				//$(":button").val("设置表单元素的值");
				
				//javaSctipt         jQuery
				//innerText          text([content])
				//innerHTML          html([content])
				//value              val([content])
			});
		</script>
	</head>
	<body>
		<h1 id="h1">获取/设置<a href="#">h1</a>元素的文本值</h1>
		<input  type="button" value="测试val()" />
	</body>
</html>

jQuery - 添加元素

append() - 在被选中元素中插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加元素</title>
		<style>
			#div1{
				width: 500px;
				height: 500px;
				background-color: red;
			}
		</style>
		<!-- 导入jquery的函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				//jquery--添加元素
				//append() - 在被选中元素中插入内容[最后一个元素在最后]
				//$("#div1").append("文本数据值");
				//$("#div1").append("<h1>文本数据值</h1>");
				$("#div1").append("<img src='imgs/open.PNG'/>");
				//prepend() -在被选中元素中插入内容[最后一个元素在最前]
				//$("#div1").prepend("文本数据值");
				//$("#div1").prepend("<h1>文本数据值</h1>");
				//$("#div1").prepend("<img src='imgs/open.PNG'/>");
				//after() - 在被选元素之后插入内容
				$("#div1").after("<img src='imgs/open.PNG'/>");
				//before() - 在被选元素之前插入内容
				$("#div1").before("<img src='imgs/open.PNG'/>");
			});
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

jQuery - 删除元素

remove() - 删除被选元素（及其子元素）【有过滤功能】

empty() - 从被选元素中删除子元素

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除元素</title>
		<style>
			#div1{
				width: 450px;
				height: 450px;
				background-color: red;
			}
		</style>
		<!-- 导入jquery的函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				//jquery--删除元素
				//remove() - 删除被选元素（及其子元素）【有过滤功能】
				//empty() - 从被选元素中删除子元素
				//$("#div1").remove();
				//$("#div1").empty();
			});
		</script>
	</head>
	<body>
		<div id="div1">
			<h1>测试删除元素</h1>
			<img src="imgs/open.PNG"/>
		</div>
	</body>
</html>

3.jQuery的CSS操作

1.为元素添加不存在的样式

css(样式属性名称，属性值) 设置被选元素的具有这个样式。

css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。

2.为元素添加已经存在的样式

addClass() - 向被选元素添加一个或多个样式类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置css样式</title>
		<!-- 导入jquery的函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<style>
			.div1{
				width: 200px;
				height: 200px;
				background-color: black;
			}
		</style>
		<script>
			$(function(){
				//当没有样式存在时
				//css() - 设置样式
				//1.css(样式属性名称，属性值) 设置被选元素的具有这个样式。
				//$("#p1").css("font-size","50px");
				//2.css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。
				$("#p1").css({"font-size":"50px","color":"red"});
				//当有样式存在时，没有作用在元素上
				//addClass() - 向被选元素添加一个或多个样式类
				$("#but1").click(function(){
					$("#div1").addClass("div1");
				});
				//removeClass() - 从被选元素删除一个或多个类
				$("#but2").click(function(){
					$("#div1").removeClass("div1");
				});
				//toggleClass() - 对被选元素进行添加/删除类的切换操作
				$("#but3").click(function(){
					$("#div1").toggleClass("div1");
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">测试设置css样式</p>
		<input id="but1" type="button" value="addClass()"/>
		<input id="but2" type="button" value="removeClass()"/>
		<input id="but3" type="button" value="toggleClass()"/>
		<div id="div1"></div>
	</body>
</html>

3.获取元素样式

css(样式属性名称) 返回被选元素的指定样式属性值。

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取样式属性值</title>
		<style>
			p{
				font-size: 50px;
				color: red;
			}
		</style>
		<!-- 导入jquery的函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				css(样式属性名称) 返回被选元素的指定样式属性值。
				var size=$("p").css("font-size");
				alert(size);
			});
		</script>
	</head>
	<body>
		<p>测试获取样式属性值</p>
	</body>
</html>