【React工作记录九十三】前端小知识点扫盲笔记记录2

简介: 【React工作记录九十三】前端小知识点扫盲笔记记录2

前言

大家好 我是歌谣 今天继续进行前端知识的一些总结 想加入前端巅峰交流群私信我


innerHTML和innerText的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>innerHTML和innerText的使用220313</title> </head> <body> <div id="geyao"><p>geyao</p><p>fangfang</p></div> <script> var geyao= document.getElementById("geyao") console.log(geyao,"geyao") var innerHtml=geyao.innerHTML var innerText=geyao.innerText console.log(innerHtml,"innerHtml") console.log(innerText,"innerText") </script> </body> </html>


instanceOf

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>instanceOf</title> </head> <body> <script> var simpleStr = '我是歌谣' var myString = new String() var newStr = new String('我是方方') var myDate = new Date() var myObj = {} var myNonObj = Object.create(null) simpleStr instanceof String // 返回 false, 非对象实例,因此返回 false myString instanceof String // 返回 true newStr instanceof String // 返回 true myString instanceof Object // 返回 true myObj instanceof Object // 返回 true, 尽管原型没有定义 ;({} instanceof Object) // 返回 true, 同上 myNonObj instanceof Object // 返回 false, 一种创建非 Object 实例的对象的方法 myString instanceof Date //返回 false myDate instanceof Date // 返回 true myDate instanceof Object // 返回 true myDate instanceof String // 返回 false </script> </body> </html>


javacript实现面向对象和继承机制

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>javascript面向对象和继承机制</title> </head> <body> <script> //javascript面向对象和继承机制 function MyObject(){ this.name="myObject" this.type="class" this.methodA=function(){ console.log(this.name) } this.methodB=function(){ return this.type } } </script> </body> </html>


javascript实现数组升序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var arr=[2,3,5,1,15,8,12,11,7] function des(a,b){ return a-b } console.log(arr.sort(des)) </script> </body> </html>


javascript实现继承

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现继承与多态</title> </head> <body> <script> function parentClass() { //私人变量 var x="我是私人变量" //私人方法 function method() { console.log("我是私人方法") } //公共变量 this.x="我是公共变量" //公共方法 this.method=function() { console.log(x) console.log(this.x) method() } } parentClass.prototype.method1=function() { console.log("我是父级的原型方法") } parentClass.staticMethod=function(){ console.log("我是父级的静态方法") } </script> </body> </html>


js数据类型

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>js数据类型</title> </head> <body> <script> // 原始数据类型 // number // string // boolean // null // undefined // symbol(ES6) // bigint(ES10) // 引用数据类型 // object </script> </body> </html>


js的继承关系

```




Document


less,sass,scss区别

// less, sass, scss都是css预处理语言( 也是对应的文件后缀名), 它们的语法功能比css更强大。 // 预处理语言使用是: 开发时用预处理语言, 在打包上线时, 用webpack再配合loader工具给转成css( Cascading Style Sheets) 给浏览器使用。 // scss 的基本语法: // 1. 可以使用$来标识变量( 可以将常用的样式标记成变量, 后续复用即可, 方便维护) // 2. 嵌套语法( 和less语法相同) // 3. & 父选择器(跟less语法相同) // 假如你想针对某个特定子元素 进行设置 // 4. 模块化 // 可以将需要的变量定义在一个新的js文件中, 需要使用的样式文件直接引入即可


总结

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣学习前端知识

目录
打赏
0
0
0
0
64
分享
相关文章
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
104 9
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
313 38
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
246 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
65 1
探索现代前端框架——React 的性能优化策略
探索现代前端框架——React 的性能优化策略
33 0
探索现代前端框架——React 的性能优化策略
探索现代前端框架——React 的性能优化策略
39 0
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
433 0
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
90 0
|
8月前
|
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
90 0
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
147 0

热门文章

最新文章

  • 1
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    37
  • 2
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    12
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    104
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    39
  • 5
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
    42
  • 6
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    97
  • 7
    前端解决axios请求的跨域问题【2步完成】
    22
  • 8
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
    49
  • 9
    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    22
  • 10
    docker安装nginx,前端项目运行
    64