JavaScript基础知识点

一、变量定义

javascript是弱类型语言，定义变量时不需要用声明变量是声明类型的
var声明变量的关键字   var a
变量定义不区分类型，但是用的时候有类型

二、变量类型

1.基本类型

（1）数字
 var a = 10
 var b = 0.3
 
（2）字符串 字符和字符串不做区分
var c = "hello"
var d = 'demo'
 
（3）布尔类型 true flase
var e = true
var f = false
 
（4）undefined类型 只声明了一个变量，但是未赋值
var g
（5）null 涉及到一个量，但是这个量不存在
 

2.复合类型

（1）数组
定义数组 []代表空数组
var arr = [10, 0.5, "hello", 'demo', undefined, null, true, [],
    [0, 1.6, "demo1", 'hello1', true, false],
    {
        name: "name1",
        age: 17,
        sex: "男"
    }
]
console控制台打印
console.log(arr)
通过数组下标访问
console.log(arr[8][0])
 
（2）对象
定义对象{} key:value
var obj = {
    name: "张三",
    age: 40,
    sex: "男",
    marry: true,
    wife: {
        name: "李四",
        age: 35,
        sex: "女",
        marry: true,
    },
    child: [{
        name: "张张",
        age: 17,
        sex: "男",
        marry: false
    }, {
        name: "李李",
        age: 12,
        sex: "女",
        marry: false
    }],
    eat: function f(a, b) {
        console.log("对象中的命名函数")
        console.log(a)
        console.log(b)
    },
    run: function(a, b) {
        console.log("对象中的匿名函数")
        console.log(a)
        console.log(b)
    }
}
console.log(obj)
console.log(obj.eat)
obj.eat()
 
访问对象:  对象.属性 的方式进行访问
console.log(obj.wife)
 
（3）函数
命名函数定义 关键字function fun方法名 ()入参 {}函数体
function fun(a, b) {
    console.log("命名函数执行了")
}
命名函数调用: 方法名()
fun("你好", a)
 
（4）匿名函数
 
var aa = function(a, b) {
    console.log("匿名函数执行了")
}
 
（5）匿名函数调用
aa()
 
var asd = function(a, b) {
    console.log("====================")
}
asd() 

三、方法调用和交互相关

onclick鼠标单击
ondblclick鼠标双击
onmouseenter鼠标放上去触发
onmouseleave鼠标离开触发
 
document.onclick = function() {
     console.log("鼠标单击触发")
 }
var qwe = function() {
    console.log("鼠标单击触发")
}
document.onclick = qwe

四、dom操作 document object model

js中的对象和html中元素进行映射

1.查找

（1）根据id查找元素 getElementById()
console.log(document.getElementById("test"))
 
（2）根据class查找元素 getElementsByClassName() 返回所有复合条件的对象组成的数组
var zxc = document.getElementsByClassName("cc")
console.log(zxc)
 
（3）根据标签名获取元素
var zxc = document.getElementsByTagName("div")
 
（4）根据选择器获取元素 找到复合条件的第一个对象document.querySelector("") 
document.querySelector("")
 
（5）根据选择器获取元素 找到所有符合条件的元素组成的数组 document.querySelectorAll()// document.querySelectorAll()
 
（6）通过关系查找
①父级元素 parentNode parentElement
②子级   childNodes节点返回的数组 children子级标签
③第一个孩子childNodes[0]==firstChild children[0]==firstElementChild
④找弟弟 nextSibling找下一个节点    nextElementSibling找下一个标签
⑤找哥哥 previousSibling找上一个节点   previousElementSibling找上一个标签
console.log(document.getElementById("aa").nextElementSibling)

2.修改

var dd = document.querySelector("div")
console.log(dd)
console.dir(dd)
dd.innerText = "hello"
 
（1）改内容
xx.innerText 会把双引号中的内容当作文本处理
xx.innerHTML 修改的内容当作标签处理
 
（2）改属性
原生属性 直接修改 对象.属性修改
dd.id = "aaaa"
dd.className = "cccc"
 
自定义属性 getAttribute("属性名")获取 setAttribute("属性名", "属性值")修改
console.log(dd.getAttribute("aaaaa"))
dd.setAttribute("aaaaa", "ooooo")如果有这个属性就修改，如果没有这个属性就增加
console.log(dd.getAttribute("aaaaa"))
 
