jquery_基础简介1

最新推荐文章于 2021-05-17 19:34:50 发布

H之一

最新推荐文章于 2021-05-17 19:34:50 发布

阅读量123

点赞数

分类专栏： JavaScript 前端文章标签： javascript

本文链接：https://blog.csdn.net/H_zhiyi/article/details/108601025

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

27 篇文章 0 订阅

订阅专栏

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

jQuery库可以通过一行简单的标记被添加到网页中。例如： <script scr="js/jquery.js"></script> 您需要具备的基础知识在您开始学习jQuery之前，您应该对一下知识有基本的了解： HTML CSS JavaScript **什么是jQuery？**

jQuery是一个轻量级的“写得少，做的多”的JavaScript函数库。[独立的JavaScript文件] jQuery库包含以下功能： 1.HTML 元素选取
2.HTML 元素操作
3.CSS 操作
4.HTML 事件函数
（1）.在开始标记中添加事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function test1(){
				/
			}
		</script>
		<input type="button" value="按钮" onclick="test1()" />
	</body>
</html>

2.通过匿名函数添加事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			document.getElementById("but1").onclick=function(){
				
			}
		</script>
		<input type="button"  id="but1" value="按钮" />
	</body>
</html>

5.JavaScript特效和动画

6.HTML DOM遍历和修改

7.AJAX
https://jquery.com/ 官网
jQuery安装

网页中添加jQuery

可以通过多种方法在网页中添加jQuery。您可以使用以下方法：
1.从jquery.com下载jQuery库
production jQuery 3.5.1— https://code.jquery.com/jquery-3.5.1.min.js
development jQuery 3.5.1—https://code.jquery.com/jquery-3.5.1.js
在这里插入图片描述
如果开发测试使用devrlopment jQuery 3.5.1,有注释可以查看具体的内容。
如果发布使用production jQuery 3.5.1,小，节省内存。
通过script标记导入到网页中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
			alert("测试导入jquery");
		});
	</script>
	<body>
	</body>
</html>

在这里插入图片描述
2.通过网络地址导入jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
	</script>
	<script type="text/javascript">
		$(function(){
			alert("测试导入jQuery");
			
		});
	</script>
	<body>
	</body>
</html>

在这里插入图片描述
jQuery 语法

通过jQuery，您可以选取(查询，jquery)HTML元素，并对他们执行“操作”（actions）.
基础语法：$(selector).action()
1.美元符号定义：jQuery
2.选择符(selector)"查询"和"查找"HTML元素
3.jQuery的action（）执行对元素的操作
实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
			//基础语法：$(selector).action()
			$("p").css("background-color","yellow");
			$("p.test1").css("color","red");
			$("#test2").css("color","blue");
		});
	</script>
	<body>
		<p>测试jQuery的基础语法1</p>
		<p class="test1">测试jQuery的基础语法2</p>
		<p>测试jQuery的基础语法3</p>
		<p id="test2">测试jQuery的基础语法4</p>
	</body>
</html>

在这里插入图片描述
文档就绪事件—就是页面初始化事件
JavaScript的页面初始化事件
1.body中提供οnlοad=“函数”
2.window.οnlοad=function(){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		function testJavascriptonload(){
			alert("javascript的页面初始化事件11");
		}
	</script>
	<body onload="testJavascriptonload()">
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		window.onload=function(){
			alert("javascript的页面初始化事件22");
		}
	</script>
	<body>
	</body>
</html>

在这里插入图片描述
jquery的页面初始化事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
		<script src="jquery-3.5.1.js"></script>
		<script type="text/javascript">
			/*
			//原始做法
			$(document).ready(function(){
				alert("jquery的页面初始化事件--原始做法");
			});
			*/
		   //简化版本
		   $(function(){
			   alert("jquery的页面初始化事件--简化版本11");
		   });
		   $(function(){
			   alert("jquery的页面初始化事件--简化版本22");
		   });
		   $(function(){
			  alert("jquery的页面初始化事件--简化版本33") ;
		   });
		</script>
	<body>
	</body>
</html>

在这里插入图片描述

jQuery选择器
jQuery选择器允许您对HTML元素组或单个元素进行操作。
1.元素选择器
jQuery元素选择器基于元素名选取元素。
2.#id 选择器
jQuery#id选择器通过HTML元素 id 属性选取指定的元素。
页面中元素的id应该是唯一的，所以您要在页面中选取唯一的元素需要通过#id选择器。
3.class选择器
jQuery类选择器可以通过指定的class查找元素。
在这里插入图片描述

<!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>

在这里插入图片描述
jQuery 事件
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$(“p”).click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$(“p”).click(function(){ // 动作触发后执行的代码!! });
常用的 jQuery 事件方法

$(document).ready(function) 文档完全加载完后执行函数
click(function) 方法是当按钮点击事件被触发时会调用一个函数
dblclick(function)双击元素时，会发生 dblclick 事件。
mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
hover(function)方法用于模拟光标悬停事件。
focus(function)当元素获得焦点时，发生 focus 事件。
blur(function)当元素失去焦点时，发生 blur 事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(document).ready(function(){
				alert("$(document).ready(function) 文档完全加载完后执行函数");
			});
			$(document).ready(function(){
				$("#but1").click(function(){
					alert("click(function) 方法是当按钮点击事件被触发时会调用一个函数");
				});
				
				$("#but2").dblclick(function(){
					alert("dblclick(function)双击元素时，会发生 dblclick 事件。");
				});
				
				$("#h2").mouseenter(function(){
					alert("4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。");
				});
				$("#h2").mouseleave(function(){
					alert("5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。");
				});
				$("#a1").hover(function(){
					alert("6.hover(function)用于模拟光标悬停事件。");
				});
				
				$("#text1").focus(function(){
					$(this).val("background-color");
				});
				$("#text1").blur(function(){
				   alert($(this).val());
				});
			});
		</script>	
	</head>
	<body>
		<input id="but1" type="button" value="测试单击事件"><br>
		<input id="but2" type="button" value="测试双击事件"><br>
		<h2 id="h2">测试鼠标进入和移出事件</h2>
		<a id="a1" href="#">测试光标悬停事件</a><br><br><br>
		<input id="text1" type="text" value="测试获得焦点和失去焦点事件"><br>
	</body>
</html>

在这里插入图片描述

H之一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery_基础简介1

jQuery 是一个 JavaScript 库。[.js]jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。jQuery 简介jQuery库可以通过一行简单的标记被添加到网页中。例如：<script scr="js/jquery.js"></script>您需要具备的基础知识在您开始学习jQuery之前，您应该对一下知识有基本的了解：HTMLCSSJavaScript**什么是jQuery？**jQuery是一个轻量级.
复制链接

扫一扫

专栏目录