怎么在layuiAdmin中使用jQuery?

layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用

目前在打算重构十年之约的后台,以期能实现更多更方便的功能,在此也感谢 layui 官方赞助的 layuiAdmin 套餐版授权

不得不说 layuiAdmin 的牛逼,自适应都帮你搞好了,完成需求就好了,对我这种不喜欢搞前端的后端来说真的美滋滋

十年的后台代码已经在 Github开源,一边开发一边提交,同时因为不能泄露 layuiAdmin 的源码,所以去掉了静态页和静态资源

完整的代码上传到 Github 的私有库当中

来说正事吧,在 layuiAdmin 中使用 jQuery,解决 layui 和 jQuery 冲突的办法

jQuery 使用 $ 符号作为 jQuery 的简写,layui 也使用 $ 符号作为简写

jQuery 的团队考虑到了这个问题,并实现了 noConflict() 方法

jQuery noConflict() 方法

noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了

当然,也可以通过全名替代简写的方式来使用 jQuery:

$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍然在工作!");
    });
});

也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,可以把它存入变量,以供稍后使用

var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery 仍然在工作!");
    });
});

如果你的 jQuery 代码块使用 $ 简写,并且你不愿意改变这个快捷方式,那么可以把 $ 符号作为变量传递给 ready 方法

这样就可以在函数内使用 $ 符号了,但是在函数外,依旧不得不使用 “jQuery”:

$.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("jQuery 仍然在工作!");
    });
});

我当然不是来说jQuery 的,我是来说 layui 的,一定不好好看文档吧

使用内部jQuery

由于 layui 部分内置模块依赖 jQuery,所以 layui 将 jQuery1.11 最稳定的一个版本作为一个内置的DOM模块(唯一的一个第三方模块)

内置的 jQuery 模块去除了全局的 $ 和 jQuery ,是一个符合 layui 规范的标准模块

所以你必须通过以下方式得到:

//主动加载jquery模块
layui.use(['jquery', 'layer'], function(){
var $ = layui.$ //重点处
,layer = layui.layer;

//后面就跟你平时使用jQuery一样
$('body').append('hello jquery');
});

//如果内置的模块本身是依赖jquery,你无需去use jquery,所以上面的写法其实可以是:
layui.use('layer', function(){
var $ = layui.$ //由于layer弹层依赖jQuery,所以可以直接得到
,layer = layui.layer;

//……
});

沈唁志|一个PHPer的成长之路! 原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:怎么在layuiAdmin中使用jQuery?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Modeng的专栏

Vue一个案例引发的动态组件与全局事件绑定总结

最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战...

17200
来自专栏互联网杂技

开始学习React js

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件...

46460
来自专栏QQ会员技术团队的专栏

深入理解React(二) :数据流和事件原理

在React中,数据流是自上而下单向的从父节点传递到子节点,所以组件是简单且容易把握的,他们只需要从父节点提供的props中获取数据并渲染即可。如果顶层组件的某...

4.7K00
来自专栏星回的实验室

使用Headless Browser渲染页面

忙了很长一段时间,需要浮出水面来总结一工作了,不然做过的东西就像翻过一页完全没有记住的书,难免徒劳。

11420
来自专栏葡萄城控件技术团队

程序员Web面试之jQuery

又到了一年一度的毕业季了,青春散场,却等待下一场开幕。 ? 在求职大军中,IT行业的程序员、码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更...

271100
来自专栏蔡述雄的专栏

包学会之浅入浅出Vue.js:结业篇

本篇我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。

22.1K340
来自专栏章鱼的慢慢技术路

使用Photoshop合成两张不完整的图片

18020
来自专栏javascript趣味编程

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

24900
来自专栏理论坞

那些你不知道的Photoshop冷知识⑤——CC2015评测专题

笔者在探索新版本时,首先注意的便是首选项的变化,可以发现这次更新之后首选项侧边栏多了不少东西,点进去之后才发现原来是进行了重新分类,那么有哪些好玩的功能呢?介绍...

12140
来自专栏前端说吧

CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理

34280

扫码关注云+社区

领取腾讯云代金券