5.前端JQuery

一、基本概念

        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");