前端知识点小记
文章平均质量分 58
在学习前端中的琐碎知识积累
Microbabyshine
这个作者很懒,什么都没留下…
展开
-
JS代码放在html中不同位置的区别
浏览器解析html是从上到下的js代码可以出现在 HTML 的任意地方使用window.onload函数,可以减少错误发生(这个函数就是在文档加载完成之后立即加载js代码)window.onload = function(){/*要执行的js代码*/}1.放置在head标签中在HTML head部分中的js代码会在被调用的时候才执行(页面加载完成之前读取)。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。由于这时候网页主体(body)还未加载,所以这里适合放一些不是立即执行转载 2021-08-10 19:23:39 · 496 阅读 · 0 评论 -
JS加载微信SDK—>跳转小程序的方法
import loadScript from './loader.js'const SDK_URL = '//res.wx.qq.com/open/js/jweixin-1.3.2.js' //小程序web-view推荐使用1.3.2版本let loaded = 'init'// 加载微信sdkexport function loadWechatSDK() { if (loaded === 'loaded') { return Promise.resolve() } else if(l原创 2021-07-29 19:21:57 · 2090 阅读 · 0 评论 -
获取当前H5页面的URL,并取到该URL中拼接的参数
// console.log('href',window.location.href)// 使用window.location.href获取到当前页面的URLlet newPath = `${window.location.href}`// console.log('newPath',newPath);let splitURL = newPath.split("?")[1].split("&");console.log(splitURL); for(var i=0;i<s原创 2021-07-29 19:10:32 · 2764 阅读 · 0 评论 -
JS获取版本号/判断版本号/判断环境
// 获取当前app的版本号const getAppVerison = (expStr) => { if (expStr == null) return null; const ua = navigator.userAgent.toLowerCase(); const patt = new RegExp(expStr, "g"); let lastIndex = null; while ((patt.exec(ua)) != null) { l原创 2021-07-29 19:04:51 · 2065 阅读 · 2 评论 -
vue中使用scrollIntoView()让选中的下拉列表项定位在视野中
问题出现需求需要实现一个单选下拉列表,选项在一屏显示不完,做了滚动条overflow:auto, 设置了height高度。那就出现了一个问题,当我点击某一个item选项时,如果这个item选项不在第一屏,而在滚动后才能看到的区域,那么再次点开这个下拉菜单时无法重新定位到被选中的item所在的这一屏,所以我们需要让下拉单选菜单再次打开时自己定位到这一屏。查阅资料问了一下同组的有经验的姐姐,说我可以使用window.scroll这些方法,详见https://developer.mozilla.org/原创 2021-07-10 12:49:58 · 1390 阅读 · 0 评论 -
git 常用命令
Git常用操作命令收集一、远程仓库相关命令检出仓库: $ git clone git://github.com/jquery/jquery.git查看远程仓库:$ git remote -v添加远程仓库:$ git remote add [name] [url]删除远程仓库:$ git remote rm [name]修改远程仓库:$ git remote set-url --push[name][newUrl]拉取远程仓库:$ git pull [remoteName] [localBr原创 2021-07-02 16:10:57 · 158 阅读 · 0 评论 -
Chrome浏览器设置font-size为12px以下无效的解决方法
问题描述Chrome浏览器在解析字体大小时,最小字号为12px,小于这个大小的字号都会解析成12px。当你把一行文字设为10px时Chrome浏览器会按12px来解析。解决方式解决这个问题的方法是用Chrome的私有属性禁用浏览器文字大小调整的功能。-webkit-text-size-adjust:none;PS: 在新版的chrome中已经禁止了改属性,建议使用CSS3中的方法。比如,设置10px,父元素设置font-size:12px时:transform:scale(0.833);原创 2021-06-30 18:57:25 · 783 阅读 · 0 评论 -
CSS 深入理解:overflow: hidden——隐藏溢出、清除浮动、解除坍塌
前言overflow:hidden 的主要功能有三个:隐藏溢出清除浮动解除坍塌举例理解初始html内容:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA转载 2021-06-29 20:21:11 · 553 阅读 · 2 评论 -
vue实现点击其他区域关闭自定义div
一、解决方案1、暴躁老哥的博客暴躁老哥的博客第一步:vue模块中的内容<template> <div class="hello" v-on:click="hidePanel"> <div id="myPanel" v-if="panelShow"></div> </div></template>第一步,我们在自己的vue模块中整体添加了一个hidePanel事件,准备整体区域进行点击,然后id为myPa原创 2021-06-25 18:28:10 · 3257 阅读 · 5 评论 -
z-index的使用及注意事项
一、z-index的层级问题1、无浮动定位,不设置z-index值结论:子高于父HTML<div id="no-style"> <div id="div1" class="father-div" style="background:#00ffff;"> div11111 <div id="test-position" class="child-position-absolute"> div11111的子元素 &l原创 2021-06-25 16:54:17 · 3017 阅读 · 1 评论 -
html a标签属性 rel=‘nofollow‘
对于网站SEO优化的人来说,rel=”nofollow”大家都不太陌生,特别是很多站长在和其他网站进行友情链接的交换的时候,其中重要的一项指标就是友情链接不能带有nofollow。不过仍然有一些新手站长对此并不太了解,下面就让我们一起来看看什么是nofollow,以及使用nofollow有哪些好处。什么是nofollow?nofollow是一个HTML标签的属性值,随着搜索引擎优化(SEO)的兴起,它渐渐被大家所了解,这个标签的意思是告诉搜索引擎不要此网页上的链接或不要追踪此特定链接。如果A网页.转载 2021-03-01 16:43:43 · 406 阅读 · 0 评论 -
阿里云服务器(Centos 7)上部署自己在Windows下开发的Vue项目(Docker版,超简单!)
一、安装DockerDocker要求CentOS系统的内核版本高于3.10(一般情况下你买的阿里云都是支持的哈),来验证你的CentOS版本是否支持 Docker 。通过 uname -r 命令查看你当前的内核版本$ uname -r使用root权限登录Centos。确保yum包更新到最新。$ yum update卸载旧版本(如果安装过旧版本的话,没有请省略)$ yum remove docker docker-common docker-selinux docker-eng原创 2020-12-30 16:59:27 · 3261 阅读 · 5 评论 -
CSS常见布局(附Github地址,存放示例代码)
什么是布局简单来说就是HTML页面的整体结构或骨架,类似于传统的报纸或杂志中的排版布局不是某个技术内容,而是一种设计思想1、居中布局2、多列布局3、圣杯布局4、双飞翼布局5、等分布局6、等高布局一、居中布局1、居中布局的分类水平居中布局概念:水平居中布局就是指当前元素,在父级元素容器中,水平方向是居中显示的水平居中布局实现方式:(不止这三种,这三种比较常见)inline-block + text-aligin 属性配合使用优点:浏览器兼容性比较好缺点:te原创 2020-08-05 21:38:28 · 407 阅读 · 0 评论 -
Flutter客户端打包
想要安装到手机上,我们必须要进行打包,这节课我们就学学Android客户端如何打包apk。其实这个打包的坑还是比较多的,官方文档显然是站在大神级程序员的角度写的,所以如果你看文档,特别是前端,那基本是打不成功的。不要怕,我这里就详细的把打包的过程和坑给大家演示一下。一、配置APP的图标想配置APP的图片,你需要找到下面的目录:项目根目录/android/app/src/main/res/进入之后你会看到很多mipmap-为前缀命名的文件夹,后边的是像素密度,可以看出图标的分辨率。mdp转载 2020-08-05 20:35:56 · 269 阅读 · 0 评论 -
声明式导航和编程式导航
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document<转载 2020-08-05 13:20:23 · 1680 阅读 · 0 评论 -
记一次今日头条(字节跳动)前端实习面试
刚刚结束面试!!!历时43分钟!!然后我就来写这篇凉凉博客说真的,这真是我人生第一次参加面试,还是网络面试,从未找过工作的我在此之前根本对“技术面”毫无概念。投完简历之后字节很快和我打了电话约面试(也就是两天前),然后我才了解到了面试都是啥,瞬间觉得自己啥也不会仿佛一个智障,自本科至今学计算机了5年了看到那种种面经我真实的晕了。好废话不多说。约的是下午两点开始,我提前十分钟进了牛客网面试链接然后等待面试官。面试官是个小姐姐,十分友好,但友好中也透露着一丝严肃。一、自我介绍二、聊下项目经历三、关原创 2020-06-05 15:37:54 · 1861 阅读 · 1 评论 -
前端学习网站&书籍
推荐的网站:MDN(https://developer.mozilla.org/zh-CN),Mozilla官方维护的网站,包括各种前端技术以及示例。Github(https://github.com),全球最大的开源代码库。codepen(http://codepen.io),可在线编辑HTML、CSS和JavaScript。stackoverflow(http://stackoverflow.com),全球最大的编程问答网。W3C官网(https://www.w3.org/TR),可在线浏览原创 2020-06-02 10:26:23 · 1150 阅读 · 0 评论 -
搭建vue-cli脚手架3.x版本和2.x版本项目
命令行搭建一、 3.x版本1、 安装 3.x 版本的 Vue 脚手架:npm install -g @vue/cli2、基于交互式命令行的方式,创建3.x版vue项目输入vue create 新建项目名称,然后开始进行如图所示的项目配置安装成功后会显示安装成功,并提示运行项目的命令3、运行上图的命令cd 你刚刚创建的项目名称npm run serve然后会提示你项目开始启动…见到如下页面说明搭建成功一、 2.x版本1、 安装 2.x 版本的 Vue 脚手架:npm i原创 2020-05-08 23:43:47 · 635 阅读 · 0 评论 -
VSCode自定义快捷键生成Vue实例模板——附模板代码
vscode中,在一个空白的页面中通过vh快捷键生成一个vue模板效果如下:下面就演示一下是如何实现的打开VScode→文件→首选项→用户代码片段点进去之后,选择html.json将红框部分的注释解开修改prefix的值,和description部分的描述将你自定义的模板代码贴入到body中,这里注意,每一行都是用双引号引起来的,每一行行末要用逗号(,)隔开,如图。整...原创 2020-04-29 17:34:39 · 3837 阅读 · 1 评论