JavaScript基本语法

看代码，你会看懂的！

/*
    如何定义变量以及变量类型
        var a="123" vara= 
        变量类型：
            基本类型：字符串(string)、数值类型(number)、布尔类型(boolean)、undefined类型、null类型
                    查看变量类型 typeof a 或者 typeof(a)
            复合类型：数组、对象、函数
                    js中数组可以放多类型的数组元素
                    js中数组长度可变
                    js不存在数组越界

    如何使用变量

    如何定义函数

    如何使用函数
        1.函数调用
        2.函数整体作为值来使用  fun
        3.函数返回值作为值来使用  fun()
*/


//如何定义变量以及变量类型
var a="sdsdsd"
var a_1=new String("sdsd")
console.log(a_1[2])
var b=45
var b_1=new Number(445)
console.log(b_1)
var c=true
var d
var e=document.getElementById("6")
console.log(typeof(a))
console.log(typeof(b))
console.log(typeof(c))
console.log(typeof(d))
console.log(typeof e)

var arr=[[1,2,3],'sds',false,undefined,null]
console.log(arr)
arr.push(6)
console.log(arr[9])

var obj={
    // key:0,
    xingming:'222',
    age:69,
    children:[
        {xingming:'12'}
    ]
}
var hua='xingming'
console.log(obj[hua])
console.log(obj.age)
console.log(obj['xingming'],obj['age'],'岁')
console.log(obj.children[0].xingming)


for (var key in obj){
    console.log(key+":"+obj[key])
}





var fun=function(a){
    var str='this is a '
    console.log(str+a)
}

function fun1(a){
    var str='this is a '
    console.log(str+a)
}

fun('apple')
fun1('banana')

console.log(fun('we'))

setInterval(fun,1000)  //把函数整体作为值来使用-不加()
// 一 基本类型
// 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 涉及到一个量，但是这个量不存在
 
// 二 复合类型
// 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)
 
// 匿名函数
 
var aa = function(a, b) {
    console.log("匿名函数执行了")
}
 
// 匿名函数调用
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 根据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()
 
// 通过关系查找
// 1 父级元素 parentNode parentElement
// 2 子级   childNodes节点返回的数组 children子级标签
// 3 第一个孩子childNodes[0]==firstChild children[0]==firstElementChild
// 4 找弟弟 nextSibling找下一个节点    nextElementSibling找下一个标签
// 5 找哥哥 previousSibling找上一个节点   previousElementSibling找上一个标签
// console.log(document.getElementById("aa").nextElementSibling)
 
// 修改
var dd = document.querySelector("div")
console.log(dd)
console.dir(dd)
    // dd.innerText = "hello"
 
// 改内容
// xx.innerText 会把双引号中的内容当作文本处理
// xx.innerHTML 修改的内容当作标签处理
 
// 改属性
// 原生属性 直接修改 对象.属性修改
dd.id = "aaaa"
dd.className = "cccc"
 
// 自定义属性 getAttribute("属性名")获取 setAttribute("属性名", "属性值")修改
// console.log(dd.getAttribute("aaaaa"))
dd.setAttribute("aaaaa", "ooooo") //如果有这个属性就修改，如果没有这个属性就增加
console.log(dd.getAttribute("aaaaa"))
 
// 改样式 
// 1 obj.style.属性 = value
// dd.style.background = "black"
// dd.style.color = "pink"
// dd.style.fontSize = "30px"  font-size 把连字符-去掉 第二个单词的第一个字母大写
 
// 2 obj.style.cssText = " "跟style标签里的写法一样就是不能换行
// dd.style.cssText = "background:blue;color:red;font-size:15px"
 
// 3 配合css加样式
// dd.className = "eeee"
 
// 添加
// 1、 创建元素 createElement()
var demo = document.createElement("p")
demo.innerText = "新元素"
demo.style.background = "red"
console.log(demo)
 
// 3、 复制 ul.cloneNode()其值有true和false  false是潜复制,只复制外壳  true连带着孩子一起复制
var ul = document.querySelector("ul")
var lalala = ul.cloneNode(true)
 
// 2 添加元素
// 1、在元素最后子元素位置添加 父亲去调方法 dd.appendChild
// dd.appendChild(demo)
 
// 2、在某个元素前添加 父亲去调方法 dd.insertBefore(要添加的元素，插入在那个节点之前)
// dd.insertBefore(demo, document.querySelector("p"))
 
// 3、替换掉某个元素 还是父亲去掉方法 dd.replaceChild(新节点,被替换的节点)
dd.replaceChild(demo, document.querySelector("p"))
 
// 删除 父级元素调用removeChild()
// 找父亲  直接找body.removeChild() 通过关系找xx.parentElement.removeChild()
var lit = document.querySelector(".lit")
lit.parentElement.removeChild(lit)