1. 简介
Layui是一个模块化的前端框架，它基于jQuery开发。因此，使用Layui就需要了解jQuery的使用方法。
2. 引入jQuery
在使用jQuery之前，需要引入jQuery库。可以通过以下两种方式引入：
2.1 下载jQuery到本地
可以在jQuery的官网上下载jQuery库，并将其存放在本地项目中，然后通过以下方式引入：
<script src="path/jquery.min.js"></script>
2.2 在线引用jQuery
也可以通过在线引用的方式，引入jQuery库：
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
其中，"//cdn.bootcss.com/"表示使用BootCDN提供的第三方库加速服务，可以提高访问速度。
3. Layui中使用jQuery
Layui封装了一些常用的组件和模块，例如表格、弹出层、分页等等。这些组件和模块中，大多数都依赖于jQuery。
使用Layui组件前，需要先引入jQuery，然后再引入Layui库：
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/layui/2.5.4/layui.min.js"></script>
3.1 基础例子
下面是一个使用Layui表单组件的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例页面</title>
<link rel="stylesheet" href="//cdn.bootcss.com/layui/2.5.4/css/layui.min.css">
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="login">登 录</button>
</div>
</div>
</form>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/layui/2.5.4/layui.min.js"></script>
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(login)', function(data){
//layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
</body>
</html>
在这个例子中，我们使用了Layui表单组件，需要依赖于jQuery。
首先，我们通过<link>标签引入了Layui所需的CSS文件。
接下来，我们在页面中使用Layui表单组件，并将其初始化为layui.form对象。在初始化之前，需要先引入jQuery，否则初始化会失败。
在layui.form对象中，我们监听了提交事件，并在提交事件中，可以做一些自定义的处理，例如校验表单数据、发送AJAX请求等等。
3.2 使用jQuery操作DOM元素
在Web开发中，我们经常需要操作DOM元素，例如改变元素的样式、改变元素的内容等等。这些操作可以通过jQuery轻松实现。
下面是一个例子，通过jQuery来改变元素的样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例页面</title>
<link rel="stylesheet" href="//cdn.bootcss.com/layui/2.5.4/css/layui.min.css">
</head>
<body>
<div id="myDiv"></div>
<button id="myButton">点击我</button>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
//获取元素
var myDiv = $('#myDiv');
var myButton = $('#myButton');
//改变样式
myDiv.css({
width: '100px',
height: '100px',
background: 'red'
});
//添加事件
myButton.click(function(){
myDiv.hide();
});
});
</script>
</body>
</html>
在这个例子中，我们创建了一个DIV元素和一个按钮元素，然后通过jQuery来操作这些元素。
在获取元素时，我们使用了jQuery的选择器。如果选择器找到了多个匹配的元素，变量会保存一个元素集合，可以通过索引来访问元素，例如$(selector)[0]。
在改变元素样式时，我们使用了jQuery的css()方法。可以通过css()方法来一次性改变多个样式。
在添加事件时，我们使用了jQuery的click()方法。可以通过click()方法来为元素添加点击事件。
4. 总结
jQuery在Layui中的应用非常广泛，掌握jQuery的使用方法，可以更好地使用Layui。
本文介绍了如何引入jQuery，以及如何在Layui中使用jQuery。同时，本文还介绍了如何使用jQuery操作DOM元素，包括获取元素、改变样式、添加事件等等。
我们需要注意，在使用jQuery的过程中，一定要避免与其他库发生冲突。