前端（四）——JQuery（引入、语法、事件、特效）、DOM（常用方法，取、删元素、选择器）、validation插件（表单验证）

最新推荐文章于 2024-09-02 12:54:06 发布
最新推荐文章于 2024-09-02 12:54:06 发布
阅读量482 收藏 1
点赞数 1
分类专栏： DOM 文章标签： jquery DOM validation插件 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41824825/article/details/121776388
版权

前端（四）——JQuery（引入、语法、事件、特效、）、DOM（常用方法，取、删元素、选择器）、validation插件（表单验证）

一、JQuery介绍与引入方式

1、简介

简介不多描述，百度到处都有，这里稍微介绍一下：
在这里插入图片描述

1.jquery就是对js的封装的一个框架。
2.优化HTML文档操作，事件处理，动画设计，ajax交互。
3.jquery兼容各种主流的浏览器。

2、jquery的引入

a、直接引入

1.下载的地址：https://jquery.com/
2.jquery-1.8.3.js——开发的版本。
  jquery-1.8.3.min.js——压缩的版本，体积小。

在这里插入图片描述

b、使用 cdn 引入

cdn 引入意思是直接使用网络上的 jquery 文件，不需要进行下载，直接使用。

百度cdn：
在这里插入图片描述
新浪 cdn：
在这里插入图片描述
Google cdn：
在这里插入图片描述

二、JQuery 语法

1、准备函数

jquery 的准备函数相当于 js 的 onload 。

1.使用jquery，必须使用 $ （美元）符号。
2.jquery准备函数的特点：
	A.jquery：准备函数有多种写法。
	B.jquery：准备函数优先于js的准备函数加载。
	C.jquery：准备函数可以定义多个，都是会执行的。

<script>
	window.onload=function(){
		alert("1111");
	}
	window.onload=function(){
		alert("2222");
	}
	
	$(function(){
		alert("3333");
	});
	$(document).ready(function(){
		alert("4444");
	})
</script>

2、 jquery 与 js 之间的转换

a、jquery 转换成 js

	jquery对象.get（0）  或者  jquery对象[0]

b、js 转换成 jquery

	$（js对象）

3、基本选择器

在这里插入图片描述
注意：类选择器与标签选择器，返回单标签的时候，是jquery对象，返回数组的时候是js对象。

<script>
	//使用id选择器获取
	function showInfo01(){
		alert($("#tv_uname").val());
	}
	
	//类选择器
	function showInfo02() {
		//alert($(".tv_class").val())
		var jsStr = $(".tv_class");
		alert(jsStr.length);
	}
	
	//标签选择器
	function showInfo03(){
		var jsStr = $("input");
		for(var i=0;i<jsStr.length;i++){
			alert(jsStr[i].value);
	}
}
</script>

4、事件

注意：jquery 的事件都没有 on。

这里只举部分例子，详细的请自行百度：
在这里插入图片描述
在这里插入图片描述

	<p>第一个段落</p>
	<input type="text" />
<script>
	// $("p").click(function(){
		// $(this).hide();
	// })
	
	$("p").dblclick(function(){
		alert("1111");
		// $(this).show();
	});
	
	// $("p").mouseover(function(){
		// alert("22222");
	// })
	
	// $("p").mouseout(function(){
		// alert("33333");
	// });
	
	// $("p").hover(function(){
		// alert("44444");
	// },function(){
		// alert("55555");
	// })
	
	$("input").blur(function(){
		$(this).css({"background-color":"#cccccc"})
	});
	
	$("input").focus(function(){
		$(this).css({"background-color":"#ffffff"})
	});
</script>

5、jquery 特效

特效这块自行尝试。

a、显示与隐藏

在这里插入图片描述

<body>
	<div></div>
	<input type="button" value="显示" id="tv_show" />
	<input type="button" value="隐藏" id="tv_hide" />
	<input type="button" value="显示与隐藏" id="tv_show_hide" />
	<script>
		$("#tv_show").click(function(){
			$("div").show(2000,function(){
				alert("1111")
			});
		});
		
		$("#tv_hide").click(function(){
			$("div").hide(2000,function(){
				alert("2222");
			});
		})
		
		$("#tv_show_hide").click(function(){
			$("div").toggle(2000,function(){
				alert("3333");
			});
		})
	</script>
</body>

b、淡入淡出

