前言

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

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的继承关系

<!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>
    oldObject=function(){
      this.a="我是歌谣"
    }
    //赋值出一个新对象
    newObject=function(){
      newObject.b="属性2"
      newObject.function=function(){

      }
    }
    var geyao=new newObject()
  </script>
</body>
</html>

less,sass,scss区别

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

总结

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