首页 > 其他分享 >#yyds干货盘点 前端小知识点扫盲笔记记录2

#yyds干货盘点 前端小知识点扫盲笔记记录2

时间:2023-04-11 18:32:37浏览次数:41  
标签:function 知识点 console log yyds Object 干货 var instanceof

前言

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

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文件中, 需要使用的样式文件直接引入即可

总结

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

标签:function,知识点,console,log,yyds,Object,干货,var,instanceof
From: https://blog.51cto.com/u_14476028/6183790

相关文章

  • #yyds干货盘点# LeetCode程序员面试金典:合并两个有序链表
    题目:将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。  示例1:输入:l1=[1,2,4],l2=[1,3,4]输出:[1,1,2,3,4,4]示例2:输入:l1=[],l2=[]输出:[]示例3:输入:l1=[],l2=[0]输出:[0]代码实现:classSolution{publicLis......
  • #yyds干货盘点# LeetCode面试题:编辑距离
    1.简述:给你两个单词 word1和 word2,请返回将 word1 转换成 word2所使用的最少操作数 。你可以对一个单词进行如下三种操作:插入一个字符删除一个字符替换一个字符 示例 1:输入:word1="horse",word2="ros"输出:3解释:horse->rorse(将'h'替换为'r')rorse->rose(......
  • [转] 干货 | 结构体、联合体嵌套使用的一些实用操作
    https://cloud.tencent.com/developer/article/1872347https://mp.weixin.qq.com/s?__biz=MzU5MzcyMjI4MA==&mid=2247491623&idx=1&sn=963f8d6672a3492489bf934fc4d90307&chksm=fe0e8ee0c97907f668d2e769064c50ac931e1a39cbde5ef43cf095894b485e670bdfedbd06......
  • #yyds干货盘点#【愚公系列】2023年04月 .NET CORE工具案例-多语言离线翻译系统
    前言1.在线翻译在线翻译,一般是指在线翻译工具,如百度翻译、阿里翻译1688或Google翻译等。这类翻译工具的作用是利用计算机程序将一种自然语言(源语言)转换为另一种自然语言(目标语言)。其原理是依托海量的互联网数据资源和自然语言处理技术,在数百万篇文档中查找各种模式,以求解最佳......
  • #yyds干货盘点#【愚公系列】2023年04月 .NET CORE工具案例-分布式服务的健康检查系统
    前言1.健康检查系统来源背景互联网产品对用户体验提出了很高的要求,但常常由于技术侧原因,发生服务响应慢或者服务不可用等一系列影响用户体验的问题,导致业务中断,影响收入。影响服务不可用和响应慢的因素很多,可能是服务硬件损坏、光纤被挖断,可能是请求量过大导致数据库CPU负载、磁......
  • #yyds干货盘点#聊一聊forEach函数
    前端循环中会用到forEach,其实forEach有很多问题:forEach无法终止或者跳出循环forEach()方法不支持使用break或continue语句来跳出循环或跳过某一项。如果需要跳出循环或跳过某一项,应该使用for循环或其他支持break或continue语句的方法。forEach删除自身元素,index不可被重置在forEac......
  • #yyds干货盘点#Python读写文件脚本
    该脚本根据输入的路径,可以读取路径下的所有文件,实现匹配字符串替换,添加内容和删除内容的功能。importosfromfileinputimportFileInput#删除内容defmatch_then_delete(inputpath):forroot,dirs,filesinos.walk(inputpath):forfileinfiles:......
  • #yyds干货盘点#Linux中root与sudo的用法与区别(学习笔记)
    Linux下面有两个概念可能大家接触的比较多,一个是sudo命令,还有一个是root账户。Sudo 命令可以以最高权限执行命令,而root账户下所有命令都有最高权限,也就是相当于所有命令都默认加了sudo。那么 sudo和root的区别到底是什么呢,为什么我们建议使用sudo而不是直接使用roo......
  • #yyds干货盘点#学习笔记3,Linux 安全强化 SSH 远程连接的方法
    7.使用SSH密钥连接连接到服务器的最安全方法之一是使用SSH密钥。使用SSH密钥时,无需密码即可访问服务器。另外,你可以通过更改sshd_config文件中与密码相关的参数来完全关闭对服务器的密码访问。创建SSH密钥时,有两个密钥:Public和Private。公钥将上传到你要连接的服务器,......
  • #yyds干货盘点#掩盖系统上的操作
    touchfiletouch*statfilels–ltouch-d"2001-01-0120:00:00"filels-lfilenanotimestamps.sh#!/bin/bashif[$#-eq0];thenecho“Useasave(-s)orrestore(-r)parameter.”exit1fichmod+xtimestamps.sh./timestamps.shif[$1......