实例1、
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>
<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"
}
}