（3）改样式 
1.obj.style.属性 = value
dd.style.background = "black"
dd.style.color = "pink"
dd.style.fontSize = "30px"  font-size 把连字符-去掉 第二个单词的第一个字母大写
 
（4）obj.style.cssText = " "跟style标签里的写法一样就是不能换行
dd.style.cssText = "background:blue;color:red;font-size:15px"
 
（5）配合css加样式
dd.className = "eeee" 

3.添加

（1）创建元素 createElement()
var demo = document.createElement("p")
demo.innerText = "新元素"
demo.style.background = "red"
console.log(demo)
 
（2）复制 ul.cloneNode()其值有true和false  false是潜复制,只复制外壳  true连带着孩子一起复制
var ul = document.querySelector("ul")
var lalala = ul.cloneNode(true)
 
（3）添加元素
①在元素最后子元素位置添加 父亲去调方法 dd.appendChild
dd.appendChild(demo)
 
②在某个元素前添加 父亲去调方法 dd.insertBefore(要添加的元素，插入在那个节点之前)
dd.insertBefore(demo, document.querySelector("p"))
 
③替换掉某个元素 还是父亲去掉方法 dd.replaceChild(新节点,被替换的节点)
dd.replaceChild(demo, document.querySelector("p"))

4.删除

父级元素调用removeChild()
找父亲  直接找body.removeChild() 通过关系找xx.parentElement.removeChild()
var lit = document.querySelector(".lit")
lit.parentElement.removeChild(lit)

相关知识点代码如下：

var a = 10
var b = 0.3
var c = "hello"
var d = 'demo'
var e = true
var f = false
var g
var arr = [10, 0.5, "hello", 'demo', undefined, null, true, [],
    [0, 1.6, "demo1", 'hello1', true, false],
    {
        name: "name1",
        age: 17,
        sex: "男"
    }
]
console.log(arr)
console.log(arr[8][0])
var obj = {
    name: "张三",
    age: 40,
    sex: "男",
    marry: true,
    wife: {
        name: "李四",
        age: 35,
        sex: "女",
        marry: true,
    },
    child: [{
        name: "张张",
        age: 17,
        sex: "男",
        marry: false
    }, {
        name: "李李",
        age: 12,
        sex: "女",
        marry: false
    }],
    eat: function f(a, b) {
        console.log("对象中的命名函数")
        console.log(a)
        console.log(b)
    },
    run: function(a, b) {
        console.log("对象中的匿名函数")
        console.log(a)
        console.log(b)
    }
}
console.log(obj)
console.log(obj.eat)
obj.eat()
console.log(obj.wife)
function fun(a, b) {
    console.log("命名函数执行了")
}
fun("你好", a)
var aa = function(a, b) {
    console.log("匿名函数执行了")
}
aa()
var asd = function(a, b) {
    console.log("====================")
}
asd()
document.onclick = function() {
     console.log("鼠标单击触发")
 }
var qwe = function() {
    console.log("鼠标单击触发")
}
document.onclick = qwe
console.log(document.getElementById("test"))
var zxc = document.getElementsByClassName("cc")
console.log(zxc)
var zxc = document.getElementsByTagName("div")
document.querySelector("")
document.querySelectorAll()
console.log(document.getElementById("aa").nextElementSibling)
var dd = document.querySelector("div")
console.log(dd)
console.dir(dd)
dd.innerText = "hello"
dd.id = "aaaa"
dd.className = "cccc"
console.log(dd.getAttribute("aaaaa"))
dd.setAttribute("aaaaa", "ooooo")
console.log(dd.getAttribute("aaaaa"))
dd.style.background = "black"
dd.style.color = "pink"
dd.style.fontSize = "30px"
dd.style.cssText = "background:blue;color:red;font-size:15px"
dd.className = "eeee"
var demo = document.createElement("p")
demo.innerText = "新元素"
demo.style.background = "red"
console.log(demo)
var ul = document.querySelector("ul")
var lalala = ul.cloneNode(true)
dd.appendChild(demo)
dd.insertBefore(demo, document.querySelector("p"))
dd.replaceChild(demo, document.querySelector("p"))
var lit = document.querySelector(".lit")
lit.parentElement.removeChild(lit)