前端
文章平均质量分 53
一些前端功能的实现,以及需要重点关注的知识点
今天备忘录了吗
这个作者很懒,什么都没留下…
展开
-
去除滚动条
chrome.div::-webkit-scrollbar { display: none;}火狐.div { scrollbar-width: none;}IE.div { -ms-overflow-style: none;}原创 2022-02-15 17:25:49 · 459 阅读 · 0 评论 -
classnames工具的使用(实现样式的条件控制)
classNames参考资料 - https://www.npmjs.com/package/classnamesUsage with React.jsThis package is the official replacement for classSet, which was originally shipped in the React.js Addons bundle.这个包是 classSet 的正式代替,classSet 是最初应用于 reactjs 的扩展包。One of its p原创 2021-11-22 16:56:33 · 922 阅读 · 0 评论 -
浏览器网页宽高汇总(offsetwidth、clientwidth、scrollwidth...)
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:原创 2021-11-11 15:17:33 · 377 阅读 · 0 评论 -
json对象数组的创建、遍历、添加、删除、修改、js的splice()用法
1 创建 (1)第一种方式:常见项目ajax调用后返回的都是json对象数组 (2)第二种方式:手动构造json对象数组 2 遍历:共四种方法 (1)$.each() (2)forEach (3)for in (4)for 3 添加:共三种方法 (1)在json对象数组的末尾添加一个json对象 (2)在json对象数组的最前面添加...转载 2021-10-20 10:20:38 · 1961 阅读 · 0 评论 -
2021/06/21 JavaScript - DOM和BOM学习
JavaScript 的组成 ECMAScript ,DOM,BOM。DOM:文档对象BOM:浏览器对象 ,对浏览器对象进行操作一、浏览器对象JavaScript可以获取浏览器提供的很多对象,并进行操作window不仅作为全局作用域,而且表示浏览器窗口window的属性 :1.innerWidth 和 innerHeight :浏览器内部的宽高,去除菜单栏工具栏和边框的元素后,网页的净宽高。2.outerWidth 和 outerHeigth :浏览器的全部宽高window的方法:w转载 2021-06-21 17:05:06 · 151 阅读 · 0 评论 -
DangerouslySetInnerHTML
Dangerously Set innerHTML用于在代码中插入一段HTML不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击 的原因之一。我们的设计哲学是让确保安全应该是简单的,开发者在执行“不安全”的操作的时候应该清楚地知道他们自己的意图。 dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的,以此来警告,它的 prop 值( 一个对原创 2021-02-05 13:16:42 · 2243 阅读 · 0 评论 -
React路由传参 -- ( params, query, state, search)
1.params<Route path='/path/:name' component={Path}/><link to="/path/2">xxx</Link>this.props.history.push({pathname:"/path/" + name});读取参数用:this.props.match.params.name优势 : 刷新地址栏,参数依然存在缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。2.query<转载 2021-02-05 10:25:55 · 4346 阅读 · 2 评论 -
前端5 --- windows 对象
在JavaScript中,一个浏览器窗口就是一个window对象(这句话很重要)。图中有3个窗口,也就是3个不同的window对象。 简单来说,JavaScript会把一个窗口看成一个对象,这样我们就可以用这个对象的属性和方法来操作这个窗口。实际上,我们每次打开一个页面时,浏览器都会自动为这个页面创建一个window对象。 window对象存放了这个页面的所有信息,为了更好分类处理这些信息,window对象下面又分为很多对象,如下图所示。window对象下的子对象子对象说明原创 2021-01-18 14:42:49 · 747 阅读 · 0 评论 -
前端1 --- loading实现方法
1. 首先state添加一个loading属性,得到数据 或者 网络不错 --> loading设置为false,没有数据 或者 网络不好 --> loading设置为true,在渲染部分判断loading,loading为 false —> 记载正常页面,loading为true —> 加载loading画面,2. 简单loading模板import React from 'react'export default class Loading exte原创 2020-12-30 17:39:52 · 730 阅读 · 0 评论 -
前端2 --- $()的几种用法
$的几种用法1.用作函数名类似于匿名函数//不带参function $(){ return document.getElementById("xxx");}//带参function $(Nid){ return document.getElementById(Nid); } 2.找到节点进行后续操作‘a’ 找标签‘#hy’ 找id‘.hy’ 找class/** 找到a标签,对所有的a标签添加一个click事件 */$('a').click(functi原创 2020-12-31 16:54:47 · 1836 阅读 · 0 评论 -
前端3 --- 回车实现输入框切换
本章目的:react实现输入框之间的切换(跳过disabled)实现写一段静态页面如下图其中的输入框和Select框都是引用的antd组件,有固定的命名方式 - 以ant-input 和 ant-select开头**按下enter键 --> 触发事件( 事件内实现焦点移动到下一个输入框/选择框) **补充:按键触发事件为 onKeyDown()Enter键的键号KeyCode=13获取html节点函数 document.getElementsByClassName() 或者原创 2021-01-04 16:25:06 · 561 阅读 · 0 评论