在这里插入图片描述

<body>
	<div></div>
	<input type="button" value="显示" id="tv_show" />
	<input type="button" value="隐藏" id="tv_hide" />
	<input type="button" value="显示与隐藏" id="tv_show_hide" />
	<script>
		$("#tv_show").click(function(){
			$("div").fadeIn(2000,function(){
				alert("1111");
		});
		
		// $("div").show(2000,function(){
			// alert("1111")
		// });
		});
		
		$("#tv_hide").click(function(){
			$("div").fadeOut(2000,function(){
				alert("2222");
		});
		
		// $("div").hide(2000,function(){
			// alert("2222");
		// });
		})
		
		$("#tv_show_hide").click(function(){
			$("div").fadeToggle(2000,function(){
				alert("3333");
		});
		
		// $("div").toggle(2000,function(){
				// alert("3333");
			// });
		})
	</script>
</body>

c、滑动效果

在这里插入图片描述

<body>
	<div></div>
	<input type="button" value="显示" id="tv_show" />
	<input type="button" value="隐藏" id="tv_hide" />
	<input type="button" value="显示与隐藏" id="tv_show_hide" />
	<script>
		$("#tv_show").click(function(){
			$("div").slideDown(2000);
			// $("div").fadeIn(2000,function(){
				// alert("1111");
		// });
		
		// $("div").show(2000,function(){
				// alert("1111")
			// });
		});
		
		$("#tv_hide").click(function(){
			$("div").slideUp(2000);
			// $("div").fadeOut(2000,function(){
				// alert("2222");
		// });
		
		// $("div").hide(2000,function(){
				// alert("2222");
			// });
		})
		
		$("#tv_show_hide").click(function(){
			$("div").fadeToggle(2000,function(){
				alert("3333");
		});
		
		// $("div").toggle(2000,function(){
				// alert("3333");
			// });
		})
		
		$("#tv_show_hide").click(function(){
			$("div").slideToggle(2000);
			// $("div").fadeToggle(2000,function(){
				// alert("3333");
		// });
		
		// $("div").toggle(2000,function(){
				// alert("3333");
			// });
		})


	</script>
</body>

4、自定义

注意：在自定义动画中，设置动画的时候，需要给 html 标签设置定位。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: red;
				position: relative;		/*设置*/
			}
		</style>
	</head>
	
	<body>
		<div></div>
		<input type="button" id="tv_btn" value="点击" />
		<input type="button" id="tv_btn01"value="停止" />
		
		<script>
			$("#tv_btn01").click(function(){
				$("div").stop();
			})
			$("#tv_btn").click(function(){
				$("div").slideUp(5000);
			/*$("div").animate({*/
			// height:'toggle'
			// left:'250px',
			// width:'+=300px',
			// height:'+=300px',
			// opacity:'0.5'
			/*});*/
			})
		</script>
		
	</body>
</html>

三、JQuery DOM

1、常用方法、设置、取值

在这里插入图片描述

2、追加元素

在这里插入图片描述

3、删除元素

在这里插入图片描述

4、jquery 操作 css 类选择器

在这里插入图片描述
注意：这里添加类选择器时，不用加 # 或者 . 这些符号。

5、jquery 操作 css

语法：$(选择器).css({样式})

在这里插入图片描述

6、jquery 常用的选择器

a、过滤选择器

在这里插入图片描述

b、层级选择器

在这里插入图片描述

c、属性选择器

在这里插入图片描述

四、validation 插件的使用

1、插件简述

JQuery框架中有着大量的功能插件，每种插件都有自己独有的功能。

validation 插件的作用就是在于表单的验证。如果是自己写表单验证的规则，则代码会非常多，而且现在也有现成的插件使用，所以干脆直接用现成的插件。

2、插件导入

在这里插入图片描述

3、插件的使用

由于是表单的验证，所以自行写 input 语句，来验证功能：

a、为指定表单加入校验

在这里插入图片描述

b、为校验加入规则

在这里插入图片描述

c、规则速查表

在这里插入图片描述

举个例子：
在这里插入图片描述

在这里插入图片描述

也可以将提示的错误信息改成红色样式：
在这里插入图片描述

4、为规则自定义错误信息

我们可以自己自定义当用户输入错误时输出的信息：
在这里插入图片描述
在这里插入图片描述

