jquery常用一览.docx

jquery常用一览.docx

《jquery常用一览.docx》由会员分享，可在线阅读，更多相关《jquery常用一览.docx（14页珍藏版）》请在冰豆网上搜索。

jquery常用一览

1引入js

$（"button[name='delBtn']"）.click（function（）{}）;//按钮为delBtn的事件

$（"#subbut"）.unbind（"click"）;//卸载事件

$（"#subbut"）.bind（"click",add）;//绑定事件

$（"#subbut"）.bind（"click",{id:

id},add）;

functionadd（e）{

varid=e.data.id;

}

$（"#c"）.removeClass（"hover"）;$（"#r"）.addClass（"hover"）;//添加删除样式

$（"#s"）.hide（）;$（"z"）.show（）;//隐藏显示

$（‘data’）.appendTo（"#content"）;//数据追加到末尾显示$（"#dataform"）.submit（）;

$（"#f"）.css（"visibility","hidden"）;//css修改

$（"#d"）.css（{left:

document.body.clientWidth/2-300,top:

document.body.scrollTop+200}）;

$（this）.css（{background:

"#CCCCCC"}）;

$（"#s"）.attr（"disabled","true"）;$（"#s"）.removeAttr（"disabled"）;

id=$（this）.attr（"id"）;//赋值当前选择id

dis.style.visibility='hidden';

$（"input,textarea"）.focus（function（）{$（this）.addClass（"iocus"）;}）

$（"input,textarea"）.blur（function（）{$（this）.removeClass（"ifocus"）;}）

$（"#div"）.empty（）;

$（"#"+cId）.children（）.length//元素的子元素个数

$（"#"+cId）.find（"div:

last-child"）.attr（"id",jData.id）;

$（"#imgt"）.mousedown（function（）{

$（this）.attr（"src","0.png"）;

}）;

$（"#imgt"）.mouseup（function（）{

$（this）.attr（"src","l.png"）;

}）;

$（'input'）.keydown（function（event）{

if（event.keyCode==13）{

lo（）;

}

}）;

varjData=eval（"（"+data+"）"）;

$.each（jData.items,function（y,item）{

d=d+""+item.name+"";

}）;

4js验证

varvalidator=$（"#form"）.bind（"invalid-form.validate",function（）{}）.validate（{

/*设置验证触发的事件*/

errorPlacement:

function（error,element）{if（element.attr（"id"）=="tel"||element.attr（"id"）=="mobile"）{error.appendTo（$（"#rereError"））;

}elseif（element.attr（"type"）=="checkbox"||element.attr（"type"）=="radio"）{error.appendTo（element.parent（）.parent（））;

}else{

error.appendTo（element.parent（））;

}

},

rules:

{

validDay:

{validDayaddmethod:

true},

title:

"required",

linkman:

"required",

county:

"required"

price:

{regexPrice:

true,regexPriceR:

true}

messages:

{

title:

"请填写标题",

man:

"请填写联系人",

area:

"请选择所在地"

}

}）;

$（"button"）.attr（"disabled",false）;

}）;

jQuery.validator.addMethod（"regexPriceR",function（value,element）{

if（value==""||value==null）{

returnfalse;

}else{

returntrue;

}

},"请填写价格"）;

jQuery.validator.addMethod（"regexPrice",function（value,element）{

if（value.length>8）{

returnfalse;

}

if（value==""||value==null）{

returntrue;

}

varregex=newRegExp（/^（?

!

0\d）（?

!

\.）[0-9]+（\.[0-9]{1,2}）?

$/）;

if（（regex.test（value））&&value!

=0）{

returntrue;

}

returnfalse;

},"请填写正确的价格"）;

5jQuery.ajax（{type:

"GET",

url:

"${pageContext.request.contextPath}/login",data:

{name:

$（"#name"）.val（））,password:

$（"#password"）.val（））method:

"get"},

async:

false,cache:

false,dataType:

"text",scriptCharset:

"UTF-8",

success:

function（s）{

if（s=='0'）{

alert（"用户名或密码错误！

"）;

}else{

$（"#logonForm"）.submit（）;

}

}

}）;

