一、基本概念
JQuery是一个 JavaScript 函数库。JQuery是一个轻量级的"写的少,做的多"的 JavaScript 库。JQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
二、基础语法
JQuery语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
//基础语法,selector为css选择器,action为操作
$(selector).action()
//文档就绪事件,可以设置多个
$(function(){
});
三、 选择器
JQuery选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
//元素选择器
$("A");
//#id选择器
$("#id");
//.class选择器
$(".class");
//后代选择器
$("A B");
//属性选择器
$("A[attr]");
//过滤选择器
$("A:first"); $("B:last");
四、元素操作
JQuery 中非常重要的部分,就是操作 DOM 的能力。JQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
//获取内容
$("A").html();//只能获取第一个标签内容
$("B").text();
//设置内容
$("A").html("html");
$("B").text("text");
//获取属性
$("A").prop("prop");//原生属性
$("B").attr("attr");//自定义属性
$("C").val();//value属性
//设置属性
$("A").prop("prop","val");
$("B").attr("attr","val");
$("C").val("val");
//添加元素
$("A").append("append");//元素内添加
$("B").prepend("prepend");
$("C").after("after");//元素后添加
$("D").before("before");
//删除元素
$("A").remove();//删除元素及其子元素
$("B").empty();//删除子元素
//获取样式
$("A").css("css");
//设置样式
$("A").css({"css":"val", ... });
五、动画
//speed耗时,callback回调函数
$("A").hide(speed,callback);//隐藏
$("B").show(speed,callback);//显示
$("C").toggle(speed,callback);//切换
$("A").fadeIn(speed,callback);//淡入
$("B").fadeOut(speed,callback);//淡出
$("C").fadeToggle(speed,callback);//切换
$("A").slideDown(speed,callback);//下滑
$("B").slideUp(speed,callback);//上滑
$("C").slideToggle(speed,callback);//切换
$("A").animate({"css":"val"},speed,callback);//自定义动画
六、遍历
//方式一
$("A").each(function(index,element){
});
//方式二
$.each($("A"),function(index,element){
});
//方式三
for(let element of $("A")){
}
七、事件
JQuery事件,在 JQuery 中,大多数 DOM 事件都有一个等效的 JQuery 方法。
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover
//绑定事件
//方式一
$("A").action(function(){
});
//方式二
$("A").on("action",function(){
});
//解绑
$("A").off("action");
八、Ajax
Ajax = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。简短地说,在不重载整个网页的情况下,Ajax 通过后台加载数据,并在网页上进行显示。
//方式一
$.ajax({
url: "",
async: "",
data: {},
type: "",
dataType: "",
success: function(res){
},
error: function(err){
},
});
//方式二
$.get(URL,callback);
$.post(URL,data,callback);
九、插件
JQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。
$("A").validate({
//校验规则
rules:{
name:{
check:val;
check:val;
...
},
...
},
//错误信息
message:{
name:{
check:"err";
check:"err";
...
},
...
}
});
//默认校验规则
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
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。
//自定义规则,value元素属性值,element元素对象,params传递参数
$.validator.addMethod("check",function(value,element,params){
return true|false;//校验结果
},"message");