jQuery_05 插件

已于 2022-07-28 20:01:21 修改
阅读量626 收藏
点赞数 1
分类专栏： jQuery 文章标签： jquery javascript ajax
于 2022-03-14 11:25:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61313896/article/details/123440892
版权

一：jQuery插件是什么？

  •        从本质上说jQuery插件就是我们塞进jQuery命名空间中一个庞大的函数。通过使用别人或者自己开发好的插件，我们可以写更少的代码来实现一个想要的功能，极大的提高我们的开发效率。

  • 往类库里面去扩展方法，这类方法就是jQuery插件。

二：为什么要使用jQuery插件？

  1. 结构清晰、易于理解。各个插件之间是相互独立的，所以结构非常清晰也更容易理解。

  2. 可移植性强、重用力度大。因为插件本身就是由一系列小的功能结构组成，而且通过接口向外部提供自己的服务，所以复用力度更大，移植也更加方便

  3. 可以在软件开发的过程中修改应用程序。由于采用了插件的结构，可以在软件的开发过程中随时修改插件，也可以在应用程序发行之后，通过补丁包的形式增删插件，通过这种形式达到修改应用程序的目的。

三：jQuery中的插件有哪几种？

  • 自定义插件

  • 第三方插件

四：jQuery中的自定义插件是什么？

  • 是在jQuery命名空间内部添加一个函数

五：jQuery中的自定义插件的方法有哪些？

  •  $.extend()    实现对象继承

语法结构：

  •    $.extend(对象1,对象2)----->对象1继承对象2的属性与方法 

  •     注意：若有三个对象及以上，则第一个对象继承后面所有的对象的属性及方法 

案例：两个对象的继承

          //定义对象
        var aname = {
            name: "李白",
			//方法
            exercise: function() {
                console.log(this.name + "在喝杜康")
            }
        }
             //调用对象的定义方法
			  aname.exercise();//在console界面显示
              //李白在喝杜康
			  
			  //定义对象
           var bname = {
            name: "杜甫",
            athletics: function() {
                console.log(this.name + "在修建草屋中")
            }
        }
          //调用对象的定义方法
		  bname.athletics();//杜甫在修建草屋中
		  
		  //bname继承了aname的属性与方法
          $.extend(bname, aname); 

          console.log(bname);//object

        bname.athletics()//李白在修建草屋中
        bname.exercise()//李白在喝杜康

  • $.extend()   扩展jQuery类方法

语法结构：

  •  $.extend({

                  方法名：function(){方法体}

                      })

案例： 扩展$.max()和$.min()方法

      //求最大值(最小值)
        $.extend({
            //两数最大值
            myMax: function(a, b) {
                return a > b ? a : b
            },
            //两数最小值
            myMin: function(a, b) {
                return a < b ? a : b
            },
            //多个数的最大值
            moreMax: function(...rest) {
                var f = -Infinity //存放当前比较大的值
                for (var i of rest) { //遍历每个参数
                    f = Math.max(f, i) //比较两个数字的大小 将其中大的一个赋值给f
                }
                return f;
            }
            //1.多个数字的最小值
        })

        var a1 = $.myMax(1, 2);
        console.log(a1);//2
        var a2 = $.myMin(1, 2);
        console.log(a2);//1

        var a3 = $.moreMax(-1, -2, -3, -4);
        console.log(a3);//-1

        //Infinity 无穷大
        //-Infinity 无穷小
        console.log(-1 > -Infinity);//true

  • $.fn.extend()       扩展jQuery对象方法

   语法结构： 

  • $.fn.extend({

                  方法名：function(){方法体}

                      })

注意：多个方法之间用逗号隔开

案例：复选框的全选和取消全选功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插件</title>
		<script src="js/jquery-3.5.1.js"></script>
		<script>

        //1.3 $.fn.extend()扩展jQuery对象方法
        //案例3：实现全选效果

        // 类方法
        // $.each()   相当于  DBHelper.getCon()
        // 对象方法
        // $().not()  相当于  new Date().getTime()

        //给$的对象方法做了拓展
        $.fn.extend({
            //拓展了一个名字为checkAll的方法
            checkAll: function(f) {
                $("input").prop("checked", f)
            }
        })
        
		 //调用方法
        $(function() {
            $("#all").click(function(){
                $("#all").checkAll(all.checked)
            })
        })

        /* 二、第三方插件:表单验证插件 */
        //案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
    </script>
	</head>

	<body>
		<input type="checkbox" id="all">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
	</body>
</html>

六：jQuery中的第三方插件是什么？

  • 一些已经定义和封装函数方法的插件，在我们需要插件进行相关功能的操作实现，可以从外部调用，减少代码，提高编写效率

