本文介绍: 1.首先jQuery什么呢?简单来说:“jQuery一个快速简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用功能代码,提供一种简便的JavaScript设计模式优化HTML文档操作事件处理动画设计和Ajax交互简单了解一下jQuery什么,…

1.首先jQuery什么呢?

        简单来说:“jQuery一个快速简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用功能代码,提供一种简便的JavaScript设计模式优化HTML文档操作事件处理动画设计和Ajax交互

 简单了解一下jQuery什么,就让我们来了解一下他的插件中的自定义插件表单验证吧!

 2.自定义插件(补充一下:$这个符号其实是jQuery的缩写)

        2.1:$.extend

[作用1]:对象继承:$.extend(对象1,对象2)—->对象1继承对象2

语法格式:$.extend(对象1,对象2),对象1继承对象2中的属性

var p1 = {};

var p2 = {"name":"大锤","age":18};

console.info("继承前p1:"+p1.name+","+p1.age);

console.info("继承前p2:"+p2.name+","+p2.age);

$.extend(p1,p2);

console.info("继承后:"+p1.name+","+p1.age);

console.info("继承后:"+p2.name+","+p2.age);

输出继承前的内容时 很明显p1中是空的 什么没有,$.extend(p1,p2);

之后,p1继承了p2中的内容。再次输出就会输出继承后的属性

 那么假如说,我们有三个对象呢?一个对象继承了另外两个对象该怎么写?我们来看一下代码

var p1 = {};

var p2 = {"name":"大锤","age":18};

var p3 = {"sex":"男"};

console.info("继承前p1:"+p1.name+","+p1.age+","+p1.sex);

console.info("继承前p2:"+p2.name+","+p2.age+","+p2.sex);

console.info("继承前p3:"+p3.name+","+p3.age+","+p3.sex);

$.extend(p3,p1,p2);

console.info("继承后p1:"+p1.name+","+p1.age+","+p1.sex);

console.info("继承后p2:"+p2.name+","+p2.age+","+p2.sex);

console.info("继承后p3:"+p3.name+","+p3.age+","+p3.sex);

p1对象继承p2,也就是p1里面有了两个属性然后p3对象继承p1对象,p3中本来有一个sex属性,现在继承到p1继承到p2的两个属性。现在p3中有三个属性​​​​​​

作用2】扩展jQuery类方法:$.extend({方法名:function(){方法体}})注意,多个方法之间逗号隔开

上面继承了对象的属性,那么方法可以继承吗?哎,来看一下

$.accd();请问现在有效果吗?报错 对吧。应该根本就没有这个方法。看我怎么写 他就不报错了。

$.extend({

abcd:function(){

console.info("你好呀.这个我们自己写的方法");

}

})

$.abcd();

现在我们在来刷新一下页面效果,是不是输出了一句话。

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

$.extend({

min:function(a,b){

return a>b?b:a;

},

max:function(a,b){

return a>b?a:b;

}

})

console.info($.min(10,20));//求两个数字的最小值

console.info($.max(10,20));//求两个数字最大值

其实有点类似java中的静态方法定义使用时候类似静态方法调用

【其次】$.fn.extend

上面我们说给jQuery类扩展方法,类似于java中的静态方法是$. 来直接使用。而我们之前用的很多方法是由元素调用的。接下来 我们学习一下怎么扩展元素的方法

​​​​​​​​​​​​​​        【作用扩展jQuery对象方法:$.fn.extend({方法名:function(){方法体}})注意多个方法之间逗号隔开

案例扩展复选框全选取消全选功能升级之前的版本

$.fn.extend({

//全选

check: function() {

$(this).each(function() {

this.checked = true;

})

},

//全不选

uncheck: function() {

$(this).each(function() {

this.checked = false;

})

}

})

$("#checkAll").click(function() {

$(".hobby").check();//使用全选方法

})

$("#checkNoAll").click(function(){

$(".hobby").uncheck();//使用全不选方法

})

现在我们可以直接元素调用我们定义的方法了

 3.表单验证

首先:要使用插件所以我们需要先把插件下载下来。validate插件下载路径https://jqueryvalidation.org

注意:validate插件下载路径不在jQuery官网

下面呢,先详细介绍一下具体步骤

  1. 使用步骤【1.2】下载jQuery插件验证库 jQuery.validate.js

validate插件下载路径https://jqueryvalidation.org

​​​​​​​​​​​​​​        【1.2】将类库引入页面

下载完成后是一个压缩包文件解压找到dist目录下的jquery.validate.js文件就是我们要用的插件类

​​​​​​​​​​​​​​        案例演示表单验证(用户名密码确认密码年龄邮箱网址)

页面示例代码

<body>

<form action="http://www.baidu.com" method="post" id="myForm">

用户名:<input type="text" name="uname"/><br>

密码:<input type="text" name="upwd"/><br>

确认密码:<input type="text" name="upwd2"/><br>

邮箱:<input type="text" name="uemail"/><br>

网址:<input type="text" name="uurl"/><br>

年龄:<input type="text" name="uage"/><br>

<input type="submit" value="注册" />

</form>

</body>

语法格式:

以验证用户名不能为空为例:

$(function(){

$("#myForm").validate({

rules:{

//用户名不能为空

uname:"required"

},

messages:{

uname:"用户名不能为空"

}

})

})

rules:里面写要验证属性,以及验证

messages:里面对应属性验证的提示信息,如果没有写messages就会默认使用插件提供的信息。上面的例子只有一个不能为空验证。如果不能为空的同时,要求长度必须在5–10之间。又该怎么写。

$("#myForm").validate({

rules:{

/* 用户名不能为空,并且长度:5--10 */

uname:{

required:true,

rangelength:[5,10]

}

},

messages:{

uname:{

required:"用户名不能为空",

rangelength:"用户名长度必须在5-10之间"

}

}

})

注意:在添加多个验证时,一定要注意语法格式,用用大括号把验证括起来。验证信息也是一样

现在我们的验证信息都是黑色字体,有人说了,验证的提示信息不应该都是红色的字体吗?怎么设置红色字体呢?这个简单,不过需要我们写在样式里面

 

原文地址:https://blog.csdn.net/m0_62019369/article/details/124637833

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_44752.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注