AA1.jQuery 概念
a.jQuery 核心函数
a-1:当函数用:
(
D
O
M
标
签
)
;
a
−
2
:
当
对
象
用
:
(DOM标签); a-2:当对象用:
(DOM标签);a−2:当对象用:.属性或方法();
//jQuery方式,获取文本框输入的内容
var $user = $("#user");
补充知识点:
1. $(“标签对象”).click(); jQuery绑定 点击 事件方法
2. consal.log( 对象 ); 可以打印任何对象日志
BB2: jQuery 常用函数语法
1. $.each(); 隐式遍历数组
2. $.trim(); 标签对象去2端空格
3. $(标签对象).appendTo(标签对象); 标签对象,在拼接一个标签对象
4. $(标签).size(); $(标签).length; 取标签对象的长度
5. $ (标签)[下标值]; $(标签).get(下标值); 取指定标签对象下标位置
6. $(标签).index(); 得到标签元素位于数组的具体下标位置数值
补充:
伪数组 : *是一个Objet 对象 *有length属性 *有数组下标属性 *没有数组的特别方法:例如:foreach();push();
CC3:jQuery 选择器
1.基本选择器 参考CSS样式选择器
属性选择器 [type = password] 对于标签的属性进行选择
2.层次选择器
1.后代选择器 ancestor descendant 例: $ (“ul span”) 释义:选中ul下面所有的span标签
2.子代选择器 parent > child 例: $ (“ul > span”) 释义:选中ul下面的子元素span标签
3.下面选择器 prev+next 例: $ (“ul+span”) 释义:选中ul下面的一个span标签
4.兄弟选择器 prev~siblings 例: $ ("ul~ * ") 释义:选中和ul 标签同级的所有标签
3.过滤选择器 释义:在所有选择器的基础上进行筛选 常用筛选关键字:
1.A标签:first 选择第一个A标签
2.A标签:last 选择最后一个A标签
3.A标签:not(选择器X) 选择A标签下不是X选择器的标签
4.A标签:lt(index):gt(index) 选择所有A标签中的第3个和第2个 特别注意:多个过滤器不是同时执行过滤,而是依次执行,所以取元素的下标要先lt大于,在gt小于。
5.A标签:contains(“BB”) 选择A标签中内容是BB的A标签
6.A标签:hidden 选择隐藏的A标签
7.A标签:[title] 选择有title属性的A标签
8.A标签:[title]=“hello” 选择title内容为hello的A标签
9.A标签:even 选择数组中下标为奇数的A标签
10.A标签:first 选择数组中下标为偶数的A标签
4.表单选择器 参考过滤+层次。
DD4:jQuery 中的事件20190620
基础事件
**鼠标事件
click() 鼠标事件
mouseover() 鼠标指针移过时 移动到对象的子元素也要触发
mouseenter() 鼠标指针进入时 移动到对象的子元素不触发
mouseout() 鼠标指针移出时 移出到对象的子元素也要触发
mouseleave() 鼠标指针离开时 移出到对象的子元素不触发
键盘事件
keydown() 按下键盘时
keyup() 释放按键时
keypress() 显示按下字符时
**变形:Enter 回车事件**
绑定键盘事件后,function 方法形参中,传入参数A,A.keyCode == 13 就判定为按下了Enter 回车
window事件:
表单事件:
onchange事件:如果修改表单的内容,且失去焦点,则触发事件
onblur事件:失去焦点就会触发事件
复合事件
hover(函数1,函数2); 移入,移出时的复合函数。 传入事件方法1,光标移入时执行的方法。传入的事件方法2,光标移出时执行的方法。
toggle(函数1,函数2); 一般配合点击事件使用,点击一次,切换一次。不带参数,功能是显示或隐藏
toggleClass(“类名”); 一般配合点击事件使用,点击一次,切换一次。增加或者修改标签类名。
常用语法:
$(A标签).html(index,<标签内容C>); 无参代表获取A标签的标签内容,index代表插入进集合下标的位置,向index位置插入标签内容C
$(A标签).removeAttr(属性名); 比如删除样式,就可以跟上style
$(A标签).index(); 取得A标签对象的下标
$(A标签:eq(index); 查找 值为index,下标的A标签
$(A标签).bind({事件.function(){}},{事件.function(){}},{事件.function(){}}); 可以绑定,多个点击事件和函数,用, 隔开
$(A标签).unbind(“事件名”,“具体函数名”); 如果不传参,就把A标签所有的事件和方法清除
$(A标签).css({“样式类名”:“样式”,“样式类名”:“样式”,“样式类名”:“样式”});对标签A的样式名称,做出样式修改,可以同时修改多个样式
$(A标签).addClass({“类名” “类名” “类名”});对标签A的追加类名,可以同时追加多个类名,空格分开
$(A标签).removeClass({“类名” “类名” “类名”});对标签A的删除类名,可以同时删除多个类名,空格分开
$(A标签).hasClass(B类名);对标签A进行判断,里面有没有B这个类名
EE5:插入节点 20190621
jquery 节点对象变量。
var A = $(“A标签”);
var B = $(“A标签”);
$(A).append(B); 把B标签,追加进A标签中,也就是A标签内
$(A).appendTo(B); 把A标签,追加进B标签中,也就是B标签内
$(A).prepend(B); 把B标签,前置插入到A标签中,也就是A标签内容最前面。
$(A).prependTo(B); 把 选择器找到的 A标签,前置插入到B标签中,也就是B标签内容最前面。
$(A).after(B); 把B标签,插入到A标签,结束之后。同辈插入。
$(A).insertAfter(B); 把A标签,插入到B标签,结束之后。同辈插入。
$(A).before(B); 把B标签,插入到A标签开始的前面。同辈插入。
$(A).insertBefore(B); 把A标签,插入到B标签开始的前面。同辈插入。
$(A).remove(内容); 无参就是完全删除标签节点,带参,就是查找这个标签中,有符合内容的标签节点。
$(A).empty(); 清空标签节点的内容。
$(A).replaceWith(B); 把A标签的内容全部替换为B标签的内容
$(A).replaceAll(B); 把B标签的内容全部替换为A标签的内容
$(A).clone(ture/false); 克隆复制找到的A标签,参数为true复制事件和方法,参数为false不复制事件和方法,不传参,默认为false
$(A).attr({属性1:属性值1,属性2:属性值3,属性3:属性值3}); attr() 方法用来获取或设置属性的值。参数1:只传属性 获取属性的值 参数2:属性:属性值 设置属性值
$(A).removeAttr(属性名b); 删除A标签里面的b属性
节点遍历
$(A).children(); 获取A标签的所有子元素。(注:不包括其他后代元素)
$(A).next(); 获取挨着A标签的下一个元素,只是挨着的下一个
$(A).prev(); 获取挨着A标签的上一个元素,只是挨着的上一个
$(A).slibings(); 获取除了A标签的所有同辈元素。
$(A).parent(); 获取除了A标签的父级元素。
$(A).parents(); 获取除了A标签的所有祖先元素。
$(A).find(“标签名B”); 获取A标签里面的B标签
$(A).filter(“条件|函数”) 获取满足函数条件的的标签(注意:比较复杂,具体参考API)
$(A).each(function(index,element){ 遍历内容 }) 遍历标签对象集合
$(A).end(); 获取了A标签里面的一个内部元素后,再.end() 回取A标签(注意:比较复杂,具体参考API)
CSS操作方法
$(A).height() 带参数值为设置,不带参数是取值。 高度。
$(A).height() 带参数值为设置,不带参数是取值。 宽度。
$(A).offset() 返回以像素单位的top和left坐标,仅对可见元素有效(不懂,看了API也没懂)
$(A).offsetParent() 返回最近的已定位祖先元素。定位元素是指的是元素的CSSposition值,被设置为relative,absolute,fixed的元素。(不懂,看了API也没懂)
$(A).position() 返回第一个匹配元素相对于父元素的位置(不懂,看了API也没懂)
$(A).scrollLeft() 参数可选。设置或返回匹配元素相对滚动条左侧的编移。(不懂,看了API也没懂)
$(A).scrollTop() 参数可选。设置或返回匹配元素相对滚动条顶。(不懂,看了API也没懂)
DOM对象和jQuery对象互转
<script type="text/javascript">
function fn(){
//dom方式,获取文本框输入的内容
var user = document.getElementById("user");
//alert(user.value);
//jQuery方式,获取文本框输入的内容
var $user = $("#user");
//alert( $user.val() );
//DOM对象转成jQuery对象,穿马甲
//alert( $(user).val() )
//jQuery对象转成DOM对象,脱马甲
//jQuery对象本质上是个数组,数组存储的元素是DOM对象
alert ( $user[0].value );
}
</script>
jQuery选择器
选择器作用: 快速的精准的定位到页码中的html元素
和css选择器一致的
基本选择器
- 元素选择器 $(“标签名”)
- id选择器 $("#id属性值")
- class选择器 $(".class属性值")
<script type="text/javascript">
//<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
//jQuery对象调用函数(事件函数)
$("#b1").click( function(){
//css函数,操作样式表,CSS的属性和属性值
$("#one").css("background-color","red");
});
// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("div").css("background-color","red");
});
//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$(".mini").css("background-color","red");
});
// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
$("#b4").click(function(){
/* $("span").css("background-color","red");
$("#two").css("background-color","red");*/
//选择多个标签的时候,用逗号分隔
$("#two ,span").css("background-color","red");
});
</script>
层次选择器
- $(“A B”)获取A元素的所有后代B元素(常用)
- $(“A>B”)获取A元素的所有后代子元素B
- $(“A+B”)获取A元素的同级的后面的下一个B元素
- $(“A~B”)获取A元素的同级后面的所有B元素
<script type="text/javascript">
//<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
$("#b1").click(function(){
$("body div").css("background-color","red");
})
//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("body>div").css("background-color","red");
});
//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$("#one+div").css("background-color","red");
});
//<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色" id="b4"/>
$("#b4").click(function(){
$("#two~div").css("background-color","red");
});
//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为红色" id="b5"/>
$("#b5").click(function(){
/**
* id="two" 所有的兄弟元素
* 即有哥哥,也有弟弟
*/
$("#two").siblings("div").css("background-color","red");
});
</script>
属性选择器
- 获得有属性名的元素:$(“A[属性名]”)
- 获得属性名 等于 值 元素:$(“A[属性名=值]”)
- 获得属性名 不等于 值 元素:$(“A[属性名!=值]”)
- 获得属性名 以 值 9开头 元素:$(“A[属性名^=值]”)
- 获得属性名 以 值 结尾 元素: ( " A [ 属 性 名 ("A[属性名 ("A[属性名=值]")
- 获得属性名 含有 值 元素:$(“A[属性名*=值]”)
- **复合属性选择器,多个属性同时过滤:$(“A[属性名!=值][属性名!=值][属性名!=值]”)
<script type="text/javascript">
//<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
$("#b1").click(function(){
//属性选择器,选择带有title
$("div[title]").css("background-color","red");
});
// <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
$("#b2").click(function(){
//获取属性值是test的元素
$("div[title=test]").css("background-color","red");
});
// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
$("#b3").click(function(){
//属性值不等于test
$("div[title!=test]").css("background-color","red");
});
// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
$("#b4").click(function(){
//属性值以te开始的
$("div[title^=te]").css("background-color","red");
});
// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
$("#b5").click(function(){
//属性值是est结束的
$("div[title$=est]").css("background-color","red");
});
// <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
$("#b6").click(function(){
//属性值含有es的
$("div[title*=es]").css("background-color","red");
});
// <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
$("#b7").click(function(){
$("div[id][title*=es]").css("background-color","red");
});
</script>
过滤选择器
- 获得选择的元素中的第一个元素: :first
- 获得选择的元素中的最后一个元素: :last
- 不包括指定内容的元素例如: :not(selecter)
- 偶数,从 0 开始计数: :even
- 奇数,从 0 开始技术: :odd
- 指定第几个: :eq(index)
- 大于n个: :gt(index)
- 小于n个: :lt(index)
- 获得标题 (
/
…) :header — 固定写法
- 获得动画的 :animated —固定写法 正在执行的动画
<script type="text/javascript">
// <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
$("#b1").click(function(){
$("div:first").css("background-color","red");
});
// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("div:last").css("background-color","red");
});
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$("div:not(.one)").css("background-color","red");
});
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
$("#b4").click(function(){
$("div:even").css("background-color","red");
});
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
$("#b5").click(function(){
$("div:odd").css("background-color","red");
});
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
$("#b6").click(function(){
$("div:gt(3)").css("background-color","red");
});
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
$("#b7").click(function(){
$("div:eq(3)").css("background-color","red");
});
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
$("#b8").click(function(){
$("div:lt(3)").css("background-color","red");
});
// <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
$("#b9").click(function(){
//所有标题,特指的h1-h6标签 选择器 :header
$(":header").css("background-color","red");
});
// <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红色" id="b10"/>
$("#b10").click(function(){
//选择正在执行动画的,选择器 animated
$(":animated").css("background-color","red");
});
function abc(){
$("#mover").slideUp(3000);
}
abc();
</script>
表单选择器
- 可用: :enabled
- 不可用: :disabled
- 选中(单选radio ,多选checkbox): :checked
- 选择(下列列表 ): :selected
<script type="text/javascript">
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
$("#b1").click(function(){
//获取多个input标签属性值是 enabled, type属性值是text 返回数组
var inputs = $("input[type=text]:enabled");
for(var i=0;i<inputs.length;i++){
//jQuery对象就是个数组,遍历出来,数组的元素是DOM对象
alert ( $(inputs[i]).val());
}
});
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function(){
//获取多个input标签属性值是disabled,返回数组
var inputs = $("input[type=text]:disabled");
for(var i=0;i<inputs.length;i++){
$(inputs[i]).val("修改后的");
}
});
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
$("#b3").click(function(){
var inputs = $("input:checked");
alert(inputs.length);
});
// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
/*
* html()==DOM对象的innerHTML
* text()==DOM对象的innerText
*/
$("#b4").click(function(){
var inputs = $("option:selected");
for(var i=0;i<inputs.length;i++){
alert( $(inputs[i]).text());
}
});
</script>
jQuery的DOM操作
jQuery函数的特点:
函数支持方法的调用链,链式编程
函数支持多种调用方式, css(属性名,属性值)赋值, css(属性名)取值\
DOM操作一
<script type="text/javascript">
//页面加载完成
$(function(){
//获取张三
//dom对象获取值,value属性, jQuery获取值val()函数
//alert( $("#myinput").val());
//获取标题文本
//dom对象使用属性innerText,jQuery使用的是text()函数
alert( $("#mydiv").text() );
//获取mydiv的后的所有内容
//dom对象使用属性innerHTML,jQuery使用的是html()函数
alert( $("#mydiv").html() );
});
</script>
DOM操作二
<script type="text/javascript">
/**
* 属性操作:
* DOM对象函数 setAttribute,getAttribute
* jQuery中函数 attr(属性名,属性值) attr(属性名)
*/
//获取北京节点的name属性值
//alert( $("#bj").attr("name") );
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription","didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
alert( $("#hobby").prop("checked"));
/**
* jQuery新增函数
* prop property
* prop函数适用于,固有属性:
* checked=checked selected=selected
*
* attr函数适用于其他的属性
*/
</script>
DOM操作三
<script type="text/javascript">
//<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
$("#b1").click(function(){
$("#one").attr("class","second");
});
//<input type="button" value=" addClass" id="b2"/>
$("#b2").click(function(){
$("#one").addClass("second");
});
//<input type="button" value="removeClass" id="b3"/>
$("#b3").click(function(){
$("#one").removeClass("second");
});
//<input type="button" value=" 切换样式" id="b4"/>
$("#b4").click(function(){
$("#one").toggleClass("second");
});
//<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
$("#b5").click(function(){
alert( $("#one").css("background-color"));
});
// <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
$("#b6").click(function(){
$("#one").css("background-color","green");
});
</script>
DOM操作四
<script type="text/javascript">
/**将反恐放置到city的后面*/
//$("#city").append($("#fk"));
/**将反恐放置到city的最前面*/
$("#city").prepend($("#fk"));
</script>
DOM操作五
<script type="text/javascript">
//删除<li id="bj" name="beijing">北京</li>
/**
* DOM中,删除节点,需要父节点删除子节点(浏览器支持)
* jQuery支持自杀
*/
$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
//测试(id='city')并没有被删除
$("#city").empty()
</script>
隔行变色案例
<script type="text/javascript">
$(function(){
/**
* 偶数行背景色: even
* 奇数行背景色: odd
*/
$("tr:gt(1):even").css("background-color","blanchedalmond");
$("tr:gt(1):odd").css("background-color","brown");
});
</script>
全选和全不选
<script type="text/javascript">
/**
* 点击事件实现功能
* 全选和全不选:
* 所有的分选框的属性 checked = 总选框的属性checked
* checked属于固有属性,函数prop
*/
function selectAll(){
//获取总选框
//var zong = $("#zong").prop("checked");
//获取分选框
$(".itemSelect").prop("checked",$("#zong").prop("checked") );
}
</script>
定时广告
<script type="text/javascript">
/**
* 页面打开后3秒,显示广告
* 动画效果,观看3秒中
*/
$(function(){
setTimeout(function(){
$("#guanggao").slideDown(3000);
},3000);
setTimeout(function(){
$("#guanggao").slideUp(3000);
},9000);
});
</script>
jQuery高级
jQuery全局函数each遍历
$.each() 全局函数each
<script type="text/javascript">
$(function(){
//jQuery方式获取option标签
var $option = $("option");
var options = document.getElementsByTagName("option");
//jQuery符号$直接调用全局函数each
/**
* 全局函数each的参数
* 被遍历的对象
* 回调函数,传递索引和元素
* 好处: 遍历的容器可以是jQuery对象,也可以是DOM对象
*/
$.each(options, function(index,element) {
alert( $(element).html());
});
});
</script>
jQuery的事件
jQuery绑定事件,事件名字没有on
常用事件:
- click 点击事件
- blur 失去焦点
- change 内容改变
- keyup 键盘弹起
- mouseover 鼠标悬停
- mouseout 鼠标离开
DOM对象绑定事件
<script type="text/javascript">
window.onload = function(){
//获取按钮
var btn = document.getElementById("btn");
//DOM对象的事件属性
btn.onclick = function(){
alert("按钮被点击");
}
}
</script>
jQuery对象绑定事件
jQuery对象中函数,实现对一个事件源同时绑定多个事件
bind函数,实现绑定事件
<script type="text/javascript">
$(function(){
//获取按钮,jQuery对象调用函数 bind
/*$("#btn").bind("click",function(){
alert("按钮被点击");
});*/
/*
* 函数bind同时绑定多个事件
* bind( {
* "事件类型":function(){},
* "事件类型":function(){}
* } );
*/
$("#btn").bind({
"click":function(){
alert("绑定点击事件");
},
"mouseover":function(){
alert("绑定鼠标悬停事件");
}
});
});
</script>
jQuery解绑事件3250jQuery对象的函数 unbind
<script type="text/javascript">
$(function(){
$("#btn").bind({
"click":function(){alert("点击事件")},
"mouseover":function(){alert("鼠标悬停")}
});
$("#unbtn").click(function(){
//解除按钮btn的事件绑定
//unbind()什么参数不传递,解除所有事件
//$("#btn").unbind();
//解除点击事件
//$("#btn").unbind("click");
//解除多个事件,参数是一个字符串,多个事件用空格分开
$("#btn").unbind("click mouseover");
})
});
</script>
事件练习
<script type="text/javascript">
$(function(){
//文本框绑定键盘弹起事件
var text = $("#text");
text.keyup(function(){
//取出文本框输入的内容,放在div中
$("#div").html( text.val() ).css("font-size","30px").css("color","red");
});
});
</script>
</head>
<body>
<input type="text" id="text"/>
<div id="div"></div>
</body>
省市联动案例
<script type="text/javascript">
function selectCity(value){
/**
* value是传递的标签option的value的属性值
* 作为索引使用,到二维数组中,找出对应市
* 遍历一维数组
* 追加到标签 select中
*/
var citys = [
["海淀","昌平","朝阳"],["长春","吉林","延边"],["南京","徐州","苏州"]
];
var city = citys[value];
//获取市区标签
var cityId = $("#cityId");
//拼接字符串的操作
var s = "<option >----请-选-择-市----</option>";
//jQuery全局函数each遍历
$.each(city, function(index,element) {
s+="<option >" +element+ "</option>";
});
//字符串放在标签
cityId.html(s);
}
</script>
左右互选案例
<script type="text/javascript">
$(function(){
//左向右移动,被选中的,按钮绑定事件
$("#add").click(function(){
//获取选中的,层次选择器,后代子标签
$("#second").append($("#first option:selected"));
});
//左向右移动,全部,按钮绑定事件
$("#add_all").click(function(){
$("#second").append($("#first option"));
});
//右向做移动,选择的
$("#remove").click(function(){
$("#first").append($("#second option:selected"));
});
//右向左移动,全部的
$("#remove_all").click(function(){
$("#first").append($("#second option"));
});
});
</script>
validate表单验证插件
插件:
基于一个功能开发的另一个功能,插件
validate基于jQuery开发的一个功能,表单验证功能
对原有的jQuery功能进行扩展,插件不能独立使用
表单验证案例
<script type="text/javascript">
$(function(){
$("#empForm").validate({
//表单验证的规则
rules:{
//真实姓名,必须填写
realname:"required",
//登录名,必须填写,长度5-8
username:{
required:true,
rangelength:[5,8]
},
//密码规则,必须填写,长度6-12
psw:{
required:true,
rangelength:[6,12]
},
//确认密码,必须填写,和密码一致
psw2:{
required:true,
equalTo:"#psw"
},
//性别规则,必须选择一个
gender:"required",
//年龄规则,必须填写,范围26-50之间
age:{
required:true,
range:[26,50]
},
//学历规则,必须选一个
edu:"required",
//生日规则,必须填写,格式正确,合法
birthday:{
required:true,
dateISO:true,
date:true
},
//爱好规则,必须选一个
checkbox1:"required",
//邮箱规则,必须填写,符号邮件地址规则
email:{
required:true,
email:true
}
},
//验证消息
messages:{
//真实姓名消息
realname:"请填写真实姓名",
//登录名消息
username:{
required:"必须填写登录名",
rangelength:"用户名长度必须5-8位"
},
//密码消息
psw:{
required:"必须填写密码",
rangelength:"密码长度必须6-12位"
},
//确认密码消息
psw2:{
required:"必须填写密码",
equalTo:"两次密码不一致"
},
//姓名消息
gender:"必须选",
//年龄消息
age:{
required:"必须填写年龄",
range:"年龄必须在26-50之间"
},
//学历消息
edu:"请选择一个学历",
//生日消息
birthday:{
required:"必须填写生日",
dateISO:"日期格式不正确",
date:"日期不存在"
},
//爱好消息
checkbox1:"请选择一个爱好",
//邮箱消息
email:{
required:"必须填写邮箱",
email:"邮箱格式不正确"
}
}
});
});
</script>
自定义验证规则
标准语法规则, jQuery选择符号$调用插件属性validator
属性调用插件函数 addMethod()
参数:
- 规则名
- 回调函数
<script type="text/javascript">
/*
* 匿名函数中具有三个参数
* value : 文本框输入的值
* element : 文本框标签对象
* param : 规则后面的参数 range:[5,10]
*/
//自定义身份证号的15位规则
$.validator.addMethod("cart15",function(value,element,param){
//文本框输入的值 value判断
if(value.length==18)
return true;
//定义15位规则,全数字
var reg=/^[0-9]{15}$/;
return reg.test(value);
});
//自定义身份证号的是18位规则
$.validator.addMethod("cart18",function(value,element,param){
if(value.length==15)
return true;
//定义18位规则,前17个数字,最后一位可以是数字,可以是X
var reg = /^[0-9]{17}[0-9X]{1}$/;
return reg.test(value);
});
//自定义身份证的长度规则
$.validator.addMethod("cartlength",function(value,element,param){
if(value.length == 15 || value.length==18)
return true;
return false;
});
//身份证号规则
cart:{
required:"必须填写身份证号",
cartlength:"身份证号码长度只能是15或18位",
cart15:"15位格式全数字",
cart18:"18位格式全数字,最后一位可以是X"
}