SoLoJia的博客

原创 react-router-dom文档

概念：监听地址栏变化，不刷新页面，动态切换div模拟切换页面安装： npm i react-router-dom -S1， 创建页面src/views/HomeView.jsx(home页面)src/views/AboutView.jsx（about页面）2，配置路由3，创建路由4，使用并切换路由<HashRouter> 哈希路由<BrowserRouter> 浏览器路由<NavLink> 导航链接 （选中会有active 类名）<Link>导航链接<OutLet>子路由容器。

原创 React基础

创建项目：npm init vite项目名称：myreact选择react选择javascript进入项目目录：cd myreact执行安装：npm i运行项目：npm run dev。

原创 uniapp和小程序的区别

【代码】nuiapp和小程序的区别。

原创 DOM小总结

objectjs 中宿主对象 window 中的一个属性：document。 document 对象主要处理网页内容。nodeType: 9nodeName: #documentnodeValue: nullJs 通过 Document 类型表示文档。在浏览器中， 对象是 HTMLDocument(继承自 Document 类型)的一个实例，表示整个 HTML 页面。而且 对象是 对象的一个属性。nodeType: 1nodeName: 元素的标签名nodeValue: null文本段落的 n

原创 BOM 属性、方法、事件应用案例

BOM的构成window对象是浏览器的顶级对象，它具有双重角色它是js访问浏览器窗口的一个接口它是一个全局对象。定义在全局作用域的变量、函数都会变为window对象的属性和方法在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等注意：window下的一个特殊属性window.name，所以避免使用name命名 窗口加载事件window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发事件（包括图像、脚本文件、css文

原创 通过for循环实现百钱买百鸡的问题:

通过for循环实现百钱买百鸡的问题: 公鸡5元每只，母鸡3元每只，小鸡3只1元，100元买一百只鸡多少种办法？

原创 表白神器利

表白神器

原创 什么是js

Js是面向Web的编程语言。绝大多数现代网站都使用了JavaScript，并且所有的现代Web浏览器——基于桌面系统、游戏机、平板电脑和智能手机的浏览器——均包含了JavaScript解释器。这使得JavaScript能够称得上史上使用最广泛的编程语言。JavaScript也是前端开发工程师必须掌握的三种技能之一:描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本书能帮助你掌握JavaScript这门语言。如果你有其他语言的编程经历，这会有助于你了解JavaScript是

原创 js计时器

本示例利用JavaScript设计一个倒计时显示牌，实现方法：用结束时间减去现在时，获取时间差，再利用数学方法从时间差中分别获取日，时、分、秒等信息，最后通过定时器设置每秒执行一次，实现实时更新。【操作步骤】1) 使用 new Date() 获取当前时间，使用 new 调用一个带有参数的 Date 对象，定义结束的时间，endtime=new Date(2020/8/8)。使用 getTime() 方法获取现在时和结束时距离 1970 年 1 月 1 日的毫秒数。然后，求两个时间差。把时间差转..

原创 null与undefined区别

1、首先是数据类型不一样console.log(typeof null) //objectconsole.log(typeof undefined) //undefined2、null和undefined两者相等，但是当两者做全等比较时，两者又不等。（因为他们的数据类型不一样）console.log(null==undefined) //tureconsole.log(null===undefined) //false3、转化成数字不同console.log(Number(nul

原创 移动端布局

背景移动端响应式布局开发主要方案有：基于rem开发 基于媒体查询 基于弹性盒基础概念在讨论响应式布局知识前，先了解下移动端常用基础概念。逻辑像素(CSS pixels)浏览器使用的抽象单位，主要用来在网页上绘制内容；通常在我们实际开发中涉及到的CSS单位px都是指逻辑像素。设备像素或物理像素(Device Pixels)显示屏幕的最小物理单位，每个DP包含自己的颜色、亮度。等值的 CSS pixels在手机屏幕上占多大的位置，这不是固定的，这取决于很多属性；经过分析和总结，

原创 移动端与pc端的区别

第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。第二： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。第三： 在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。第四： 在动画

原创 css单位简介

1.px：绝对单位，页面按精确像素展示2.em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。3.rem：相对单位，可理解为”root em”,相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。4.vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。5.vh：viewpoint height，视窗高度，1vh等于视窗高度的1.

原创 渐进增强和优雅降级的区别

优雅降级”观点“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。“渐进增强”观点“渐

原创 visibility:hidden和display:none的区别

visibility:hidden和display:none有以下几种不同，分别是1、作用不同；2、使用后HTML元素有所不同；3、定义不同。1、作用不同:visibility:hidden将元素隐藏，但是在网页中该占的位置还是占着。display:none将元素的显示设为无，即在网页中不占任何的位置。2、使用后HTML元素有所不同:visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、

原创 src与href的区别

src和href的区别1、请求资源类型不同 src资源时会将其指向的资源下载并应用到文档中 href表示超文本引用 2、作用结果不同 src用于替换当前内容 href用于在当前文档和引用资源之间确立联系 3、浏览器解析方式不同 src所指资源应用到当前 href会识别下载资源并不会停止对当前文档处理...

原创 html思维导图附加css

原创 HTML表单

原创 html文章

<!-- form 用来表示采集数据的范围--><!-- action 行为动作数据提交的路径-->method方法方式数据提交的方式get获取得到input.输入type.类型type="text"..文本框type="password" :密码框. type="submit" .提交按钮: type="reset". :重置按钮: type="button" :普通按钮:type="image".图片提交按钮name .名字va

原创 超链接文本

>行内框架 <iframe src=''''frameborder=''''></iframe> src引入页面的地址 frameborder框架的边框 frameborder=‘’1‘’有边框 frameborder=‘’0‘’无边框 <iframe src=''''frameborder=''''></iframe>超链接 <a href=''''target=''''>超链接&...

原创 html基础

原创 html基础

水平线1.<hr width=‘’align'‘’‘color=“”>2.width是宽度3.align水平方向对齐方式同时有以下这几种：center居中对齐 left居左对齐 right居右对齐4.color修改水平线的颜色5.<hr width=”23’‘align=’‘center’‘coior’‘=’‘yellow'>列表标签1.无序列表<ui>2.有序列表<ol>...