jQuery
注:前段时间在菜鸟教程自学了一下jQuery,记录一下笔记,如有错误,望多多指正,感谢感谢。
1、jQuery下载:https://www.jq22.com/jquery-info122#google_vignette
基本使用:下载解压jar包(备用),IDEA或eclipse构建一个工程,把jQuery文件复制到工程目录下。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
引用jQuery方式有两种,一种是通过src指定到项目的js,
<script src="../js/jquery-3.5.1.min.js"></script>
另一种是通过CDN(内容分发网络)指定jquery,建议使用第二种
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
//完整代码
<!--<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>-->
<!--<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<script src="../js/jquery-3.5.1.min.js"></script>-->
<script>
if(typeof jQuery=="undefined"){// 判断jQuery是否定义。
window.alert("jquery未引入");//弹出弹窗
}else{
window.alert("jQuery已成功引入");
}
</script>
2.jQuery 语法
jQuery语法是通过选取html元素,并对选取元素进行某些操作。
基础语法:$(selector).action()
- $:美元符号定义jQuery
- (selector):选择符(selector)选择和查找html元素
- action(): jquery 的action()执行对元素的操作
<body>
<p>点我1</p>
<p id="t1">点我2</p>
<p class="button">点我3</p>
<a>hello</a>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$("p.button").hide();//隐藏class为button的元素
$("#t1").hide();//隐藏id为t1的元素
$("a").hide();//隐藏所有a标签
</script>
文档就绪事件
//也是jQuery入口函数
$(document).ready(function(){
//开始写jQuery代码。。。
});
//简写
$(function(){
//开始写jQuery代码。。。
})
//JavaScript入口函数
window.οnlοad=function(){
//执行代码
};
作用:防止文档在完全加载之前运行jQuery代码,即在DOM完全加载之后才可以对DOM进行操作。
如果在文档没有完全加载完成之前运行函数,操作可能失败。如:
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
JS和jQuery入口函数的区别:
- jQuery的入口函数是在html所有标签(DOM)都加载之后,才会去执行。
- js里的window.onload事件是等到所有内容,包括图片之类的文件都加载完之后,才会去执行
jQuery选择器
允许对单个元素或组件进行操作
jQuery选择器基于元素的id、类、类型、属性、属性值等“查找”或选择HTML元素,它基于已经存在的css选择器,此外,还有一些它自定义的选择器。
jQuery中的所有选择器都以美元符号开头:$()
元素选择器
基于元素名选取元素:
$(“p”):选取页面上所有
元素
<body>
<p>广告</p>
<p>广告1</p>
<p>广告2</p>
<p>广告3</p>
<button class="button">点我关闭广告</button>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>-->
<script>
/*$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
})*/
$(function(){
$("button").click(function(){ // 用户点击按钮后,关闭广告。
$("p").hide();
});
});
</script>
jQuery事件
jQuery是为事件处理而特别设计的。
事件:页面对不同访问者的响应叫做事件。
事件中经常使用的术语“触发”(或激发),e:当您按下按键时触发keypress事件。
常见DOM事件:
click dblclick单击双击事件
mouseenter:当指针进入被选元素时,会发生mouseenter事件 e:当鼠标指针进入p元素时,设置背景色为红色且长度变成200px。
$(function(){
$("p").mouseenter(function(){
$("p").css("background-color","blue")
$("p").css("width","200px")
});
$("p").mouseleave(function(){
$("p").css("background-color","lightgray")
$("p").css("width","1000px")
});
});
mouseenter通常和mouseleave一起使用,鼠标移动到区域内变颜色,鼠标离开区域恢复颜色。
hover():鼠标悬停事件
$("p").hover(function () {
$("p").css("background-color","red");
},function(){
$("p").css("background-color","pink");
});
//语法:
$(selector).hover(inFunction,outFunction)
//调用
$(selector).hover(handlerIn,handlerOut)
//同
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
记录键盘事件:keypress()
<body>
请输入:<input type="text">
<p>按键次数:<span>0</span></p>
</body>
<script>
i=0;
$(function(){
$("input").keypress(
function () {
$("span").text(i+=1);
});
});
</script>
与keypress事件相关的事件顺序:
- keydown 键按下的过程
- keypress 键被按下
- keyup 键被松开
keypress事件不会触发所有的键(ALT,CTRL,SHIFT、ESC),若需要统计全部的按键,需要使用keydown();
提交:dosubmit();
<body>
<form>
账号:<input type="text"><br>
密码:<input type="text"><br>
<input type="submit" value="提交">
</form>
</body>
<script>
$(function(){
$("form").submit(function(){
alert("提交成功!");
});
})
change()方法
$("form").change(function(){
alert("输入框内容变化了!");
});
当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,change 事件会在元素失去焦点时发生。
focus()方法和change相反,该方法是获得焦点时发生。,如点击输入框或图片才会显示提示信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
span{
display:none;
}
</style>
</head>
<body>
<input type="text">
<span>请输入您的电话号码?</span>
<p>点击输入获取焦点。</p>
</body>
<script>
$(function(){
$("input").focus(function () {
$("span").css("display","inline").fadeOut(2000);
});
});
</script>
</html>
focus():焦点的意思 通常和blur()连用;前者是获取到焦点时触发,后者是失去焦点时触发。 blur()模糊的意思。
鼠标悬停事件:hover();
$(function(){
$(#name).hover(function1(){},function2(){})
})
jQuery 隐藏/显示
$(function(){
$("#button").click(function(){
$("p").hide(); //隐藏
});
$("#show").click(function(){
$("p").show(); //显示
});
});
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的speed参数规定隐藏/显示的速度,可以取以下值,“slow","fast"或毫秒。
可选的callback参数是隐藏或显示完成后所执行的函数名称
$("#button").click(function(){
$("p").hide(1500);
});
$("#show").click(function(){
$("p").show(1500,function(){
$("p").css("background-color","pink")
});
});
toggle()
作用:用于切换hide()和show();显示被隐藏的元素,并隐藏已显示的元素
语法:
$(selector).toggle(speed,callback);
$("button").click(function(){
$("p").toggle(1500);
});
jQuery淡入淡出
jQuery Fading方法
通过jQuery ,可以实现元素的淡入淡出效果。
- fadeln():用于淡入已隐藏的元素
- fadeOut():用于淡出可见元素
- fadeToggle():可在fadeIn()和fadeOut()之间来回切换;
- fadeTo():允许渐变为给定的不透明度。
jQuery fadeln()方法 缓慢显示出模块
<body>
<div id="div1" style="width:100px;height:100px;display:none;background-color: aqua"></div>
<div id="div2" style="width:100px;height:100px;display:none;background-color: #2dbf22"></div>
<div id="div3" style="width:100px;height:100px;display:none;background-color: #bf51cb"></div>
<div id="div4" style="width:100px;height:100px;display:none;background-color: #e72f35"></div>
<button>点击淡入div盒子</button>
</body>
<script>
$(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(2000);
$("#div4").fadeIn(1500);
});
});
</script>
fadeOut(): 缓慢隐藏元素
fadeTo():允许渐变为设定的不透明度 slow:缓慢的,低速的
$("#div1").fadeTo("slow");
$("#div2").fadeTo("slow",0.5);
$("#div3").fadeTo("slow",0.2);
jQuery 效果 滑动
滑动方法: slide :滑动
- slideDown():用于向下滑动元素
- slideUp():向上
- slideToggle():切换
语法:
$(selector).slideDown(speed,callback);
例子同上面
jQuery 效果- 动画
animate()方法
语法:
$(selector).animate({params},speed,callback);
- 必须的参数定义形成动画的CSS属性
$("#div2").animate({left:'300px'});
//前提:div的style得设置成 position:absolute; position属性定义元素的定位类型,absolute:绝对定位,相当于static定位以外的第一个父元素进行定位
fixed:绝对定位,相对于浏览器窗口进行定位,
relative: 生成相对定位的元素,
static:默认值,没有定位
inherit: 继承position属性的值。
默认情况下,所有html元素都有一个静态位置,且无法移动。
如需对位置进行操作,需要先把元素的CSS position属性设置为relative、fixed或absolute。
控制多元素 $(“#div2”).animate({left:‘300px’,width:‘200px’,height:‘170px’,opacity:‘0.5’});
animate() 使用相对值
只需要在值前面加上+=或-=;
$("#div2").animate({left:'300px',width:'+=100px',height:'+=100px',opacity:'0.5'});
animate() 使用预定义的值
可以把属性的动画值设置为“show”、“hide”,“Toggle”
animate() -使用队列功能
jQuery提供针对动画的队列功能
同时创建多个animate()调用,jQuery会创建包含这些方法调用的“内部”队列,然后注意运行这些animate调用。
$("#div2").animate({left:'300px',width:'200px',height:'100px',opacity:'0.2'},1500);
$("#div2").animate({left:'300px',width:'300px',height:'400px',opacity:'0.3'},1500);
$("#div2").animate({left:'300px',width:'200px',height:'100px',opacity:'0.4'},1500);
$("#div2").animate({left:'300px',width:'300px',height:'500px',opacity:'0.6'},1500);
$("#div2").animate({fontSize:'3em',opacity:'0.2'},"slow");
jQuery 停止动画
stop():用于在动画或效果完成前对它们进行停止
stop()方法适用于所有jQuery效果函数,包括滑动、淡入淡出和自定义动画
语法:
$(selector).stop(stapAll,goToEnd);
两参数都为可选,且默认为false
因此,默认的,stop()会清除被选中元素上指定的当前动画。
jQuery Callback方法 回调
Callback函数在当前动画100%完成之后执行。
$("button").click(function(){
$("#div2").hide("slow",function () {
alert("隐藏成功");
});
)};
用了CallBack函数之后,动画会在隐藏后再打开弹窗,否则会先跳出弹窗。
jQuery 链 (Chaining)
通过jQuery,可以把动作/方法链接在一起
Chaining允许我们在一条语句中运行多个jQuery方法(在相同元素上)
jQuery 方法链接
优点:浏览器不用多次查找相同的元素。如需链接一个新动作,您只需把该动作追加到之前的动作上。
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
//字体先变红,再向上滑动,再向下滑动。
如果需要,也可以添加多个方法调用。
当进行链接时,代码行会变得很长,不过jQuery语法不是很严格,可按照希望的格式来写,比如换行和缩进
jQuery HTML
jQuery 捕获
DOM操作
jQuery提供一系列与DOM相关的方法,这使访问和操作元素和属性变得很容易。
DOM=Document Object Model(文档对象模型)
DOM定义访问HTML和XML文档的标准
获得内容 text(),html()以及val()
- text():设置或返回所选元素的文本内容
- html():设置或返回所选元素的内容(包括HTML标记)
- val(): 设置或返回表单字段的值(可以获得输入框的值)
$("button").click(function(){
alert("值为: " + $("#test").val());//属性值为用户输入的内容。(代码外的值)
alert("属性值为:"+$("#test").attr("id"));// 属性值为元素后的test(代码里的值)
});
<p>姓名:<input type="text" id ="test" value="gift"></p>
<button>点我获取输入框内容</button>
获取属性 attr()
attr()用于获取属性值;
attr和prop的区别:
attr:我们自己定义的DOM属性,如action
prop:HTML元素本身就带有的固有属性,如 id,class ,href
对于具有true和false两个属性的属性,比如checked,selected或者disabled使用prop()
<a href="https://www.baidu.com" target="_self" class="btn">百度一下</a>
<a href="#" id="link1" action="delete" rel="nofollow">删除</a>
prop()函数的结果
若没有相应的属性,返回值是空字符串
arre()函数的结果
若没有相应的属性,返回值是undefined
jQuery 设置内容和属性
就是再text(),html(),val()里填想要的值即可
如
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
允许同时设置多个值。
attr()的回调函数
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值,然后以函数新值返回你希望使用的字符串。
$("button").click(function(){
$("#runoob").attr("href",function (i,o) {
return o+"/jquery";
});
});
jQuery 添加元素
添加新的HTML内容
- append():在被选元素的结尾插入内容
- prepend():…开头…
- after():在被选元素之后插入内容
- before():…之前…
append()方法
$("ul").append("<li>hello gift</li>");
prepend() 方法
$("ul").prepend("<li>hello gift</li>");
可通过append()和prepend()方法添加若干新元素
function appendText(){
var txt1="<p>文本1</p>"; //使用html创建文本
var txt2=$("<p></p>").text("文本2"); //使用jQuery创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本三"; // 使用DOM创建text with DOM
$("body").append(txt1,txt2,txt3);//追加新元素
}
</script>
<body>
<button onclick="appendText()">添加文本</button>
append、prepend 是在元素内部嵌入。
after、before是在元素外面追加。
jQuery删除元素
如需删除元素和内容,一般可以使用以下两个jQuery方法;
- remove()- 删除被选元素(及其子元素) 会把DIV一并删除
- empty()从被选元素中删除子元素 div会保留
过滤被删除的元素
remove()方法也可以接受一个参数,允许对被删除元素进行过滤。
该参数可以是任何jQuery选择器的语法。
例如:移除所有class=“test”的p元素
$("p").remove(".italic");
获取并设置CSS类
jQuery操作css
- addClass()向被选元素添加一个或多个类
- removeClass() …删除…
- ToggleClass() 从被选元素进行添加/删除类的切换操作
- css() 设置或返回样式属性
css属性可以设置多个
css({"propertyname":"value","propertyname":"value",...});
jQuery尺寸
jQuery提供多个处理尺寸的重要方法:
- width():设置或返回元素的宽度(不包括内边距、边框或外边距)
- height()
- innerWidth():包括内边距
- innerHeight()
- outerWidth():包括内边距和边框
- outerHeight()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6fYPZIeh-1652445213654)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20220317203144720.png)]
jQuery遍历
用于其相对于其他元素的关系来“查找”或选取HTML元素,以某项选择开始,并沿着这个选择移动,直到抵达您期望的那个元素位置
家族树:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FgzrWryF-1652445213655)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20220317204316968.png)]
通过jQuery的遍历,能够从被选(当前)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对DOM进行遍历。
祖先是父,祖父,曾祖父等等,后代是子,孙,曾孙等等,同胞拥有相同的父。
遍历DOM中最大的种类是树遍历(tree-traversal)
jQuery遍历-祖先
向上遍历DOM树:
- parent() : 返回被选元素的直接父类
- parents():返回被选元素的所有祖先元素,它一路向上直到文档的根元素body
- parentaUntil() :返回介于两个给定元素之间的所有祖先元素[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vSOFh6rB-1652445213655)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20220317210419866.png)]
jQuery遍历 -后代
后代是子,孙,曾孙等等
方法:
-
children():返回被选元素的所有直接子元素,该方法只会向下一级对DOM树进行遍历
-
find():返回被选元素的后代元素,一路向下直到最后一个后代。
$(document).ready(function(){ $("div").find("*").css({"color":"red","border":"2px solid red"}); });
需要注意的是,find(“*”)括号里必须加星号,不然读取不到元素
jQuery 遍历-同胞(siblings)
同胞拥有相同的父元素
水平遍历的方法:
- siblings() :返回被选元素的所有同胞元素
- next():返回被选元素的下一个同胞元素
- nextAll(): 返回被选元素的所有跟随其后的同胞元素
- nextUntil():返回介于两个参数之间的所有同胞元素 $(“h2”).nextUntil(“h6”);
- prev()
- prevAll()
- prevUntil()
后三个方法与前面三个相似,方向相反,他们返回的是前面的同胞元素(在DOM树中沿着同胞之前元素遍历,而不是之后元素遍历)
jQuery遍历-过滤
缩小搜索元素的范围
三个最基本的过滤元素的方法是:
- first(): 第一个
- last():最后
- eq() :索引,从0开始,因此首个元素的索引号是0不是1 $(“p”).eq(1);
他们允许基于在一组元素中的位置来选择一个特定的元素
其他过滤方法,比如filter()和not()允许选取匹配或不匹配某项指标的元素。
first()方法
返回被选元素的首个元素。
filter()方法允许您规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
$("div").filter("p").css("background-color","yellow");
jQuery -AJAX简介
AJAX是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
什么是AJAX?
AJAX = 异步Javascript和XML(Asynchronous JavaScript and XML);
简言:在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。
案例:谷歌地图、腾讯微博、优酷视频、人人网等
通过jQuery AJAX方法,能够使用HTTP Get 和HTTP Post 从远程服务器上请求文本,HTML、xml或JSON,同时能够把这些外部数据直接载入网页的被选元素中。
jQuery AJAX load()方法
jQuery load()方法是简单但强大的AJAX方法
该方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必须的URL参数 :规定希望加载的URL
可选的callback参数规定当load()方法完成后所要允许的回调函数,回调函数可以设置不同的参数:
- responseTxt 包含调用成功时的结果内容
- statusTXT 包含调用的状态
- xhr 包含XMLHttpRequest对象
例子:在load()方法完成后显示一个提示框,如果load()方法已成功,则显示“外部内容加载成功!”,而如果失败,则显示错误消息:
$("button").click(function(){
$("#div1").load("text.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt="success"){
alert("外部数据加载正确");
}
if(statusTxt="error"){
alert("Error:"+xhr.status+":"+xhr.statusTxt);
}
});
});
避免多页面情形下的代码重复,可以利用load()方法,将重复代码放入单独的文件,用下列方法进行导入(这一段看不懂,回头看)
//1.当前文件中要插入的地方使用此结构:
<div class="include" file="***.html"></div>
//2.***.html中放入内容,用html格式仅仅因为会有编辑器的书写辅助。。
//3.代码:
$(".include").each(function() {
if (!!$(this).attr("file")) {
var $includeObj = $(this);
$(this).load($(this).attr("file"), function(html) {
$includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
})
}
});
或者在index文件里只写重复部分,剩下的一股脑放各自单独文件 load() 进来~
jQuery AJAX get() 和 post()方法
作用:用于通过HTTP GET 或POST请求从服务器请求数据
- get : 从指定的资源请求数据 (从服务器取回数据,注:get方法可能返回缓存数据)
- post: 向指定的资源提交要处理的数据 (也可用于服务器获取数据,不会缓存数据,并且常用于连同请求一起发送数据。
$.get() 方法
语法
$.get(URL,callback);
可选的callback参数是请求成功后所执行的函数名
$("button").click(function(){
$.get("attr.html",function(data,status){
alert("数据:"+data+"\n状态:"+status);
});
});
jQuery noConflict()方法
释放对 标 识 符 的 控 制 , 其 他 脚 本 就 可 以 使 用 标识符的控制,其他脚本就可以使用 标识符的控制,其他脚本就可以使用标识符。
$.noConflict();
//也可以通过全名来代替简写,继续使用jQuery
jQuery(document).ready(function(){
jQuery("button").click(function(){
})
})
也可以创建自己的简写,noConflict()可返回对jQuery的引用,可以存入变量,供以后使用
var jq = $.noCOnflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
JSONP(JSON with Padding)可以让网页从别的网址获取数据,即跨域读取数据。
jQuery 实例
几乎包含了所有语法和用法。
https://www.runoob.com/jquery/jquery-examples.html
jQuery选择器
$(".intro,.demo"):class 为.intro,.demo的所有元素
$(“div>p”)div元素的直接子元素的所有
元素 间接的不行
$(“div p”) div元素的后代的所有p元素
$(“div +p”) 每一个div相邻的下一个p元素
$(“div~p”)div元素同级的所有p元素
1.基本选择器
$("#id") //id选择器
$("div") //元素选择器
$(".classname") //类选择器
$("#id,.classname1,div") //组合选择器
2.层次选择器
$("#id>.classname")//直属子元素选择器
$("#id .classname") //后代元素选择器
$("#id + .classname") //相邻下一个元素选择器
$("#id ~ .classname") //兄弟元素选择器
3.过滤选择器(重点)
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于4的li (第五个li元素)
$("li:gt(2)") //下标大于2的li
$("li:lt(2)") //下标小于2的li
$("li:not(#runoob)") //挑选除了id=runoob以外的所有li
3.3可见性过滤选择器
$("li:hidden") //匹配所有不可见元素,或type为hidden的元素
$("li:visible") //匹配所有可见元素
3.4属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
$("div[id$='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤,同时满足两个属性的条件的元素
3.5状态过滤选择器
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
4.表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
上线策略 :各个系统之间的网络交互。
jQuery 插件
jQuery Validate
作用:为表单提供强大的验证功能,让客户端表单验证变得简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括URL和电子邮件验证,同时提供一个用来编写用户自定义方法的API。
导入js库
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
引入中文信息提示
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
中文信息提示包
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );
} else {
factory( jQuery );
}
}(function( $ ) {
/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
*/
$.extend($.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});
}));
使用方法
- 将校验规则写到控件中
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
$("#commentForm").validate();
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>输入您的名字,邮箱,URL,备注。</legend>
<p>
<label for="cname">Name (必需, 最小两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (可选)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">备注 (必需)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
2.将校验规则写到js代码中
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字符组成"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字符"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字符",
equalTo: "两次密码输入不一致"
},
email: "请输入一个正确的邮箱",
agree: "请接受我们的声明",
topic: "请选择两个主题"
}
})
});
交表单
$(“#signupForm”).validate({
rules: {
firstname: “required”,
lastname: “required”,
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: “#password”
},
email: {
required: true,
email: true
},
topic: {
required: “#newsletter:checked”,
minlength: 2
},
agree: “required”
},
messages: {
firstname: “请输入您的名字”,
lastname: “请输入您的姓氏”,
username: {
required: “请输入用户名”,
minlength: “用户名必需由两个字符组成”
},
password: {
required: “请输入密码”,
minlength: “密码长度不能小于 5 个字符”
},
confirm_password: {
required: “请输入密码”,
minlength: “密码长度不能小于 5 个字符”,
equalTo: “两次密码输入不一致”
},
email: “请输入一个正确的邮箱”,
agree: “请接受我们的声明”,
topic: “请选择两个主题”
}
})
});