$（document）.ready（function（）{

$（"button[name='delBtn']"）.click（function（）{

$.ajax（{

type:

"GET",

url:

"${contextPath}/delInfo?

id="+$（this）.attr（"id"）,

contentType:

'html',

cache:

false,

success:

function（data）{

if（data==1）{

alert（"删除成功！

"）;

}

}

}）;

}）;

}）;

jqueryvalidate.js表单验证的基本用法后续

functionlang（key）{

mylang={

'ls_input_myb':

'请输入您的账户',

'ls_myb_email':

'漫游币账户为邮箱地址',

'ls_login_password':

'请输入您的登录密码',

'ls_password_length':

'密码长度为{0}-{1}位之间',

'ls_input_captcha':

'请输入验证码',

'ls_captcha_length':

'验证码的长度为{0}位',

'ls_account_email':

'账户名为邮箱地址',

'':

''

};

returnmylang[key];

}

$（document）.ready（function（）{

$（"#loginForm"）.validate（{

rules:

{

uEmail:

{

required:

true,

email:

true

},

uPassword:

{

required:

true,

rangelength:

[6,30]

}

},

messages:

{

uEmail:

{

required:

lang（'ls_input_myb'）,

email:

lang（'ls_myb_email'）

},

uPassword:

{

required:

lang（'ls_login_password'）,

rangelength:

$.format（lang（'ls_password_length'））

}

},

errorPlacement:

function（error,element）{

varplacement=$（element.parent（"td"）.parent（"tr"）.next（"tr"）.find（"td"）.get

（1））;

placement.text（''）;

error.appendTo（placement）;

},

onkeyup:

false

}）;

varaccountTipsText=lang（'ls_account_email'）;

$（"#uEmail"）.focus（function（）{

if（!

$（$（this）.parent（）.parent（）.next（）.find（'td'）.get

（1））.text（））{

$（$（this）.parent（）.parent（）.next（）.find（'td'）.get

（1））.html（''+accountTipsText+''）;

}

$（this）.css（'color','#000'）;

}）.focus（）;

}）;

我就是从这个例子中开始的，其实这个例子几乎包含了jquery.validate.js的精髓，如果你完整理解了这个代码基本上算是入门了。

想起以前做期货网页在线模拟的时候都自己写代码去判断，真实幼稚死了…………

下面是完整的文章介绍。

默认校验规则

（1）required:

true必输字段

（2）remote:

"check.php"使用ajax方法调用check.php验证输入值

（3）email:

true必须输入正确格式的电子邮件

（4）url:

true必须输入正确格式的网址

（5）date:

true必须输入正确格式的日期

（6）dateISO:

true必须输入正确格式的日期（ISO），例如：

2009-06-23，1998/01/22只验证格式，不验证有效性

（7）number:

true必须输入合法的数字（负数，小数）

（8）digits:

true必须输入整数

（9）creditcard:

必须输入合法的信用卡号

（10）equalTo:

"#field"输入值必须和#field相同

（11）accept:

输入拥有合法后缀名的字符串（上传文件的后缀）

（12）maxlength:

5输入长度最多是5的字符串（汉字算一个字符）

（13）minlength:

10输入长度最小是10的字符串（汉字算一个字符）

（14）rangelength:

[5,10]输入长度必须介于5和10之间的字符串"）（汉字算一个字符）

（15）range:

[5,10]输入值必须介于5和10之间

（16）max:

5输入值不能大于5

（17）min:

10输入值不能小于10

默认的提示

复制代码代码如下:

messages:

