看代码,你会看懂的!
/*
如何定义变量以及变量类型
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)