layui引入jquery模块 layui的jquery使用

jQuery

概述：

• jQuery是一个快速、简洁的javaScript代码库。
• jQuery设计宗旨是“Write less,do more”。
• 提供一种简便的javaScript操作方式。
• 优化HTML文档操作、事件处理、动画设计和Ajax交互。
• 总的来说jQuery是在javaScript的基础上，把很多JavaScript的操作封装起来，然后我们使用他封装好的语句。

具体使用方法：
我们需要在HTML页面引入一个jQuery.js文件，也可以是引用一个cdn（内容分发网络），引用的位置写在head标签的title下就好，如果有css文件引入，那么就写在css引入之下。
jQuery的基本使用
首先就是如何选中我们要处理的标签，jQuery的选中方式是：
$（“选择器”），其中选择器的写法和css一样，假如直接是一个标签，需要用到jQuery写法对他进行处理那么写法是$(标签)，总的来说，与js写法不同的地方就是在外面都要加上一层$（）；
jQuery编程的特点是链式编程风格，如果在对一个标签写完了一个方法之后只需在上一个方法最后面加上一个点然后就能继续写下一个方法。
jQuery的添加元素有四个方法这里举例一个append()方法，括号内写的是字符串，如果字符串中包含标签元素，那么他会自动编译。

jquery遍历
parent():返回选中元素的直接父元素，可用在表格中，点击该行最后一个节点的删除按钮删除本行。
children（）:返回被选中元素的所有直接子元素，然后通过循环遍历就可以选中任意一个元素。
siblings()返回被选中元素的所有同包元素，可用在轮播图的编号切换上。

AJAX

首先先了解一个json
json概述

• json:js对象标记
• 是一种轻量级的数据交换格式。
• 易于阅读和编写，同时也易于机器解析和生成，并有效的提升网络传输效率。

json语法是javaScript对象表示语法的子集

json值：

• 数字（整数或浮点数）
• 字符串（在双引号中）
• 逻辑值（true或false）
• 数组（在中括号中）
• 对象（在大括号中）
• null

json解析

• 浏览器和服务器交互采用json格式，但传输的是json字符串。
• 需要转成java兑现或js对象，这种转换过程称为json解析。

服务端一般有两种json供我们使用

• FastJSON:阿里开发的专门用来处理JSON的工具包。
• Jackson：Jackson公司开发的一趟处理json的API.
  两种json的字符格式转换使用如下
  1、测试fastJSON

import Empty.Student;//导入学生类，
import com.alibaba.fastjson.JSON;//导入fastJSON，本例使用的是fastJSON
import java.util.ArrayList;
import java.util.List;

public class UseJson {
    public static void main(String[] args) {
        m1();
    }
    public static void m1(){
        //首先创建一个学生对象用来测试转换
        Student s=new Student("张三",18,"男","12345");
        //先把学生对象转换成json字符串，json字符串就是一个字符串，格式就是json类型。
        String str=JSON.toJSONString(s);
        //json字符串的格式为：{"age":18,"id":"12345","name":"张三","sex":"男"}
        //将json字符串转换为原来的学生对象
        Student s1=JSON.parseObject(str,Student.class);
        System.out.println(s1.getAge());
    }
    public static void m2(){
        //下面测试对象集合的转换与解析
        List<Student> sl=new ArrayList<Student>();
        sl.add(new Student("张三",18,"男","12345"));
        sl.add(new Student("李四",20,"男","12345"));
        sl.add(new Student("王五",18,"女","12345"));
        sl.add(new Student("赵六",27,"男","12345"));
        String str=JSON.toJSONString(sl);
        List<Student> sl1=new ArrayList<Student>();
        //这里的解析用到的是parseArray与解析单个不同加上了array
        sl1=JSON.parseArray(str,Student.class);
        sl1.stream().forEach(System.out::println);
        sl1.stream().map(e->e.getAge()).forEach(System.out::println);
    }
}

2、测试jackSON

import Empty.Student;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;//jackson有三个文件，而fastjson只需导入一个文件即可

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class Jackson {
    public static void main(String[] args) throws IOException {
        m1();
    }
    public static void m1() throws IOException {
        Student s=new Student("zhangsan",18,"男","12345");
        //fastJSON需要先声明ObjectMapper
        ObjectMapper om=new ObjectMapper();
        //转换成json数据
        String str=om.writeValueAsString(s);
        //与fastJson写法不同，这个参数第一个是要解析的字符串，第二个是要解析成什么对象
        Student s1=om.readValue(str,Student.class);
        System.out.println(s1);
    }
    public static void m2() throws IOException {
        List<Student> sl=new ArrayList<Student>();
        sl.add(new Student("张三",18,"男","12345"));
        sl.add(new Student("李四",20,"男","12345"));
        sl.add(new Student("王五",18,"女","12345"));
        sl.add(new Student("赵六",27,"男","12345"));
        ObjectMapper om=new ObjectMapper();
        String str=om.writeValueAsString(sl);
        //集合的解析则更加麻烦，需要创建typereference对象，里面放入泛型为学生对象的集合，后面的大括号不能省略
        List<Student> ls1=om.readValue(str,new TypeReference<List<Student>>(){});
        ls1.stream().forEach(System.out::println);
    }
}