七：jQuery的插件有哪几种？

  1. jQuery表单验证插件Validation

  2. jQuery表单插件Form

  3. 动态绑定事件插件livequery

  4. 管理Cookie的插件Cookie

  5. 模态窗口插件SimpleModal

八：jQuery的插件中的表单验证插件

  •       表单验证主要是针对表单元素的值进行验证，并根据验证结果给出文字或图片提示；主要验证用户是否输入了内容或者输入的内容是否符合要求。

  • 常用的表单验证插件有：jQuery-validate、formValidator

九：jQuery-validate表单插件的作用如何？

  •         jQuery-validate插件提供了强大的表单验证功能，能够让客户端表单验证变得更简单，同时它还提供了大量的可定制化选项，以满足应用程序的各种需求。该插件捆绑了一套非常有用的验证方法，包括 URL 和电子邮件验证，同时也提供了API允许用户自定义校验方法。提供的所有捆绑方法默认使用英语作为错误信息，并且在国内外广泛使用。

十：使用插件的步骤

  • 下载jQuery插件验证库-------jquery.validate.js

  • 将类库引入页面

  • 两种方式使用验证-----HTMl标签属性方式/js方式

		<script src="js/jquery-3.5.1.js"></script>
		<!--如果要使用jquery-validation 必须先导入jquery-->
		<script src="jquery-validation-1.14.0/dist/jquery.validate.js"></script>
		<!-- 中文汉化包 -->
		<script src="jquery-validation-1.14.0/dist/localization/messages_ar.js"></script>

  • HTMl标签属性方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
	<style type="text/css">
	*{padding:0; margin:0;}
	body{
		margin-top: 0px;
		margin-right: auto;
		margin-bottom: 0px;
		margin-left: auto;
		font-size:12px;
		line-height:30px;
	}
	.center{
		float:none;
		width: 763px;
		clear:both;
		margin-top: 0px;
		margin-right: auto;
		margin-bottom: 0px;
		margin-left: auto;
		border-left:solid 1px #cacaca;
		border-right:solid 1px #cacaca;
	}
	.inputs {
		border: 1px solid #333;
		width:120px;
		float:left;
	}
	.left{width:200px;
	text-align:right;
	padding-right:5px;
	}
	.red{
		color:#ff0000;
		padding-left:10px;
		font-size:12px;
		}
	</style>
	<script type="text/javascript">
		//封装ID
	function $(ElementId){
		return document.getElementById(ElementId);
		}
		//用户
	function checkUser(){
	   var user=$("user").value;	
	   var userId=$("userId");	
	   userId.innerHTML="";
	   if(user==""){
		   userId.innerHTML="用户名不能为空";
		   return false;
		}
	}	
	 //密码
	function checkPwd(){
	   var pwd=$("pwd").value;	
	   var pwdId=$("pwdId");	
	   pwdId.innerHTML="";
	   if(pwd==""){
		 pwdId.innerHTML="密码不能为空";
		 return false;
		}
		if(pwd.length<6 || pwd.value.length>12){
		 pwdId.innerHTML="密码长度为在6—12字符";
		 return false;
		}
	}
	//性别
	function checkSex(){
		var sexId=$("sexId");
		sexId.innerHTML="";
		var j=0;
	var sex=document.getElementsByName("sex");	
	for(var i=0;i<sex.length;i++){
		if(sex[i].checked==true){
			j=1;
			break;
			}
		}
	if(j==0){
		sexId.innerHTML="请选择性别";
		return false;
		}
		return true;
		}
		//出生日期
	function checkBirth(){
		var birth=$("birth").value;
		var birthId=$("birthId");
		birthId.innerHTML="";
		var year=birth.substring(0,4);
		var month=birthsubstring(5,7);
		var day=birth.substring(8,birth.length);
		var time=new Date();
		if(birth==""){
			birthId.innerHTML="请填写出生日期";
			return false;
		}
		if(birth.length<10){
			birthId.innerHTML="出生日期格式错误，例如2009-08-16";
			return false;
		}
		if(birth.charAt(4)!="-"||birth.value.charAt(7)!="-"){
				birthId.innerHTML="出生日期格式错误，例如2009-08-16";
				return false;
			}
		if(isNaN(year)||isNaN(month)||isNaN(day)){
			birthId.innerHTML="出生年月日必须是数字";
				return false;
			}
		if(year<1900 || year>time.getFullYear()){
			birthId.innerHTML="出生年份的范围在1900—"+time.getFullYear();
			return false;
			}
		if(month<1 ||month>12){
			birthId.innerHTML="您输入的月份不在1-12月之间";
			return false;
			}
		if(day<1 ||day>31){
			birthId.innerHTML="您输入的天数不在1-31之间";
			return false;
			}
		}
		 //电子邮件
	function checkEmail(){
		var mail=$("email").value;
		var emailId=$("emailId");
		emailId.innerHTML="";
		if(mail==""){//检测Email是否为空
			emailId.innerHTML="Email不能为空";
			return false;
			}
		if(mail.indexOf("@")==-1){
			emailId.innerHTML="Email格式不正确\n必须包含@";
			return false;
			}
		if(mail.indexOf(".")==-1){
			emailId.innerHTML="Email格式不正确\n必须包含.";
			return false;
			}
		}
	</script>
	</head>
	
	<body>
	<div class="center"><img src="img/header.jpg" /></div>
	<div class="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
	<form action="sucess.html" method="post" name="myform">
	  <tr>
	    <td class="left">用户名：</td>
	    <td><input id="user" type="text"  class="inputs" onblur="checkUser()"/>
	      <div id="userId" class="red"></div></td>
	  </tr>
	  <tr>
	    <td class="left">密码：</td>
	    <td><input id="pwd" type="password"  class="inputs" onblur="checkPwd()"/><div id="pwdId" class="red"></div></td>
	  </tr>
	  <tr>
	    <td class="left">性别：</td>
	    <td><div style="float:left;"><input name="sex" type="radio" value="男" />男 <input name="sex" type="radio" value="女" />女</div>
	    <div id="sexId" class="red"></div></td>
	  </tr>
	  <tr>
	    <td class="left">出生日期：</td>
	    <td><input id="birth" type="text"  class="inputs" onblur="checkBirth()"/><div id="birthId" class="red"></div></td>
	  </tr>
	  <tr>
	    <td class="left">电子邮箱地址：</td>
	    <td><input id="email" type="text"  class="inputs" onblur="checkEmail()"/><div id="emailId" class="red"></div></td>
	  </tr>
	  <tr>
	    <td>&nbsp;</td>
	    <td><input name="btn" type="submit" value="注册" onclick="return checkSex()" /> <input name="cancel" type="reset" value="清除" /></td>
	  </tr>
	  </form>  
	</table>
	</div>
	<div class="center"><img src="img/footer.jpg" /></div>
	</body>
	</html>

  • js方式

  • 验证及错误信息语法：

  •     $("表单元素").validate（{

                 rules: {

                  字段验证规则

                     }，

          messages：{

             字段错误信息

                }

       }）

  •  验证规则

  

  • 案例：表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>插件</title>
		<script src="js/jquery-3.5.1.js"></script>
		<!--如果要使用jquery-validation 必须先导入jquery-->
		<script src="jquery-validation-1.14.0/dist/jquery.validate.js"></script>
		<!-- 中文汉化包 -->
		<script src="jquery-validation-1.14.0/dist/localization/messages_ar.js"></script>
		<script>
			$(function(){
				  //启用表单验证  validate
				  $("myForm").validate({
					//验证规则
					rules: {
		            //用户名:								
						uname :{
							  required: true, //必填字段
							  rangelength: [6, 12] //用户名字长度在6~12位
						},
						
						//密码
						upwd1 :{
							 required: true, //必填字段
							 rangelength: [6, 10] //密码长度在6~10位
						}
									
					//确认密码	
					upwd2 :{
						 equalTo: "#p1" //输入值必须与id为p1的输入值相同		
					},
										
					//邮箱					
					emal :{
						  required: true, //必填字段
						  email:true //正确格式的电子邮件
					},					
								
					//网址
					wangzhi :{
						 required: true, //必填字段
						 url:true //正确格式的网址
					},		
					
					//年龄
					uage :{
						 digits: true, //必须为整数
						 range: [18, 150] //数字要在18~150之间
					}
										
			         }    
				  })				  
			  })
		  </script>
	</head>
	<body>
		<form action="" id="myForm">
			<p>
				用户名: <input type="text" name="uname">
			</p>
			<p>
				密码: <input type="password" name="upwd1" id="p1">
			</p>
			<p>
				确认密码: <input type="password" name="upwd2" id="p2">
			</p>
			<p>
				邮箱: <input type="text" name="emal">
			</p>
			<p>
				网址: <input type="text" name="wangzhi">
			</p>
			<p>
				年龄: <input type="text" name="uage">
			</p>
			<p>
				<input type="submit">
			</p>
		</form>
	</body>
