jquery学习笔记补充

1，工具函数：全局函数
字符串处理：
$.trim()
对象和数组操作:
$.each()  遍历数组
var arr = [1,2,3,4];
$.each(arr,functon(index,value){
index指的是遍历的下标
value是遍历遇到的值
$('div').html(index + value);
});

$.each(window,function(name, value){
//name是遍历到的属性名称
//value是遍历到的方法名称
});

$.each($.ajax(),function(name, value){
//name是遍历到的属性名称
//value是遍历到的方法名称
});

2. $.grep()数据筛选
var ar = [1,2,3,4,5];
var arrGrep = $.grep(arr, function(element,index){
return index < 3 && element < 6; //返回下标小于3的数组且元素小于6的
});

3，$.map()修改数据
var arr = [1,2,3];
var arrmap = $.map(arr, function(element,index){
//修改指定的元素
if(index > 2 && element > 7)
return element+1;
});

4，$.inArray()获取查到的元素的下标
var arr = [1,2,3];
va arrInArray = $.inArray(1,arr);
alert(arrInArray);//从0开始计算

5，$.merge(); 合并两个数组
var arr1 = [];
var arr2 = [];
var arr = $.merge(arr1, arr2);
6, $.unique()
删除重复的DOM元素
$('div').get()//获取div数组

7，
$.isArray(obj)判断是否为数组对象，是返回true
$.isFunction(obj)判断是否为函数，是返回true
$.isEmptyObject(obj)判断是否为空对象
$.isPlainObject(obj)判断是否为纯粹对象
$.contains(obj)判断一个DOM是否包含另一个DOM节点
$.type(data) 判断数据类型
$.isNumeric(data)判断是否为数值型数据
$.isWindow(data)判断是否为window对象

8，$.param()
将对象的值转换成URL键值对
var obj = {};
$.param(obj);
name=abc&age=1

9，$.browser() 浏览器检测

10,$.support() 判断浏览器支持哪些功能
$.support.opacity === true
...
11,$.proxy()
解决外部事件触发调用对象是this的指向问题

12，插件
1,必须先引入jquery.js，而且是在所有插件之前引入
2,引入插件
3,引入插件的周边,比如css皮肤,中文语言包等等

13，jquery.validate.js
jquery.validate.message_zh.js中文语言包，可以自己修改
表单验证插件
<form>
<input type='text' class='required' name='user'/>(*)
<input type='text' class='required' name='email'/>(*)
</form>

js中:
//给表单添加验证
$('form').validate();
input添加以下属性:
class='required'，不能为空
minlength='2' 最小不少于2位
class='email' 必须为点子邮件格式
class='url' 必须为网址格式

14，自定义插件的开发

15, 表单验证插件:

1,下载http://bassistance.de/jquery-plugins/jquery-plugin-validation
2，辅助文件:additional-method.js(控件class方式)
message_zh.js(提示汉化)
插件使用方法:
<script language='javascritp' src='validate.js'></script>
$('#formId').validate();
然后在表单的input上添加class
validate.js的默认验证规则有两种方式:1,控件属性方式 2，js传值方式
required:true 必须输入字段
email:true 必须输入正确的点子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确的日期
dateISO:true 必须输入正确格式的日期(ISO)(只验证格式,不验证有效)
number:true 必须输入合法的数字(包括负数、小数)
digits:true 必须输入正整数
creditcard:true必须输入合法的信用卡号，例如:....
equalTo:"#field"输入值必须和#field相同
主要用于密码确认
minlength:5 输入长度最小是5的字符串(汉字算一个字符)
maxlength:10 输入长度最大是5的字符串(汉字算一个字符)
rangelength:[5,10]输入长度5-10
range:[5,10] 输入值介于5到10之间
min:5 输入值不能小于5
max:10 输入值不能大于10
remote:'check.php'使用ajax方法调用chech.php验证输入值

1，使用控件验证:
<input type='text' class='required' minlength='2'/>
上述默认值为boolean的，直接写入class即可，如果是数字或者区间，使用 属性=值的方式即可
对于提示：可以引入中文汉化文件或者直接替换

2，使用js对象键值对传参设置:推荐用法(避免在htnl中写太多东西)
$(#formId").validate({
rules:{
user:{ //此处的user与input中的name对应
required:true,
minlength:2
},
url:{
required:true,
url:true
},
num:{
rangelength:[5,10]
}
},
messages{
user:{
required:'账号不得为空',
minlength:'最少不低于2位'
}
}
});

equalTo的用法:必须加上id
<input name='pass' type='password' id='pass'/>
<input name='confirmPass' type='password' />

$(#formId").validate({
rules:{
confirmPass :{
equalTo : '#pass'
}
},
messages:{
confirmPass:{
equalTo:''
}
}

});
16,validate.js格式化提示信息

$(#formId").validate({
rules:{
user:{ //此处的user与input中的name对应
required:true,
minlength:2
},
num:{
rangelength:[5,10]
}
},
messages{
user:{
required:'账号不得为空',
minlength:$.format('最少不低于{0}位') //$.format可以省略,0表示第0个数字
}
num:{
rangelength:'账号须在{0}-{1}之间'
}
}
});

17，开启调试模式:

$(#formId").validate({
debug:true,
rules;{},
messages:{}
});

多个表单设置debug

//所有默认行为都可以在此处设置
$.validator.setDefaults({
debug:true
})
18，使用其他方式代替默认提交:
$(#formId").validate({
submitHandler:function(form){
//此处的form得到formId所指向的form的DOM对象
//alert(form);
//验证成功之后的执行代码
alert('验证成功，准备提交');
}
});

19,忽略某个字段的验证
$(#formId").validate({
ignore: '#pass' //此处的input必须设置id
rules:{}
messages:{} 
});

20,群组错误提示,并群组显示:

$(#formId").validate({
ignore: '#pass' //此处的input必须设置id
groups:{
myerror:'user pass'
}
rules:{}
messages:{},
focusInvalid:false,
errorPlacement:function(error, index){
$.each(error, function(index, value){
$('#myerror').html($(.myerror').html+$(value).html());
});
}
});

21,设置验证成功后加载的class
success : 'success'
使用方法加载class并添加文本
success : function(label){
lable.addClass('abc').text('ok');
}
22,高亮显示有错误的元素
highlight: function(errorElement,errorlass){
$(errorElement).css('border','1px solid red');

}
unhighlight: function(errorElement,errorlass){
$(errorElement).css('border','0px solid red');

}

23,使用ajax验证

//服务器端输出true和false即可
$(#formId").validate({
user:{
 remote:{
url:'php',
type:'post',
dataType:'json',
data:{
user:function(){
return $('#user').val()
}
 }
}
}

messages:{
user:{
remote:"",
}
}
})

24, form.js验证插件
http://malsup.com/jquery/form

两个核心方法:ajaxForm()和ajaxSubmit()方法

25，实现表单自动提交
$('form').submit();//true自动false不自动