首页  思维导图  详情

Jquery 基础知识点总结

2022-10-13 10:24:39   0  举报





AI智能生成

Jquery 基础知识点总结

Jquery

jquery 基础

作者其他创作

大纲/内容

6字真言（找到它，操作它）

如何通过Jquery找到html标签

基本选择器

标签选择器根据给定的标签名匹配元素$(amp;quot;h2amp;quot; )选取所有h2元素

类选择器根据给定的class匹配元素$(amp;quot; .titleamp;quot;)选取所有class为title的元素

ID选择器#id根据给定的id匹配元素$(amp;quot; #titleamp;quot;)选取id为title的元素

并集选择器selector1,selector2,...,selectorN将每一个选择器匹配的元素合并后一起返回$(amp;quot;div,p,.titleamp;quot; )选取所有div、p和拥有class为title的元素

全局选择器*匹配所有元素$(amp;quot;*amp;quot; )选取所有元素

层次选择器

后代选择器ancestor descendant选取ancestor元素里的所有descendant（后代）元素$(amp;quot;#menu spanamp;quot; )选取#menu下的amp;lt;spanamp;gt;元素

子选择器parentamp;gt;child选取parent元素下的child（子）元素$(amp;quot; #menuamp;gt;spanamp;quot; )选取#menu的子元素amp;lt;spanamp;gt;

相邻元素选择器prev+next选取紧邻prev元素之后的next元素$(amp;quot; h2+dl amp;quot; )选取紧邻amp;lt;h2amp;gt;元素之后的同辈元素amp;lt;dlamp;gt;

同辈元素选择器prev~sibings选取prev元素之后的所有siblings元素$(amp;quot; h2~dl amp;quot; )选取amp;lt;h2amp;gt;元素之后所有的同辈元素amp;lt;dlamp;gt;

属性选择器

[attribute^=value] 选取给定属性是以某些特定值开始的元素 $(amp;quot; [href^=amp;apos;enamp;apos;]amp;quot; )选取href属性值以en开头的元素

[attribute$=value] 选取给定属性是以某些特定值结尾的元素 $(amp;quot; [href$=amp;apos;.jpgamp;apos;]amp;quot; )选取href属性值以.jpg结尾的元素

[attribute*=value]选取给定属性是以包含某些值的元素$(amp;quot; [href* =amp;apos;txtamp;apos;]amp;quot; )选取href属性值中含有txt的元素

基本过滤选择器

:eq(index)选取索引等于index的元素（index从0开始）$(amp;quot;li:eq(1)amp;quot; )选取索引等于1的amp;lt;liamp;gt;元素

:gt(index) 选取索引大于index的元素（index从0开始） $(amp;quot; li:gt(1)amp;quot; )选取索引大于1的amp;lt;liamp;gt;元素（注：大于1，不包括1）

:lt(index) 选取索引小于index的元素（index从0开始） $(“li:lt(1)” )选取索引小于1的amp;lt;liamp;gt;元素（注：小于1，不包括1）

:header选取所有标题元素，如h1~h6$(amp;quot;:headeramp;quot; )选取网页中所有标题元素amp;lt;/divamp;gt;

:focus选取当前获取焦点的元素$(amp;quot;:focusamp;quot; )选取当前获取焦点的元素

:animated 选择所有动画 $(amp;quot;:animatedamp;quot; )选取当前所有动画元素

可见性过滤选择器

:visible选取所有可见的元素$(amp;quot;:visibleamp;quot; )选取所有可见的元素

:hidden 选取所有隐藏的元素 $(amp;quot;:hiddenamp;quot; ) 选取所有隐藏的元素

jQuery操作页面元素

jQuery操作css

使用addClass( )方法为元素添加样式amp;lt;/divamp;gt;

使用css( )方法设置元素样式

css(amp;quot;属性amp;quot;,amp;quot;属性值amp;quot;) ;

css({amp;quot;属性1amp;quot;:amp;quot;属性值1amp;quot;,amp;quot;属性2amp;quot;:amp;quot;属性值2amp;quot;...}) ;

amp;lt;preamp;gt;amp;lt;codeamp;gt;使用removeClass()方法为元素删除样式amp;lt;/codeamp;gt;amp;lt;/preamp;gt;

height([value]) 设置或返回匹配元素的高度

width([value]) 设置或返回匹配元素的宽度

offset([value]) 返回以像素为单位的top和left坐标。仅对可见元素有效

offsetParent( ) 返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素

position( ) 返回第一个匹配元素相对于父元素的位置

scrollLeft([position]) 参数可选。设置或返回匹配元素相对滚动条左侧的偏移

scrollTop([position]) 参数可选。设置或返回匹配元素相对滚动条顶

jQuery操作html

HTML代码操作amp;lt;bramp;gt;html()可以对HTML代码进行操作，类似于JS中的innerHTMLamp;lt;bramp;gt;

取值$(amp;quot;div.leftamp;quot;).html()

赋值amp;nbsp;$(amp;quot;div.leftamp;quot;).html(amp;quot;amp;lt;div class=amp;apos;contentamp;apos;amp;gt;…amp;lt;/divamp;gt;amp;quot;);

标签内容操作amp;lt;bramp;gt;text()可以获取或设置元素的文本内容amp;lt;bramp;gt;

取值amp;nbsp;$(amp;quot;div.leftamp;quot;).text();

赋值amp;nbsp;$(amp;quot;div.leftamp;quot;).text(amp;quot;hello Worldamp;quot;);

属性值操作amp;lt;bramp;gt;val()可以获取或设置元素的value属性值

取值 amp;nbsp;$(this).val();

$(this).val(amp;quot;valueamp;quot;);

创建节点

工厂函数$()用于获取或创建节点amp;lt;/divamp;gt;$(element)：把DOM节点转化成jQuery节点amp;lt;/divamp;gt;$(html)：使用HTML字符串创建jQuery节点amp;lt;/divamp;gt;var $newNode1=$(amp;quot;amp;lt;liamp;gt;你喜欢哪些冬季运动项目？amp;lt;/liamp;gt;amp;quot;);amp;lt;/divamp;gt;

插入节点

append(content) amp;nbsp;$(A).append(B)表示将B追加到A中amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp;如：$(amp;quot;ulamp;quot;).append($newNode1);amp;lt;/divamp;gt;

appendTo(content) $(A).appendTo(B)表示把A追加到B中amp;lt;/divamp;gt;如：$newNode1.appendTo(amp;quot;ulamp;quot;);amp;nbsp;amp;lt;/divamp;gt;

prepend(content) $(A). prepend (B)表示将B前置插入到A中amp;lt;/divamp;gt;如：$(amp;quot;ulamp;quot;). prepend ($newNode1);amp;nbsp;amp;lt;/divamp;gt;

prependTo(content) $(A). prependTo (B)表示将A前置插入到B中amp;lt;/divamp;gt;如：$newNode1. prependTo (amp;quot;ulamp;quot;);amp;nbsp;amp;lt;/divamp;gt;

after(content) $(A).after (B)表示将B插入到A之后amp;lt;/divamp;gt;如：$(amp;quot;ulamp;quot;).after($newNode1);amp;nbsp;amp;lt;/divamp;gt;

insertAfter(content) $(A). insertAfter (B)表示将A插入到B之后amp;lt;/divamp;gt;如：$newNode1.insertAfter(amp;quot;ulamp;quot;);amp;nbsp;amp;lt;/divamp;gt;

before(content) $(A). before (B)表示将B插入至A之前amp;lt;/divamp;gt;如：$(amp;quot;ulamp;quot;).before($newNode1);amp;nbsp;amp;lt;/divamp;gt;

insertBefore(content) $(A). insertBefore (B)表示将A插入到B之前amp;lt;/divamp;gt;如：$newNode1.insertBefore(amp;quot;ulamp;quot;);amp;nbsp;amp;lt;/divamp;gt;

删除节点

remove()：删除整个节点 amp;nbsp;$(selector).remove([expr]);

empty()：清空节点内容 amp;nbsp;$(selector).empty();

替换节点

amp;lt;pamp;gt;Helloamp;lt;/pamp;gt;amp;lt;pamp;gt;cruelamp;lt;/pamp;gt;amp;lt;pamp;gt;Worldamp;lt;/pamp;gt;amp;lt;/divamp;gt;$(amp;quot;pamp;quot;).replaceWith(amp;quot;amp;lt;bamp;gt;Paragraph. amp;lt;/bamp;gt;amp;quot;);amp;lt;/divamp;gt;

amp;lt;pamp;gt;Helloamp;lt;/pamp;gt;amp;lt;pamp;gt;cruelamp;lt;/pamp;gt;amp;lt;pamp;gt;Worldamp;lt;/pamp;gt;amp;lt;/divamp;gt;$(amp;quot;amp;lt;bamp;gt;Paragraph. amp;lt;/bamp;gt;amp;quot;).replaceAll(amp;quot;pamp;quot;);amp;lt;/divamp;gt;

复制节点

clone()用于复制某个节点amp;lt;/divamp;gt;$(selector).clone([includeEvents]) ;amp;lt;/divamp;gt;

jQuery操作属性amp;lt;bramp;gt;

attr()用来获取与设置元素属性

取值amp;nbsp;amp;lt;spanamp;gt;$(amp;quot;imgamp;quot;).attr(amp;quot;srcamp;quot;);amp;lt

赋值amp;nbsp;amp;lt;spanamp;gt;$(amp;quot;imgamp;quot;).attr({ src: amp;quot;test.jpgamp;quot;, alt: amp;quot;Test Imageamp;quot; });amp;lt

removeAttr()用来删除元素的属性

amp;lt;preamp;gt;amp;lt;codeamp;gt;amp;lt;img src=amp;quot;test.jpgamp;quot;/amp;gt; $(amp;quot;imgamp;quot;).removeAttr(amp;quot;srcamp;quot;);amp;lt;/codeamp;gt;amp;lt;/preamp;gt;

遍历元素

children()方法可以用来获取元素的所有子元素var $section =$(amp;quot;sectionamp;quot;).children();amp;lt;/divamp;gt;

遍历同辈元素

next([expr]) 用于获取紧邻匹配元素之后的元素$(amp;quot;li:eq(1)amp;quot;).next().addClass(amp;quot;orangeamp;quot;);amp;nbsp;amp;lt;/divamp;gt;

prev([expr]) 用于获取紧邻匹配元素之前的元素amp;lt;/divamp;gt;$(amp;quot;li:eq(1)amp;quot;).prev().addClass(amp;quot;orangeamp;quot;);amp;nbsp;amp;lt;/divamp;gt;

slibings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素amp;lt;/divamp;gt;$(amp;quot;li:eq(1)amp;quot;).siblings().addClass(amp;quot;orangeamp;quot;);amp;nbsp;amp;lt;/divamp;gt;

遍历父元素amp;lt;/divamp;gt;

parent()：获取元素的父级元素amp;lt;/divamp;gt;$(amp;quot;li:eq(1)amp;quot;).parent().addClass(amp;quot;orangeamp;quot;);amp;lt;/divamp;gt;

parents()：元素元素的祖先元素amp;lt;/divamp;gt;amp;nbsp;$(amp;quot;li:eq(1)amp;quot;).parents().addClass(amp;quot;orangeamp;quot;);amp;lt;/divamp;gt;

amp;lt;h2amp;gt;each遍历amp;lt;bramp;gt;amp;lt;/h2amp;gt;amp;lt;h2amp;gt;amp;lt;/h2amp;gt;

amp;lt;preamp;gt;amp;lt;codeamp;gt;$(amp;quot;imgamp;quot;).each(function(i){ this.src = amp;quot;testamp;quot; + i + amp;quot;.jpgamp;quot;; });amp;lt;/codeamp;gt;amp;lt;/preamp;gt;

$(amp;quot;ulamp;gt;liamp;quot;).each(function(){amp;lt;/divamp;gt;amp;lt;spanamp;gt; amp;ltalert($(this).text());amp;lt;/divamp;gt;amp;lt;spanamp;gt; amp;lt});amp;lt;/divamp;gt;

其他遍历

find() 搜索所有与指定表达式匹配的元素。$(amp;quot;pamp;quot;).find(amp;quot;spanamp;quot;);amp;lt;/divamp;gt;

筛选出与指定表达式匹配的元素集合。amp;lt;/divamp;gt;amp;lt;pamp;gt;Helloamp;lt;/pamp;gt;amp;lt;pamp;gt;Hello Againamp;lt;/pamp;gt;amp;lt;p class=amp;quot;selectedamp;quot;amp;gt;And Againamp;lt;/pamp;gt;amp;lt;/divamp;gt;$(amp;quot;pamp;quot;).filter(amp;quot;.selectedamp;quot;)amp;lt;/divamp;gt;

Query中的事件

基础事件

鼠标事件

click( ) 触发或将函数绑定到指定元素的click事件

mouseover( ) 触发或将函数绑定到指定元素的mouseover事件

mouseout( ) 触发或将函数绑定到指定元素的mouseout事件

mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件amp;nbsp;

mouseleave( ) 触发或将函数绑定到指定元素的mouseleave事件amp;nbsp;

键盘事件

keydown( ) 触发或将函数绑定到指定元素的keydown事件

keyup( ) 触发或将函数绑定到指定元素的keyup事件

keypress( ) 触发或将函数绑定到指定元素的keypress事件

表单事件

amp;nbsp;change() 当元素的值发生改变时，会发生 change 事件。amp;lt;/divamp;gt;$(amp;quot;input[type=amp;apos;textamp;apos;]amp;quot;).change( function() {amp;lt;/divamp;gt;amp;nbsp; // 这里可以写些验证代码amp;lt;/divamp;gt;});amp;lt;/divamp;gt;

focus() amp;nbsp;当元素获得焦点时，触发 focus 事件。amp;lt;/divamp;gt;$(amp;quot;input[type=text]amp;quot;).focus(function(){amp;lt;/divamp;gt;amp;nbsp; this.blur();amp;lt;/divamp;gt;});amp;lt;/divamp;gt;

submit() 当提交表单时，会发生 submit 事件。$(amp;quot;formamp;quot;).submit( function () {amp;lt;/divamp;gt;amp;nbsp; return false;amp;lt;/divamp;gt;} );amp;lt;/divamp;gt;

复合事件

hover() amp;nbsp; amp;nbsp;一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法amp;lt;/divamp;gt;$(amp;quot;tdamp;quot;).hover(amp;lt;/divamp;gt;amp;nbsp; function () {amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; $(this).addClass(amp;quot;hoveramp;quot;);amp;lt;/divamp;gt;amp;nbsp; },amp;lt;/divamp;gt;amp;nbsp; function () {amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; $(this).removeClass(amp;quot;hoveramp;quot;);amp;lt;/divamp;gt;amp;nbsp; }amp;lt;/divamp;gt;);amp;lt;/divamp;gt;

toggle() amp;nbsp;用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。amp;lt;/divamp;gt;$(amp;quot;tdamp;quot;).toggle(amp;lt;/divamp;gt;amp;nbsp; function () {amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; $(this).addClass(amp;quot;selectedamp;quot;);amp;lt;/divamp;gt;amp;nbsp; },amp;lt;/divamp;gt;amp;nbsp; function () {amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; $(this).removeClass(amp;quot;selectedamp;quot;);amp;lt;/divamp;gt;amp;nbsp; }amp;lt;/divamp;gt;);amp;lt;/divamp;gt;

jQuery中的动画

控制元素显示与隐藏

show() 控制元素的显示amp;lt;/divamp;gt;$(amp;quot;pamp;quot;).show()amp;lt;/divamp;gt;$(amp;quot;pamp;quot;).show(amp;quot;fastamp;quot;,function(){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp;$(this).text(amp;quot;Animation Done!amp;quot;);amp;lt;/divamp;gt;amp;nbsp;});amp;lt;/divamp;gt;

hide( )控制元素的隐藏$(amp;quot;pamp;quot;).hide()amp;lt;/divamp;gt;$(amp;quot;pamp;quot;).hide(amp;quot;fastamp;quot;,function(){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp;alert(amp;quot;Animation Done.amp;quot;);amp;lt;/divamp;gt;amp;nbsp;});amp;lt;/divamp;gt;

改变元素的透明度

fadeIn()可以通过改变元素的透明度实现淡入效果amp;lt;/divamp;gt;$(amp;quot;pamp;quot;).fadeIn(amp;quot;slowamp;quot;);amp;lt;/divamp;gt;(amp;quot;pamp;quot;).fadeIn(amp;quot;fastamp;quot;,function(){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp;alert(amp;quot;Animation Done.amp;quot;);amp;lt;/divamp;gt;amp;nbsp;});amp;lt;/divamp;gt;

fadeOut()可以通过改变元素的透明度实现淡出效果amp;lt;/divamp;gt;$(amp;quot;pamp;quot;).fadeOut(amp;quot;slowamp;quot;);amp;lt;/divamp;gt;$(amp;quot;pamp;quot;).fadeOut(amp;quot;fastamp;quot;,function(){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp;alert(amp;quot;Animation Done.amp;quot;);amp;lt;/divamp;gt;amp;nbsp;});amp;lt;/divamp;gt;

改变元素高度

slideDown() 可以使元素逐步延伸显示amp;nbsp;$(amp;quot;pamp;quot;).slideDown();amp;lt;/divamp;gt;$(amp;quot;pamp;quot;).slideDown(amp;quot;fastamp;quot;,function(){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp;alert(amp;quot;Animation Done.amp;quot;);amp;lt;/divamp;gt;amp;nbsp;});amp;lt;/divamp;gt;

slideUp()则使元素逐步缩短直至隐藏amp;lt;/divamp;gt;$(amp;quot;pamp;quot;).slideUp(amp;quot;slowamp;quot;);amp;lt;/divamp;gt;$(amp;quot;pamp;quot;).slideUp(amp;quot;fastamp;quot;,function(){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp;alert(amp;quot;Animation Done.amp;quot;);amp;lt;/divamp;gt;amp;nbsp;});amp;lt;/divamp;gt;

自定义动画

animate(params,[speed],[easing],[fn])用于创建自定义动画的函数。amp;lt;/divamp;gt;amp;lt;button id=amp;quot;goamp;quot;amp;gt; Runamp;lt;/buttonamp;gt;amp;lt;/divamp;gt;amp;lt;div id=amp;quot;blockamp;quot;amp;gt;Hello!amp;lt;/divamp;gt;amp;lt;/divamp;gt;$(amp;quot;#goamp;quot;).click(function(){amp;lt;/divamp;gt;amp;nbsp; $(amp;quot;#blockamp;quot;).animate({amp;nbsp;amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; width: amp;quot;90%amp;quot;,amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; height: amp;quot;100%amp;quot;,amp;nbsp;amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; fontSize: amp;quot;10emamp;quot;,amp;nbsp;amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; borderWidth: 10amp;lt;/divamp;gt;amp;nbsp; }, 1000 );amp;lt;/divamp;gt;});amp;lt;/divamp;gt;

jQuery表单验证

Jquery表单验证核心

submit() 当提交表单时，会发生 submit 事件。amp;lt;/divamp;gt;

$(amp;quot;formamp;quot;).submit( function () {amp;lt;/divamp;gt;amp;nbsp; return false;//不提交表单amp;lt;bramp;gt;amp;nbsp; return true;//提交表单amp;lt;/divamp;gt;} );amp;lt;/divamp;gt;

非空验证amp;lt;/divamp;gt;

var mail= $(amp;quot;#mailamp;quot;).val();amp;lt;/divamp;gt;if (mail === amp;quot;amp;quot;) {amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp;alert(amp;quot;Email不能为空amp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp;return false;amp;lt;/divamp;gt;}amp;lt;/divamp;gt;

长度验证amp;lt;/divamp;gt;

var pwd= $(amp;quot;#pwdamp;quot;).val();amp;lt;/divamp;gt;if(pwd.lengthamp;lt;6){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; alert(amp;quot;密码必须等于或大于6个字符amp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; return false;amp;lt;/divamp;gt;}amp;lt;/divamp;gt;

正则表达式验证

邮箱正则验证amp;lt;/divamp;gt;

amp;lt;spanamp;gt;验证手机号 amp;lt

amp;lt;codeamp;gt;functionamp;lt;/codeamp;gt; amp;lt;codeamp;gt;isPhoneNo(phone) { amp;lt;/codeamp;gt;amp;lt;/divamp;gt;amp;lt;codeamp;gt;varamp;lt;/codeamp;gt; amp;lt;codeamp;gt;pattern = /^1[34578]\d{9}$/; amp;lt;/codeamp;gt;amp;lt;/divamp;gt;amp;lt;codeamp;gt;returnamp;lt;/codeamp;gt; amp;lt;codeamp;gt;pattern.test(phone); } amp;lt;/codeamp;gt;amp;lt;/divamp;gt;

amp;lt;spanamp;gt; 验证身份证 amp;lt

amp;lt;codeamp;gt;functionamp;lt;/codeamp;gt; amp;lt;codeamp;gt;isCardNo(card) { amp;lt;/codeamp;gt;amp;lt;/divamp;gt;amp;lt;codeamp;gt;varamp;lt;/codeamp;gt; amp;lt;codeamp;gt;pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; amp;lt;/codeamp;gt;amp;lt;/divamp;gt;amp;lt;codeamp;gt;returnamp;lt;/codeamp;gt; amp;lt;codeamp;gt;pattern.test(card); }amp;lt;/codeamp;gt;amp;lt;/divamp;gt;

amp;lt;spanamp;gt;验证中文名称 amp;lt

amp;lt;codeamp;gt;functionamp;lt;/codeamp;gt; amp;lt;codeamp;gt;isChinaName(name) amp;lt;/codeamp;gt;amp;lt;/divamp;gt;amp;lt;codeamp;gt;{ amp;lt;/codeamp;gt;amp;lt;codeamp;gt;varamp;lt;/codeamp;gt; amp;lt;codeamp;gt;pattern = /^[\u4E00-\u9FA5]{1,6}$/; amp;lt;/codeamp;gt;amp;lt;/divamp;gt;amp;lt;codeamp;gt;returnamp;lt;/codeamp;gt; amp;lt;codeamp;gt;pattern.test(name); } amp;lt;/codeamp;gt;amp;lt;/divamp;gt;

正则表达式

/…/代表一个模式的开始和结束

^匹配字符串的开始

$匹配字符串的结束

\s任何空白字符

\S任何非空白字符

\d匹配一个数字字符，等价于[0-9]

\D除了数字之外的任何字符，等价于[^0-9]

\w匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]

\W任何非单字字符，等价于[^a-zA-z0-9_]

.除了换行符之外的任意字符

{n}匹配前一项n次

{n,}匹配前一项n次，或者多次

{n,m}匹配前一项至少n次，但是不能超过m次

*匹配前一项0次或多次，等价于{0,}

+匹配前一项1次或多次，等价于{1,}

？匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

HTML5的方式验证表单

HTML5验证属性amp;lt;/divamp;gt;

placeholder 提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失

required规定输入域不能为空amp;lt;bramp;gt;

pattern规定验证input域的模式（正则表达式）

validity 对象

$(document).ready(function(){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; $(amp;quot;#submitamp;quot;).click(function(){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; var u=document.getElementById(amp;quot;uNameamp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; if(u.validity.valueMissing==true){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; u.setCustomValidity(amp;quot;昵称不能为空amp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; }amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; else if(u.validity.patternMismatch==true){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; u.setCustomValidity(amp;quot;昵称必须是6~10位的英文和数字amp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; }amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; else{amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; u.setCustomValidity(amp;quot;amp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; }amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; var pwd=document.getElementById(amp;quot;pwdamp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; if(pwd.validity.valueMissing==true){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; pwd.setCustomValidity(amp;quot;密码不能为空amp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; }amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; else if(pwd.validity.patternMismatch==true){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; pwd.setCustomValidity(amp;quot;密码必须是6~16位的英文和数字amp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; }amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; else{amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; pwd.setCustomValidity(amp;quot;amp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; }amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; var email=document.getElementById(amp;quot;emailamp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; if(email.validity.valueMissing==true){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; email.setCustomValidity(amp;quot;邮箱不能为空amp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; }amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; else if(email.validity.typeMismatch==true){amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; email.setCustomValidity(amp;quot;邮箱格式不正确amp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; }amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; else{amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; email.setCustomValidity(amp;quot;amp;quot;);amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; }amp;lt;/divamp;gt;amp;nbsp; amp;nbsp; })amp;lt;/divamp;gt;})amp;lt;/divamp;gt;

valueMissing表单元素设置了required特性，则为必填项。如果必填项的值为空，就无法通过表单验证，amp;lt;bramp;gt;valueMissing属性会返回true，否则返回false。

typeMismatch输入值与type类型不匹配。HTML 5新增的表单类型如email、number、url等，amp;lt;bramp;gt;都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false。

patternMismatch输入值与pattern特性的正则表达式不匹配。amp;lt;bramp;gt;如果输入的内容不符合pattern验证模式的规则，则patternMismatch属性将返回true，否则返回false。

tooLong输入的内容超过了表单元素的maxLength 特性限定的字符长度。amp;lt;bramp;gt;虽然在输入的时候会限制表单内容的长度，但在某种情况下，如通过程序设置，还是会超出最大长度限制。amp;lt;bramp;gt;如果输入的内容超过了最大长度限制，则tooLong属性返回true，否则返回false。

rangeUnderflow输入的值小于min特性的值。如果输入的数值小于最小值，则rangeUnderflow属性返回true，否则返回false。

rangeOverflow输入的值大于max特性的值。如果输入的数值大于最大值，则rangeOverflow属性返回true，否则返回false。

stepMismatch输入的值不符合step特性所推算出的规则。用于填写数值的表单元素可能需要同时设置min、max和step特性，amp;lt;bramp;gt;这就限制了输入的值必须是最小值与step特性值的倍数之和。例如范围从0到10，step特性值为2，amp;lt;bramp;gt;因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false

customError使用自定义的验证错误提示信息。使用setCustomValidity( )方法自定义错误提示信息：amp;lt;bramp;gt;setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；amp;lt;bramp;gt;setCustomValidity(amp;quot;amp;quot;)会清除自定义的错误信息，此时customError属性值为false。