浏览器处理json，就是我们的前端处理json的方式

• json.stringify() 转换
• json.parse() 解析

json说的是前端和后端交互以及在网络上传递的数据格式。

AJAX
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

ajax使用步骤

//js原生写法
//创建XMLHttpRequest对象
			var xhr=new XMLHttpRequest();
			//设置回调函数,用来监测请求的情况 ，请求的情况有5种状态
			xhr.onreadystatechange=function(){};
			//打开连接
			xhr.open(ethod,url,async);
			//发送请求
			xhr.send(data);

//ajax的jQuery写法
$.ajax({
			type: "get",
			url: "json/data.json",
			success(data){
			//下面就是前端使用json数据的方法，url指向的是数据存放地址
			//success
					for(var i = 0; i < data.length; i++) {
								var e = "<tr>" +
									"<td>" + data[i].name + "</td>" +
									"<td>" + data[i].id + "</td>" +
									"<td>" + data[i].sex + "</td>" +
									"<td>" + data[i].salary + "</td>" +
									"<td>" + data[i].age + "</td>" +
									"<td><a href='javascript:void(0)' οnclick='del("+i+")'>删除</a></td>" +
									"</tr>";
								$("#tb").append(e);
							}
				} 
			}
		});

$.get({
	url:
})
$.post({
url:
})

validate

• 一个标准的验证方法库。
• jQuery的一个插件，依赖jQuery使用。
  例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用validate</title>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/validate.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form action="#" method="get" id="form">
			用户名：<input type="text" name="usename"/><br />
			密码：<input type="password" name="pwd"/ id="pwd"><br />
			确认密码：<input type="password" name="repwd"/><br />
			<button type="button">提交</button>
		</form>
		<script type="text/javascript">
			$(function(){
				$("#form").validate({
					rules:{ //validate主要有两部分，一个是规则，一个是提示，此处rules是规则
						usename:{  //选择使用input的name属性，为其添加判别式
							required:true, //设置为空时判断
							minlength:6		//设置输入最小长度为6
						},
						pwd:{
							required:true, //设置为空时判断
							minlength:6		//设置输入最小长度为6
						},
						repwd:{
							required:true, //设置为空时判断
							minlength:6	,	//设置输入最小长度为6
							equalTo:"#pwd"  //这里指的是与谁进行比较是否一样，后面是id选择器，所以在密码那一行加入了一个id
						}
					},
					messages:{
						usename:{		//同样是name属性选择，为其添加提示
							required:"用户名不能为空",  //此处为用户输入没有达到上面规则时给出的提示
							minlength:"用户名不能小于6位"
						},
						pwd:{
							required:"密码不能为空",  //此处为用户输入没有达到上面规则时给出的提示
							minlength:"密码不能小于六位"
						},
						repwd:{
							required:"重写密码不能为空",  //此处为用户输入没有达到上面规则时给出的提示
							minlength:"不能小于6位",
							equalTo:"与密码不一致"
						}
					}
				})
			})
		</script>
	</body>
</html>

Bootstrap layui

这两个都相当于前端页面的框架，使用他们能够很轻松的是页面更加美观，但他们的使用方法不一样。
bootstrap 在使用的时候需要导入一个css文件和一个js文件，之后我们在页面上写上我们需要的标签之后，这是如果需要改变标签的样式，只需要根据自己喜欢，然后在标签中假如class属性即可，这些class属性的值去官网上查看就可以了。如果只是弄页面样式，那么可以不使用js语法。
layui的使用比较难，同样它也需要导入应有的文件，在使用layui改变样式的时候我们只需要在boty页面中写入一个标签，然后标签的属性、值、还用展示在页面中的值，这些都是通过js语法写入，如果需要添加其他标签，它是通过在script中写上要添加的标签，然后在另一个script语句中把它加入到页面上，layui需要熟练掌握js语法。

总结：

• jQuery是一个js代码库，让我们在写js语法的时候更加轻松。
• ajax是一种异步提交技术，在不刷新整个页面的情况下提交部分数据，它是通过js语法来写得，在导入jQuery之后也有jQuery的写法。
• json 是一种轻量级的数据交换格式，只是种格式，不是数据，我们把想要传递的数据转换成json字符串然后在前后端或者网络中传递json字符串，到达目的地之后，对方通过json的解析技术解析成我们想要的数据。
• validate 是一个标准的检验方法库，当我们需要用户填写或者修改数据的时候需要用户正确的操作，于是我们就需要检验和提示来达到目的，validate就能帮助我们轻松的创建检验和提示内容。
• bootstrop 前端页面的一种框架，但不完全是框架，只是别人把很多类的css语法写好，我们需要什么样式，就给相应的标签添加class类，达到美化页面的效果。
• layui 和bootstrop是一个意思，只不过写法不同，layui主要是使用js语言达到目的。