注：前段时间在菜鸟教程自学了一下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未引入");//d出d窗
}else{
window.alert("jQuery已成功引入");
}
</script>
jQuery语法是通过选取html元素，并对选取元素进行某些 *** 作。
基础语法：$(selector).action() $:美元符号定义jQuery(selector):选择符（selector）选择和查找html元素action(): jquery 的action()执行对元素的 *** 作<body>
<p>点我1p>
<p id="t1">点我2p>
<p class="button">点我3p>
<a>helloa>
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>广告1p>
<p>广告2p>
<p>广告3p>
<button class="button">点我关闭广告button>
body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
<script>
/*$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
})*/
$(function(){
$("button").click(function(){ // 用户点击按钮后，关闭广告。
$("p").hide();
});
});
script>
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（）
请输入:
按键次数：0
与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>Titletitle>
<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(){})
})
$(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")
});
});
作用：用于切换hide（）和show（）；显示被隐藏的元素，并隐藏已显示的元素
语法：
$(selector).toggle(speed,callback);
$("button").click(function(){
$("p").toggle(1500);
});
通过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>
fadeTo():允许渐变为设定的不透明度 slow：缓慢的，低速的
$("#div1").fadeTo("slow");
$("#div2").fadeTo("slow",0.5);
$("#div3").fadeTo("slow",0.2);
语法：
$(selector).slideDown(speed,callback);
例子同上面
jQuery 效果- 动画 animate()方法语法：
$(selector).animate({params},speed,callback);
$("#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'});
可以把属性的动画值设置为“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");
stop():用于在动画或效果完成前对它们进行停止
stop（）方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画
语法：
$(selector).stop(stapAll,goToEnd);
两参数都为可选，且默认为false
因此，默认的，stop（）会清除被选中元素上指定的当前动画。
jQuery Callback方法 回调Callback函数在当前动画100%完成之后执行。
$("button").click(function(){
$("#div2").hide("slow",function () {
alert("隐藏成功");
});
)};
用了CallBack函数之后，动画会在隐藏后再打开d窗，否则会先跳出d窗。
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和ＸＭＬ文档的标准
获得内容 text（），html()以及val（） text（）：设置或返回所选元素的文本内容html（）：设置或返回所选元素的内容（包括HTML标记）val(): 设置或返回表单字段的值（可以获得输入框的值） $("button").click(function(){
alert("值为: " + $("#test").val());//属性值为用户输入的内容。（代码外的值）
alert("属性值为："+$("#test").attr("id"));// 属性值为元素后的test（代码里的值）
});
姓名：
attr()用于获取属性值；
attr和prop的区别：
attr：我们自己定义的DOM属性，如action
prop：HTML元素本身就带有的固有属性，如 id，class ，href
对于具有true和false两个属性的属性，比如checked，selected或者disabled使用prop（）
百度一下
删除
prop（）函数的结果
若没有相应的属性，返回值是空字符串
arre（）函数的结果
若没有相应的属性，返回值是undefined
jQuery 设置内容和属性就是再text（），html（），val（）里填想要的值即可
如
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
允许同时设置多个值。
attr()的回调函数回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值，然后以函数新值返回你希望使用的字符串。
$("button").click(function(){
$("#runoob").attr("href",function (i,o) {
return o+"/jquery";
});
});
$("ul").append("hello gift");
$("ul").prepend("hello gift");
可通过append（）和prepend（）方法添加若干新元素
function appendText(){
var txt1="<p>文本1p>"; //使用html创建文本
var txt2=$("<p>p>").text("文本2"); //使用jQuery创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本三"; // 使用DOM创建text with ＤＯＭ
$("body").append(txt1,txt2,txt3);//追加新元素
}
script>
<body>
<button onclick="appendText()">添加文本button>
append、prepend 是在元素内部嵌入。
after、before是在元素外面追加。
如需删除元素和内容，一般可以使用以下两个jQuery方法；
remove（）- 删除被选元素（及其子元素） 会把DIV一并删除empty（）从被选元素中删除子元素 div会保留 过滤被删除的元素remove（）方法也可以接受一个参数，允许对被删除元素进行过滤。
该参数可以是任何jQuery选择器的语法。
例如：移除所有class=“test”的p元素
$("p").remove(".italic");
jQuery *** 作css
addClass（）向被选元素添加一个或多个类removeClass（） …删除…ToggleClass() 从被选元素进行添加/删除类的切换 *** 作css() 设置或返回样式属性css属性可以设置多个
css({"propertyname":"value","propertyname":"value",...});
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():返回被选元素的所有祖先元素，它一路向上直到文档的根元素bodyparentaUntil() ：返回介于两个给定元素之间的所有祖先元素[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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");
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() 进来~
作用：用于通过HTTP GET 或POST请求从服务器请求数据
get ： 从指定的资源请求数据 （从服务器取回数据，注：get方法可能返回缓存数据）post： 向指定的资源提交要处理的数据 （也可用于服务器获取数据，不会缓存数据，并且常用于连同请求一起发送数据。 $.get() 方法语法
$.get(URL,callback);
可选的callback参数是请求成功后所执行的函数名
$("button").click(function(){
$.get("attr.html",function(data,status){
alert("数据："+data+"\n状态："+status);
});
});
释放对 标 识 符 的 控 制 ， 其 他 脚 本 就 可 以 使 用 标识符的控制，其他脚本就可以使用 标识符的控制，其他脚本就可以使用标识符。
$.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
＄（＂.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") //所有文件域
上线策略 ：各个系统之间的网络交互。
作用：为表单提供强大的验证功能，让客户端表单验证变得简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括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: "请输入有效的xyk号码",
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: “请选择两个主题”
}
})
});
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）