前言
大家好 我是歌谣 今天继续进行前端知识的一些总结 想加入前端巅峰交流群私信我
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文件中， 需要使用的样式文件直接引入即可
总结
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣学习前端知识
