通过三个代码实例，教你快速了解js（上）-CSDN博客

<!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>
    <link rel="stylesheet" href="index.js">
    <style>
        .demo {
            width: 200px;
            height: 200px;
            background: green;
            transition: all 6s ease;
            transform: rotate(720deg);
        }
    </style>

</head>

<body>

    <div id="zy">aaaa</div>

    <div id="qcby">bbbb</div>

    <script src="index.js">
    </script>

</body>

</html>

index.js 代码

js修改css样式

第一步：获取要修改css样式的目标元素 var obj=document.getElementById()
第二步：修改样式 obj.style.样式属性 = 样式值

// 获取ID叫zy的元素
// var obj = document.getElementById("zy")

//var obj = document.getElementById("zy")
//var qcby = document.getElementById("qcby")

一、函数使用的两个层次

1、作为函数使用

（直接函数调用）函数名+() myFun()

2、作为值来使用

2.1、作为函数源代码使用

函数名 myFun

2.2、作为函数返回值使用

函数名+()

主题：交互方式

//1、直接到html上给onclick等属性赋值 js逻辑   <div id="zy" onclick="console.log('123');alert('jl')">qcby</div>
//2、把js逻辑封装成函数，通过html上给onclick等属性赋值 函数调用  <div id="zy" onclick="myFun">qcby</div>
//3、把js逻辑封装成函数，通过html对应的dom对象的onclick等属性赋值 函数
//obj.onclick = myFun
//qcby.onclick = myFun
//function myFun() {
//    obj.style.width = "100px"
//    obj.style.height = "100px"
//    obj.style.background = "red"
//}

函数(方法)定义

本质：把逻辑封装，到达解耦的目的

//function myFun() {
//    console.log("123")
//    alert('jl')
//}

函数调用

本质：把函数执行 myFun()

//console.log(document)
//console.dir(document)    以对象的形式打印
//document.onmouseout = function() {
//    var c = 10
//    alert(c)
//}

// 点击页面变换背景颜色
//function changeBg() {
//    var bg = "";
//    for (var i = 0; i < 6; i++) {
//        bg += Math.round(Math.random() * 9)
//    }
//    document.body.style.backgroundColor = "#" + bg;
//}
//document.onclick = changeBg;

匿名函数

定义 function() /中间无空格,然后作为值赋给变量

//var f = function() {
//    obj.style.width = "100px"
//    obj.style.height = "100px"
//    obj.style.background = "red"
//}

//obj.onclick = function() {
//    obj.style.width = "100px"
//    obj.style.height = "100px"
//    obj.style.background = "red"
//}

二、变量类型

1、基本类型

// 1、字符串 var a="aaa"                    单引号双引号都可"" ''
// 2、数字类型 var a=9.6
// 3、布尔类型 var a=true  （fales）         真假
// 4、undefined类型  var a ;  alert(a)      只声明但是没有赋值
// 5、null                                  涉及一个量，但这个量本身不存在

2、复合类型

// 1、数组[]  var arr= [6,"bc",true,undefined,["efg",8]]    / arr[0]第一个元素
// 2、对象{}  console.log(person.name) /访问person的name
//var person = {
//    name: "李",
//    age: 40,
//    children: [{
//        name: "王",
//        age: 15
//    }, {
//        name: "张",
//        age: 18
//    }]
//}
//console.log(person)

变量的使用方式


//
// 方式一、字面量定义变量类型
//var a = 5
//var b = "zy"
//var c = [1, 3, 5]
//var d = {}
//var e = function() {
//    console.log("我是个函数")
//}

// 方式二、面向对象定义变量类型
//var a_1 = new Number("5")
//var b_1 = new String("zy")
//var c_1 = new Array("1", "3", "5")
//var d_1 = new Object()
//var e_1 = new Function('console.log("我是个函数")')
//e_1()

//console.log(a_1)
//console.log(b_1 + ",你好")
//console.log(c[0])
//console.log(c_1[0])

//var a = 6
//var b = "6"
//console.log(typeof a)
//console.log(typeof(typeof b == "string"))
// 查看类型 ：typeof(a) 等于typeof a

三、修改样式 (两种方式)

var obj = document.getElementById("zy")
obj.onclick = myFun

第一种方式

obj.style.样式属性 = 样式值

function myFun() {
    obj.style.width = "200px"
    obj.style.height = "200px"
    obj.style.background = "green"
    obj.style.transition = "all 6s ease"
    obj.style.transform = "rotate(720deg)"
}

第二种方式

obj.className = css选择器 demo是在<head> <style>定义的（内部） (内部、外部（.css文件）都可以)

//function myFun() {
//    obj.className = "demo"
//}
//

实例2、

index.html代码

<!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>

    <ul>
        <li>aa01</li>
        <li>aa02</li>
        <li>aa03</li>
        <li>aa04</li>
        <li>aa05</li>
        <li>aa06</li>
        <li>aa07</li>
        <li>aa08</li>
        <li>aa09</li>
    </ul>
    <script src="js/index.js">
    </script>
</body>

</html>

index.js代码

四、dom 操作 - 查增改删

查

// 以id值来寻找元素  getElementById()
// 以class值来寻找元素们  getElementsByClassName()
// 以html元素名称来寻找元素们  getElementsByTagName()
// 以选择器方式获取第一个元素  querySelector()
// 以选择器方式获取所有元素  querySelectorAll()
//var first = document.querySelector("ul li:first-child");
//console.log(first)
//first.onclick = function() {
//    first.style.background = "red"
//}

删

element.removeChild(Node) //移除括号内的节点

改

先获取然后就可以进行操作（改值）

1.获取element.getAttribute(attributeName) //括号传入属性名，返回对应属性的属性

2.设置element.setAttribute(attributeName,attributeValue) //传入属性名及设置的值

增

element.appendChild(Node); //往element内部最后面添加一个节点

elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode

（js修改css,交互，函数,this,for）

点击切换变色

var obj = document.querySelectorAll("ul li")
for (var i = 0; i < obj.length; i++) {
    console.log(i)
    obj[i].onclick = function() {

        //把所有li元素的样式取消
        for (var j = 0; j < obj.length; j++) {
            obj[j].style.background = "none"
            obj[j].style.color = "black"
        }

        //this表示当前调用者
        this.style.background = "red"
        this.style.color = "blue"
    }

}