Category: Javascript /Jquery / React / Bootstrap / Web

Chrome 运行jQuery, Chrome调试板运行jQuery,Run jQuery in Chrome Console,Include jQuery in the JavaScript Console

  第一步:复制下面的代码 通过将以下代码复制并粘贴到 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, 什么是 shadow DOM, shadow DOM入门, 影子 DOM(Shadow DOM)

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

到底是什么DOM?, What, exactly, is the DOM?, 什么是 HTML DOM?

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

React钩子构建CRUD应用,React Hooks CRUD应用, Build a CRUD App in React with Hooks

  在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入门教程, React钩子入门, React钩子用法

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

轻量级“新颖”小巧的网页内容编辑器:ContentTools, A JS library for building WYSIWYG editors for HTML content.

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

Javascript 箭头函数, 箭头函数基础知识, 深入理解箭头函数, JS箭头函数为何用?怎么用?何时用?

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

React Hooks钩子用法, 如何在受控表单组件上使用 React Hooks

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

React搭配PHP的使用方法, PHP 和 React.js一起使用, An advanced guide on how to setup a React and PHP

A quick guide on setting up a React and PHP web. I love React and I still use PHP   在本文中,我将引导您为React Application设置PHP后端服务器。 要下载或浏览代码,请通过Github链接访问存储库。 通过此设置,您将能够在普通的Apache localhost而不是node js localhost:3000上运行和开发React应用,当您在开发Web应用时不想通过PHP或使用安全cookie强制进行身份验证重定向时,这很疯狂。或在应用程序启动前用PHP渲染一些东西。我还将添加SCSS支持和不错的高级功能。 好吧,现在让我们开始吧! 要… Read More

React Hook 钩子检测外部点击, React Hook 钩子监控外部点击, react onClickOutside, react-click-outside-hook

    1. 使用组件 react-cool-onclickoutside   react-cool-onclickoutside 是一个React 钩子  ,当用户在目标组件区域之外单击时触发回调。这是UI交互设计(IxD)的有用逻辑,例如关闭下拉菜单,模态或工具提示等。帮助大家❤️。   特征 React监听基于React hook的外部点击  。 Support‍♀️支持多个引用,以涵盖更多用例。 ?使用  被动事件侦听  器改善滚动性能。 ️滚动条可以从外部点击的回调中排除。 the 在事件循环中忽略某些元素。 ?使您可以在需要时停止监听外部喀哒声。 for由于某些原因支持自定义引… Read More

React基础: React Hook 钩子入门,React Hook 钩子要用法, useEffect() 实例

  下面就来谈谈,怎样正确理解钩子,并且深入剖析最重要的钩子之一的useEffect()。内容会尽量通俗,让不熟悉 React 的朋友也能看懂。   一、React 的两套 API 以前,React API 只有一套,现在有两套:类(class)API 和基于函数的钩子(hooks) API。     任何一个组件,可以用类来写,也可以用钩子来写。下面是类的写法。 class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }   再来看钩子的写法,… Read More

React.js:创建新的 React 应用, 深入浅出 Create React App, Create React App 中文文档, Create React App 快速入门

    初始化 React App 的多种方式 常见的初始化 React App 的方式有: 不使用构建工具构建 React App; 使用 Webpack 手动构建 React App; 使用 Create React App 一站式构建 React App; 在在线沙箱平台直接构建 React App   入门 Create React App 是一个官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。   快速开始 npx create-react-app my-app cd my-app npm start (npx 来自 npm 5.2+ 或更高版本, 查看 npm 旧版本的说明) 然后打开 http://loca… Read More

React.js 入门实例:AJAX处理, Form表单处理, 表单事件

  React AJAX React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。   以下实例演示了获取 Github 用户最新 gist 共享描述: class UserGist extends React.Component { constructor(props) { super(props); this.state = {username: '', lastGistUrl: ''}; } c… Read More