javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script>
        alert("demo")
    </script> 

</head>
<body>
    <div>hello</div>
</body>
</html>

运行结果：

2.外引

在html里面加入要引用的js

二、javascript基础语法

1.定义变量

var 变量名=值

var aa="demo"
var bb=10
var cc=10.8

2.变量使用

(直接用变量名)使用时有类型

变量类型:

一、基本类型

1.字符串 " " ' '

var aa="demo"
var bb='d'

2.数字

var aa=10
var bb=10.2

3.布尔类型

var aa=true
var bb=false

4.undefined类型

声明了，但是没有赋值

var aa
console.log(aa)

5.null

二、复合类型

1.数组 [ ] 通过下标进行访问

var arr=["demo",10,10.2,true,undefined,null,["hello",20],{
    name:"张三",
    age:10,
},function f(a,b){
    console.log(a)
    console.log("数组里的命名函数执行了")
},function (a,b){
    console.log(b)
    console.log("数组里的命名函数执行了")
}]
console.log(arr)
console.log(arr[6])
console.log(arr[6][0])
console.log(arr[8])
console.log(arr[9])
arr[8](10,20)
arr[9](10,20)

2.类型 {key:value} 访问：对象.属性

var obj={
    name:"张三",
    age:18,
    sex:"男",
    play:["篮球","足球"],
    wife:{
        name:"李四",
        age:20,
    },
    child:[{
        name:"小张",
        age:"女",
    },{
        name:"小王",
        age:20,
    }],
    eat:function f(a,b){
         console.log(a)
         console.log("对象里的命名函数")
     },
     run:function(a,b){
         console.log(b)
         console.log("对象里的匿名函数")
     }
}
console.log(obj)
console.log(obj.age)
console.log(obj.wife)
console.log(obj.wife.name)
console.log(obj.child)
console.log(obj.play[0])
console.log(obj.eat)
console.log(obj.run)
obj.eat(10,20)
obj.run(10,20)

3.函数

(1)命名函数

function 方法名(需要传的参数){函数体}

function f(a,b){
     console.log(a)
     console.log(b)
     console.log("命名函数函数执行了")
}

调用：方法名()

f(10,20)

(2)匿名函数

var 变量名=function(需要传的参数){函数体}

var aa=function(a,b){
     console.log(a)
     console.log(b)
     console.log("匿名函数执行了")
 }

调用：变量名()

aa(10,20)

三、函数调用与交互

1.打印

console.log(document)//以标签形式打印

console.dir(document)//以对象形式打印

2.事件

var aa=function(a,b){

console.log(a)

console.log(b)

console.log("事件执行了")

}

点击事件 onclick

调用：

document.οnclick=aa

传参：,（绑事件不能传参，用下面这种方法传参）

document.οnclick=function(){

aa(12,10)

}

点击事件	onclick
双击事件	ondblclick
鼠标放上去触发	onmouseenter
鼠标离开触发	onmouseleave

四、dom操作

让对象和元素做一一映射

1.查找

查找方式	方法	返回
根据id值获取元素	getElementById()	返回符合条件的第一个对象
根据class值获取元素	getElementsByClassName	返回符合条件的所有对象组成的数组
根据元素名称获取元素	getElementsByTagName	返回符合条件的所有对象组成的数组
根据选择器获取元素	querySelector	返回符合条件的第一个对象
根据选择器获取元素	querySelectorAll	返回符合条件的所有对象组成的数组

根据关系获取元素:

找父级元素	parentElement
找父级元素	parentNode
找孩子	childNodes	要文本
找孩子	children	不要文本,只有元素
找第一个孩子	firstChild	要文本
找第一个孩子	firstElementChild	不要文本,只有元素/标签
找最后一个孩子	lastChild	要文本
找最后一个孩子	lastElementChild	不要文本,只有元素/标签
找上一个孩子	previousSibling	要文本
找上一个孩子	previousElementSibling	不要文本,只有元素/标签
找下一个孩子	nextSibling	要文本
找下一个孩子	nextElementSibling	不要文本,只有元素/标签

2.修改

(1)改内容

