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