Category: Javascript /Jquery / React / Bootstrap / Web

    我只是想在这里为将来的人们添加一些代码，因为我试图将 JSON 导出到 CSV 文档并下载它。 我个人用 $.get $.get('{{ url('/newsletter/download') }}', $formdata, function(data) { // console.log(data); var items = jQuery.parseJSON(data); const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here const header = Object.keys(it…

      简而言之: 我是宇宙第一的编辑器，我支持当前最流行的三个框架。   TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 TinyMCE的优势： 开源可商用，基于LGPL2.1 插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2） 接口丰富，可扩展性强，有能力可以无限拓展功能 界面好看，符合现代审美 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”） 对标准支持优秀（自v5开始） 多语言支持，官… Read More

  我们在做wordpress主题开发时，为了实现图片的加载变快，避免不了要使用图像的懒加载技术，这里我推荐使用lazysizes.js，因为lazySizes是轻量级，不需要jQuery库，而且大小只有5kb，使用方法更简单。   图像懒加载 我先解释一下什么是图像懒加载 lazyLoader 图像延迟加载：是指当你网站有很多图像时，若一次性加载全部，那么网站会很慢，通过 lazyloader 插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。 插件名称：lazySizes 在线演… Read More

  由于图像是Web上最重要的内容之一，因此网站上的页面加载时间很容易成为问题。 即使进行了适当的优化，图像也可能会很重。 这会对访问者必须等待才能访问您网站上的内容的时间产生负面影响。 除非您想出一种不会影响速度感知的图像加载解决方案，否则离开你的网站。 在本文中，您将了解五种延迟加载图像的方法，可以将其添加到网络优化工具包中以改善网站上的用户体验。   1. 什么是延迟加载（懒加载） 延迟加载图片是指异步加载网站上的图片，也就是说，在首屏内容完全加载后，如果用户不向下滚动，放在页面底部的图片甚至不会被加载。 很多网站都使用这种方法，但在图片较多的网站上尤为明显。浏览您最喜欢的壁纸网站以获取… Read More

  项目地址：https://github.com/sachinchoolur/lightslider 实例演示：http://sachinchoolur.github.io/lightslider/ 在线编辑：JsFiddle  |  Codepen   lightslider是一款轻量级的响应式jQuery幻灯片插件。lightslider幻灯片插件能够支持移动触摸设备，它可以制作为带缩略图的内容幻灯片，或者制作为无限循环的旋转木马。它的特点还有： 完全响应式设计，自动适配任何设备。 可以单独设置每一个breakpoint。 画廊模式中可以创建带缩略图的幻灯片。 支持移动手机的swipe和触… Read More

    轻量级触摸响应滑块插件JQuery lightSlider 的确很好用，不过今天要介绍的是无需jquery支持的图片滚动slider插件：splidejs   安装： 有 4 种方法可以在您的网站上包含 Splide。   1. NPM 推荐的安装方法是使用 NPM。安装最新的稳定版本： $ npm install @splidejs/splide   2. 下载 您可以从以下链接下载 Splide 包： https://github.com/Splidejs/splide/releases/latest/ 主要的 JavaScript 文件位于 dist 目录中。使用<script>… Read More

  第一步：复制下面的代码 通过将以下代码复制并粘贴到 Chrome 控制台中，将 jQuery 加载到当前页面中。 var jq = document.createElement('script'); jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); // ... give time for script to load, then type (or see below for non wait option) jQuery.n… Read More

  shadow DOM不是超级英雄电影中的恶棍，也不是DOM的黑暗面。 shadow DOM只是一种解决文档对象模型（或简称DOM）中缺少的树封装方法。 网页通常使用来自外部源的数据和小部件，如果它们没有封装，那么样式可能会影响HTML中不必要的部分，迫使开发人员使用特定的选择器和!important 规则来避免样式冲突。 尽管如此，在编写大型程序时，这些努力似乎并不是那么有效，并且大量的时间被浪费在防止CSS和JavaScript的冲突上。 Shadow DOM API旨在通过提供封装DOM树的机制来解决这些问题。 Shadow DOM是用于创建Web组件的主要技术之一，另外两个是自定义元素和HTML… Read More

  文档对象模型或“ DOM”是网页的接口。它本质上是页面的API，允许程序读取和操纵页面的内容，结构和样式。让我们分解一下。   网页是如何构建的？ 浏览器如何从源HTML文档转换为在视口中显示样式化的交互式页面的方式称为“关键渲染路径”。尽管此过程可以分为几个步骤，但是正如我在“了解关键渲染路径”一文中所介绍的那样，这些步骤可以大致分为两个阶段。第一阶段涉及浏览器解析文档以确定最终将在页面上呈现的内容，第二阶段涉及浏览器执行呈现。 第一阶段的结果就是所谓的“渲染树”。渲染树表示将在页面上渲染的HTML元素及其相关样式。为了构建此树，浏览器需要两件事： CSSOM，表示与元素关联的样式… Read More

  在React- Hooks中引入了一个新概念。钩子是类的替代方法。如果您以前使用过React，那么您将熟悉简单的（功能性）组件 simple (functional) components 和类组件 class components。 Simple component const Example = () => { return <div>I'm a simple component</div> } Class component class Example extends Component { render() { return <div>I'm a class component</div>… Read More

    本教程将带你学习 如何使用React Hooks 如何定制自己的Hook   起步准备 要继续学习本教程，你应该基本了解： ES6（箭头函数，解构，类） React   项目安装 请确保已经配置好React开发环境，并且是最新版本的Node.js，再执行： npx create-react-app exploring-hooks   setState起步 首先让我们快速回顾一下React。 React是一个用于构建用户界面的库，其优点之一是React本身会强制开发人员使用严格数据流。还记得jQuery吗？使用jQuery几乎不可能清晰地构建项目，更不用说如何定义UI中的数据流… Read More

  介绍 ContentTools是一个美观小巧的网页内容工具（一个JS库），具备所见即所得（WYSIWYG）的编辑器功能，只需几个简单的步骤，即可将ContentTools添加到任何HTML页面。如下图所示页面通过实时ContentTool的弹出层实现实时编辑功能。用小而美来形容它最好不过了！   Github地址 https://github.com/GetmeUK   特性 ContentTools是用于HTML页面的美观小巧的内容编辑器。它被设计为： 与框架无关的库不使用任何JavaScript框架（没有JQuery），但可以很好地使用它们。 灵活的ContentTools软… Read More

  定义 箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。   语法   基础语法 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression //相当于：(param1, param2, …, paramN) =>{ return expression; } // 当只有一个参数时，圆括号是可选的： (singleParam) => { statem… Read More

  React Hooks 是一个闪亮的新提案，将优化 90% 的 React 代码。 根据 Dan Abramov 的说法，Hooks 是 React 的未来。 这听起来不错，但什么是 Hooks，它们将如何帮助我编写更好的代码？ 很高兴你这么问。 Hooks 允许你访问函数组件中的状态和生命周期方法。 如果前面这句话对你来说很陌生，那么你应该在这里更新关于 React 的记忆。 React 团队说，它将帮助你编写没有有状态组件包袱的干净的代码。 在使用 Hooks 实现了一个准系统表单之后，我同意了他们的观点。 让我们首先在有状态组件中写一个简单的表单，我们将使用 Hooks 重写该表单，你可以决定更喜欢哪种。   设置 访问 … Read More