{

required:

"Thisfieldisrequired.",

remote:

"Pleasefixthisfield.",

email:

"Pleaseenteravalidemailaddress.",

url:

"PleaseenteravalidURL.",

date:

"Pleaseenteravaliddate.",

dateISO:

"Pleaseenteravaliddate（ISO）.",

dateDE:

"BittegebenSieeing眉ltigesDatumein.",

number:

"Pleaseenteravalidnumber.",

numberDE:

"BittegebenSieeineNummerein.",

digits:

"Pleaseenteronlydigits",

creditcard:

"Pleaseenteravalidcreditcardnumber.",

equalTo:

"Pleaseenterthesamevalueagain.",

accept:

"Pleaseenteravaluewithavalidextension.",

maxlength:

$.validator.format（"Pleaseenternomorethan{0}characters."）,

minlength:

$.validator.format（"Pleaseenteratleast{0}characters."）,

rangelength:

$.validator.format（"Pleaseenteravaluebetween{0}and{1}characterslong."）,

range:

$.validator.format（"Pleaseenteravaluebetween{0}and{1}."）,

max:

$.validator.format（"Pleaseenteravaluelessthanorequalto{0}."）,

min:

$.validator.format（"Pleaseenteravaluegreaterthanorequalto{0}."）

},

如需要修改，可在js代码中加入：

复制代码代码如下:

jQuery.extend（jQuery.validator.messages,{

required:

"必选字段",

remote:

"请修正该字段",

email:

"请输入正确格式的电子邮件",

url:

"请输入合法的网址",

date:

"请输入合法的日期",

dateISO:

"请输入合法的日期（ISO）.",

number:

"请输入合法的数字",

digits:

"只能输入整数",

creditcard:

"请输入合法的信用卡号",

equalTo:

"请再次输入相同的值",

accept:

"请输入拥有合法后缀名的字符串",

maxlength:

jQuery.validator.format（"请输入一个长度最多是{0}的字符串"）,

minlength:

jQuery.validator.format（"请输入一个长度最少是{0}的字符串"）,

rangelength:

jQuery.validator.format（"请输入一个长度介于{0}和{1}之间的字符串"）,

range:

jQuery.validator.format（"请输入一个介于{0}和{1}之间的值"）,

max:

jQuery.validator.format（"请输入一个最大为{0}的值"）,

min:

jQuery.validator.format（"请输入一个最小为{0}的值"）

}）;

推荐做法，将此文件放入messages_cn.js中，在页面中引入

使用方式

1.将校验规则写到控件中

复制代码代码如下:

$（）.ready（function（）{

$（"#signupForm"）.validate（）;

}）;

Firstname

E-Mail

Password

true,minlength:

5}"/>

确认密码

true,minlength:

5,equalTo:

'#password'}"/>

使用class="{}"的方式，必须引入包：

jquery.metadata.js

可以使用如下的方法，修改提示内容：

class="{required:

true,minlength:

5,messages:

{required:

'请输入内容'}}"

在使用equalTo关键字时，后面的内容必须加上引号，如下代码：

class="{required:

true,minlength:

5,equalTo:

'#password'}"

另外一个方式，使用关键字：

meta（为了元数据使用其他插件你要包装你的验证规则在他们自己的项目中可以用这个特殊的选项）

Tellthevalidationplugintolookinsideavalidate-propertyinmetadataforvalidationrules.

例如：

meta:

"validate"

{required:

true,minlength:

5}}"/>

再有一种方式：

$.metadata.setType（"attr","validate"）;

这样可以使用validate="{required:

true}"的方式，或者class="required"，但class="{required:

true,minlength:

5}"将不起作用

2.将校验规则写到代码中

复制代码代码如下:

$（）.ready（function（）{

$（"#signupForm"）.validate（{

rules:

{

firstname:

"required",

email:

{

required:

true,

email:

true

},

password:

{

required:

true,

minlength:

5

},

confirm_password:

{

required:

true,

minlength:

5,

equalTo:

"#password"

}

},

messages:

{

firstname:

"请输入姓名",

email:

{

required:

"请输入Email地址",

email:

"请输入正确的email地址"

},

password:

{

required:

"请输入密码",

minlength:

jQuery.format（"密码不能小于{0}个字符"）

},

confirm_password:

{

required:

"请输入确认密码",

minlength:

"确认密码不能小于5个字符",

equalTo:

"两次输入密码不一致不一致"