jQuery layui常用方法介绍

下面我将为您介绍一下 jQuery、Layui 常用方法。

jQuery 常用方法

1. 选择器

jQuery 的选择器与 CSS 的选择器类似，可以通过标签、类、ID、属性等方式来选择元素。示例代码：

// 选择 ID 为 "myDiv" 的元素
$("#myDiv")

// 选择 class 为 "btn" 的按钮元素
$(".btn")

// 选择所有 p 标签
$("p")

// 选择 data-name 为 "test" 的元素
$("[data-name='test']")

2. 事件绑定

jQuery 可以通过 on() 方法来绑定事件，可以绑定多个事件，并可以使用事件委托。示例代码：

// 绑定单个事件
$("#myBtn").on("click", function() {
  alert("按钮被点击了");
});

// 绑定多个事件
$("#myBtn1").on("mouseenter mouseleave", function() {
  $(this).toggleClass("active");
});

// 使用事件委托
$("#myDiv").on("click", "a", function() {
  alert("链接被点击了");
});

3. AJAX

jQuery 的 AJAX 方法用于实现异步请求，可以通过 AJAX 方法获取数据、提交数据、以及使用 JSONP 跨域请求等。示例代码：

// 发送 GET 请求
$.ajax({
  url: "data.json",
  type: "GET",
  success: function(result) {
    // 处理返回的数据
  }
});

// 发送 POST 请求
$.ajax({
  url: "data.php",
  type: "POST",
  data: {name: "张三", age: 18},
  success: function(result) {
    // 处理返回的数据
  }
});

// JSONP 跨域请求
$.ajax({
  url: "https://example.com/data",
  type: "GET",
  dataType: "jsonp",
  success: function(result) {
    // 处理返回的数据
  }
});

4. 动画效果

jQuery 可以通过 animate() 方法来实现动画效果，包括运动、淡入淡出、滑动等效果。示例代码：

// 运动效果
$("#myDiv").animate({
  left: "200px",
  top: "100px",
}, 1000);

// 淡入淡出效果
$("#myDiv1").fadeIn(1000);
$("#myDiv2").fadeOut(1000);

// 滑动效果
$("#myDiv3").slideDown(1000);
$("#myDiv4").slideUp(1000);

Layui 常用方法

1. 日期时间选择器

Layui 的日期时间选择器可以方便地选择日期和时间，支持多种日期格式，并可以设置起始日期和时间。示例代码：

<input type="text" name="date" id="date" class="layui-input" placeholder="选择日期和时间">

layui.use('laydate', function(){
  var laydate = layui.laydate;

  //执行一个laydate实例
  laydate.render({
    elem: '#date', //指定元素
    type: 'datetime', //日期和时间类型
    range: '~', //选择范围连接符
    format: 'yyyy年MM月dd日 HH:mm:ss', //日期格式
    value: new Date(), //默认值
    min: '2020-01-01', //最小日期
    max: '2030-12-31' //最大日期
  });
});

2. 表单验证

Layui 的表单验证可以方便地对表单进行校验，支持多种验证方式，并可以自定义验证规则。示例代码：

<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="demo">提交</button>
    </div>
  </div>
</form>

layui.use('form', function(){
  var form = layui.form;

  //自定义验证规则
  form.verify({
    username: function(value){
      if(value.length < 2){
        return '用户名至少得2个字符啊';
      }
    }
  });

  //监听提交
  form.on('submit(demo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});

以上就是 jQuery 和 Layui 常用方法的简单介绍和示例代码。