sp_snowflake
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【笔记】jQuery学习
不二D荧林仕的博客
10-15 2075
十分详细的jQuery的学习笔记，包含部分案例的知识点
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
11-22
- **广泛的CSS选择器支持**：jQuery支持CSS1到CSS3的选择器，甚至包括一些特有的过滤选择器，如偶数选择器`$(“tr:even”)`和奇数选择器`$(“tr:odd”)`，以及CSS3的伪类选择器等。 - **错误处理**：jQuery在执行...
Dom（十一） 表单验证
Oliver尹的博客
08-19 761
表单验证 提交数据前对用户输入进行验证 这类验证通常验证的是格式是否正确，比如是否输入了正确的邮箱地址，手机号码等信息 优点： 当输入有误时及时的提醒用户，优化用户体验。 提前避免部分服务器不能处理的格式，过滤掉部分不安全数据。 表单验证的类型 表单元素的内置验证 表单验证API 自定义验证 表单元素的内置验证 通过设置表单元素的校验属性进行验证 当元素通过校验时 元素可以...
jquery-validation 使用
weixin_30776545的博客
11-26 91
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　jquery-validation 使用 　　　　　　jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义...
通过CDN引入jQuery的几种方式
baocuan8515的博客
07-04 2242
百度 CDN <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> 新浪 CDN <head> <script ...
JavaScript Validation Framework(JSValidation)用户手册
Jenhy的专栏
04-07 3074
1. JSValidation是什么？如首页所说，JSValidation是客户端表单验证框架，用在BS系统中，或者简单的网页系统中。表单验证在这些开发中很常见：新用户注册，需要校验某些字段；用户登陆，需要校验；等等。在这之前，页面开发者（JavaScript开发者）需要编写大量的JavaScript来与表单对象交互，并进行校验。常见的校验如不能为空，必须满足长度要求，必须为数字，必须为Ema
jQuery——概述、使用、选择器、DOM操作
Guizy
02-19 1650
目录 jQuery概述 jQuery的使用 JQuery对象和JS对象区别与转换 jQuery选择器 基本选择器 层级选择器 属性选择器 过滤选择器 表单属性选择器 jQuery的DOM操作 page指令 include指令 taglib指令 jQuery概述 jQuery 是一个快速、简洁的 JavaScript 框架，是一个优秀的 JavaScript 代码库，jQue...
jQuery基础——选择器的补充方法——过滤方法、查找方法
m0_54066656的博客
08-31 1452
JQ基础之过滤方法、查找方法。
JQuery选择器绑定事件及修改内容的方法
10-24
本文将详细介绍如何使用jQuery选择器来绑定事件以及修改页面元素内容的方法。 首先，我们来了解一下什么是jQuery选择器。jQuery选择器是用于选择页面元素的一种方式，它类似于CSS选择器。在jQuery中，几乎所有的...
jQuery元素选择器用法实例
10-25
总结来说，通过本文给出的实例，我们可以看到jQuery元素选择器的强大之处：它通过简单直观的语法，让我们能够迅速地选取页面中的元素，并对它们执行各种操作。对于初学者来说，掌握元素选择器的使用是开始学习jQuery...
jQuery实现在新增加的元素上添加事件方法案例分析
12-12
在jQuery中，为新增加的元素添加事件是一个常见的需求，特别是在动态生成内容...对于那些对jQuery感兴趣的同学，可以进一步研究相关专题，如事件处理、选择器的使用、JSON数据操作、动画特效等，以提升jQuery编程能力。
NodeJS使用jQuery选择器操作DOM
10-24
在NodeJS中使用jQuery选择器操作DOM可以让开发者利用jQuery提供的丰富选择器和操作方法来操作后端的HTML/XML文档，就像在前端浏览器中操作DOM一样。 在NodeJS环境中操作DOM，一个常用的库是cheerio。cheerio专为...
前端vue项目中引入jquery
m0_49714202的博客
06-09 532
前端vue引入jquery
前端的面试题
本人小可爱
08-30 761
【代码】前端的面试题。
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1691
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
js对象操作常用方法
m0_75276704的博客
09-02 495
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 419
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1353
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
深入理解JavaScript闭包：避免常见的内存泄漏问题
最新发布
官方推荐
09-02 3530
深入理解JavaScript闭包：避免常见的内存泄漏问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值