innerText	当前修改的内容当作文本来处理
innerHTML	当前修改的内容当作标签来处理
value	修改input的值

(2)改属性

①.原生属性

对象.属性=值

②.自定义属性

setAttribute("属性名","属性值")

setAttribute(属性名)获取

(3)改样式

①obj.style.属性名="属性值"

obj.style.background="red"

obj.style.color="yellow"

obj.style.fontSize='50px'

连起来写

obj.style.cssText="background:red;color:pink;font-size:20px;"

②obj.className="class值"

obj.className='ac'

3.添加

(1)创建元素

①新创建元素createElement()

var newNode=document.createElement("div")

②复制元素cloneNode()

需要传参，参数是true/false true(连内容一起复制)/false(浅复制，只复制外壳)

var oldNode= document.getElementById("bb")

var newNode=oldNode.cloneNode(true)

(2)添加元素

①在子元素的最后一个位置添加 appendChild()

var container=document.getElementById("aa")

container.appendChild(newNode)

②在某个元素后面添加

var flag=document.getElementById("test")

flag.appendChild(newNode)

③在某个元素前面添加 insertBefore(新元素，某元素)

var container=document.getElementById("aa")
var flag=document.getElementById("test")
container.insertBefore(newNode,flag)

④把某个元素替换掉 replaceChild(新元素，某元素)

var container=document.getElementById("aa")
var flag=document.getElementById("test")
container.replaceChild(newNode,flag)

运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    

</head>
<body>

    <ul id="bb" style="background-color: antiquewhite;">
        <li>h3前面加 hello</li>
        <li>hello</li>
    </ul>
    <ul id="cc" style="background-color:aquamarine">
        <li>把span替换掉 hello</li>
        <li>hello</li>
    </ul>

    <div id="aa">
        <p id="hh">p hh</p>
        <h3 id="test">h3 test</h3>
        <span id="demo">span demo</span>
     </div>

     <script>
        // (1)新创建元素createElement
        var newNode1=document.createElement("div")
        console.log(newNode1)
        var newNode2=document.createElement("div")
        // 加点内容
        newNode1.innerText='在子元素的最后一个位置添加新元素1'
        newNode1.className='blue'
        newNode1.setAttribute("index","aaaa")
        newNode1.style.color="red"

        newNode2.innerText='在p后面添加新元素2'
        newNode2.style.color='pink'
        // (2)复制元素cloneNode() ,需要传参，true(连内容一起复制)/false(浅复制，只复制外壳)
        var oldNode1= document.getElementById("bb")
        var newNode3=oldNode1.cloneNode(true)

        var oldNode2= document.getElementById("cc")
        var newNode4=oldNode2.cloneNode(true)



        // (1)在子元素的最后一个位置添加 appendChild
        var container=document.getElementById("aa")
        container.appendChild(newNode1)
        // (2)在p后面添加
        var flag1=document.getElementById("hh")
        flag1.appendChild(newNode2)
        //  (3)在h3前面添加
        var flag2=document.getElementById("test")
        container.insertBefore(newNode3,flag2)
        // (4)把span替换掉
        var flag3=document.getElementById("demo")
        container.replaceChild(newNode4,flag3)
    </script>
</body>
</html>

结果：

4.删除

找他的父级元素,父级元素调用removeChild()

找父级元素：

(1）直接找

var container=document.getElementById("aa")

var flag=document.getElementById("test")

container.removeChild(flag)

（2）通过关系找

var flag=document.getElementById("test")

var container=flag.parentElement

container.removeChild(flag)

运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    

</head>
<body>
    <div id="aa">
        <p id="hh">hh</p>
        <h3 id="test">test</h3>
        <span id="demo">demo</span>
     </div>

     <script>
            //删除  找他的父级元素,父级元素调用removeChild()
            //  找父级元素：
            // （1）直接找 
            var container1=document.getElementById("aa")
            var flag1=document.getElementById("test") 
            container1.removeChild(flag1)
            //（2）通过关系找
            var flag2=document.getElementById("demo")
            var container2=flag2.parentElement
            container2.removeChild(flag2)
    </script>
</body>
</html>

结果：