</html>

渊婉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScriptJQuery_jQuery简介
JiuMeilove的博客
06-24 2万+
仓库:可以把很多东西放入这个仓库里面,找到东西只需要到仓库里查找到就可以了JavaScript:即library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate,hide,show,比如获取元素等简单理解:就是一个js文件,里面对原生js代码进行了封装,存放到里面,这样我们可以快速高效的使用这些封装好的功能了. 比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)这些库都是对原生JavaScr
react怎么引入jquery_在react里面使用jquery插件
weixin_39673184的博客
12-22 3092
背景：虽然现在react,vue等框架开启了前端开发的新篇章，但对于一些比较复杂的页面，比如想在项目里面生成组织架构图，人员汇报关系等还是需要用到之前的jquery插件。比如：首先要在react里面安装jquery：npm install jquery --save将$变量挂载到window下面，可以在项目中直接使用$,不用再引用//修改webpack配置文件: plugins:[new ...
「jQuery系列」jQuery Cookie插件功能介绍
日常笔记/总结/系列知识梳理
03-14 1959
jQuery Cookie 插件是一个用于处理浏览器 cookies 的 jQuery 扩展插件。它提供了一种简单、方便的方式来读取、写入和删除 cookies，而无需编写复杂的 JavaScript 代码。
jQuery 插件
m0_62604616的博客
03-22 1672
今天呢，给大家带来的是关于jQuery插件的分享。 插件分为自定义插件和第三方插件，自定义插分为$.extend和$.fn.extend，而第三方插件呢是别人写的，我给大家带来一个官方的表单验证插件。 一、自定义插件 1、$.extend: $.extend有两个作用，【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2 代码块： <script type="text/javascript"> $..
Layui 引入jQuery.Cookie插件
风不知从何处起的小屋
01-18 2793
首先你需要下载jQuery.Cookie.js 下载地址 然后将 文件复制粘贴至你的项目的静态文件资源中，我和layui引入的jquery.js放在一起并将文件改名为了cookie.js，如下图所示 然后修改cookie.js的文件内容（后面有详细的修改好的js） layui.define('jquery', function (exports) { //依赖jQuery var jQuery = layui.jquery; //插件内容 将jquer
编写jQuery插件
SeekerTime
07-11 1335
一、插件的种类        jQuery的插件主要分为三种类型：        1、封装对象方法的插件                         将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。        2、封装全局函数的插件                        可以将独立的函数加到jQuery命名空间之下。如jQuery.
《jQuery 自定义插件》
ZYJL的博客
09-19 3413
1. 插件机制简介 往jquery类库里面去扩展方法，这类方法就是jquery插件 2. json的三种格式 2.1 对象 $(function() { //jQuery程序入口 var jsonObj1={ sid:'001', sname:'00A' } }) 2.2 列表/数组 $(function() { var jsonObj2=[1,2,3...
jquery 图片预览插件viewer
u010417783的博客
08-17 1724
官方地址 1 引入 <link href="__CDN__/assets/viewer/css/viewer.css" rel="stylesheet"> <script charset="utf-8" src="/assets/viewer/js/viewer.js"></script> 2 html <div class="bbs-images-list"> {foreach $vo['image'] as $va} <i
jQuery插件以及插件下载
weixin_67235801的博客
03-22 4145
jQuery下载以及表单验证
jQuery插件
weixin_65474399的博客
03-22 1355
一，自定义插件 $.extend 作用： 1.对象继承：$.extend(对象1,对象2)---->对象1继承对象2 2.扩展jQuery类方法：$.extend({方法名：function(){方法体}}) <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1..
jQuery_Tips_插件
07-01
一个好看的TIPS jQuery 小贴士 插件 操作简单 可自定义样式
jquery_Switch按钮插件
11-23
jquery_Switch按钮插件
jquery_validate插件总结
01-05
这是一个关于jquery_validate插件学习的总结，内容不多，但是都是干货，有兴趣的可以看一下。
Jquery_PageViewJS翻页插件
04-28
样式使用bootstrap,通过jquery实现多浏览器支持可回调的翻页插件
jquery_date_time插件
07-27
jquery时间插件，使用方法压缩包中的ReadMe.txt已经详细说明，插件功能：实现网页中从input框中选择输入的时间，时间格式为：yyyy-mm-dd hh:mm的格式，选择时间界面通过jquery实现。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1189
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1085
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 495
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 169
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
js/plugin/jquery_ajax_document.js
08-26
js/plugin/jquery_ajax_document.js是一个使用jQuery库的插件，用于处理Ajax请求和处理文档对象的操作。 该插件提供了一些方法来发送Ajax请求，可以将请求发送到服务器并获取响应数据。通过使用这些方法，我们可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值