js的书写
行内书写
写在标签内部
<button onclick="alert('好好学习')">按钮</button>内嵌式
写在script双标签中
<script>
alert("马上下课咯");
</script>外部
单独创建一个后缀名为js的文件，然后在文件中书写js
使用script中的src属性进行引用
<script src="../js/外部.js"></script>js常用的三种输出语句
alert
浏览器自带的弹窗，有确认按钮，页面上显示的內容，也就是写在小括号里面的內容，有阻断代码的效果
alert('內容')prompt
弹窗，有输入框，有确认取消按钮，页面上显示的內容就是写在小括号里面的內容，也有阻断效果
prompt("请输入你的年龄");console.log
打印语句，在控制台查看，用于给前端程序员做提示
console.log(123);注意
script双标签内部如果有js代码就不能使用src属性引用外部的js（内部js和外部js不可以出现在同一个script双标签上）
行内js可读性差，可维护性差
使用内部js时尽量写在结构的后面，防止js代码拿不到html结构的情况
alert和prompt都有阻断代码效果，后面的代码不会执行
console.log---程序员使用，alert和prompt用来给用户做提示
变量
一个容器，用来存储数据的容器
本质：在内存中申请一块空地用来存放数据
变量声明
通过var关键字来声明一个变量
1、语法：var 变量名 = 变量值
var a = "开始学习js了";
console.log(a);2、语法：var 变量名1，变量名2，变量名3；
变量名1 = 值；
变量名2 = 值；
变量名3 = 值；
一次性声明多个变量，并且分开赋值
var a, b, c;
a = 1;
b = 2;
c = 3;
console.log(a);
console.log(b);
console.log(c);3、一次性声明多个变量，并赋值
语法：var 变量名1 = 值1，变量名2 = 值2；
var a1 = 10,
a2 = 10,
a3 = 30;
console.log(a1);
console.log(a2);
console.log(a3);变量命名规范
由字母、数字、下划线（_）$组成
不能以数字开头（只能以字母、下划线（_）、$开头）
有语义化
尽量使用驼峰命名
小驼峰---第一个单词的首字母小写，后面的单词首字母都是大写
大驼峰---第一个字母都是大写
不可以使用关键字或者保留字命名
操作元素內容
innerHTML
获取：元素.innerHTML
修改：元素.innerHTML = '新的內容'
//1.获取标签
// 在文档中通过id的方式获取到元素
var box = document.getElementById("box");
//2.改变内容
console.log(box.innerHTML); //炒鸡蛋 标签中的內容
//改变标签中的內容
box.innerHTML = "new一个鸡蛋";
console.log(box.innerHTML);innerText
获取：元素.innerText
修改：元素.innerText = '新的內容'
//1.获取标签
var box = document.getElementById("box");
// console.log(box.innerText);
box.innerText = "炒土豆丝";innerHTML和innerText的区别
innerHTML可以识别标签
innerText不能识别标签，将标签当作內容一起渲染出来
box.innerHTML = "<h1>炒土豆丝</h1>";//加大加粗炒土豆丝
box.innerText = "<h1>炒土豆丝</h1>";//<h1>炒土豆丝</h1>解决內容覆盖
如果使用innerHTML或者innerText方法渲染可能会出现新内容将就内容覆盖的问题，那么解决方法就可以利用+=来解决问题
// box.innerHTML = "新内容"; //原来的內容都会被覆盖掉
//解决覆盖问题
box.innerHTML += "炒土豆丝";单标签操作内容
获取：input.value
修改：input.value = '新值'
操作属性
属性分为原有属性和非原有属性
原有属性：标签自带的一些属性
非原有属性：程序员自己添加上的一些属性
原有属性
获取属性：元素.属性名---原有属性
修改属性：元素.属性名 = 新的属性值
var box=document.getElementById('box');
console.log(box.id);//box
console.log(box.className);//div非原有属性
获取非原有属性：
元素.getAttribute('属性名')
<div id="box" class="div" index="111"></div>
<script>
var box = document.getElementById("box");
console.log(box.getAttribute("index"));//111修改非原有属性：
元素.setAttribute('属性名','属性值')
box.setAttribute('a','box');//修改非原有属性操作样式
行内样式
单个修改
获取：元素.style.样式名
修改：元素.style.样式名 = 样式值
var box = document.getElementById("box");
// console.log(box.style.backgroundColor);//;获取样式
box.style.backgroundColor = "green";//修改样式修改多个：批量修改
语法：元素.style.cssText = '样式值'
box.style.cssText = "width:200px;height:200px;background:green;"非行内样式
标准浏览器
window.getcomputeStyle(元素).样式名
非标准浏览器
元素.currentStyle.样式名
注意
复合的样式词需要将短横线删掉后面的单词首字母大写
通过class方式修改样式
//属性
box.className = "box";解决类名覆盖问题
// box.className += " box"
box.className = "div box";
box.className = "";//清空类扩展操作类
语法：元素.classList.add()---添加类
box.classList.add("box");语法：元素.calssLIst.remove(移除的类名)
box.classList.remove("div");//移除一个类语法：元素.calssList.taggle('类名')---切换
获取元素
通过id的方式获取
语法：var div = document.getElementById('id名');
<div id="div">內容</div>
<script>
var div = document.getElementById("div");
</script>通过标签名的方式获取
语法：var div = document.getElementsByTagName("标签名");
//伪数组
var div = document.getElementsByTagName("div");
console.log(div);
div[0].innerHTML = "div";通过类名的方式获取
语法：var box = document.getElementsByClassName("类名");
var box = document.getElementsByClassName("box");
console.log(box);
box[0].innerHTML = "curry";
box[1].innerHTML = "库里";H5新增的两种获取元素的方式
//只能获取符合条件的第一个
// var box =document.querySelector('div')
// var box =document.querySelector('.box')
var box = document.querySelector("#bos");
console.log(box);
//识别选择器
var box = document.querySelector("div ul li");
console.log(box);//获取全部标签
var box = document.querySelectorAll("div");
console.log(box);总结
getElementById querySelector只会获取到一个元素，其他的都是伪数组
getElementById 只可以通过id的方式获取，querySelector可以通过id class 标签名 选择器的方式获取
getElementsByTagName getElementsByClassName querySelectorAll获取到的都是一个集合，伪数组，有长度，有下标
getElementsByTagName：通过标签名的方式获取
getElementsByClassName ：通过类名的方式获取
querySelectorAll：通过id class 标签名 选择器的方式获取
H5新增的两种方式是静态获取，id、class、标签名 这三种是动态获取
//获取body
var body = document.body;
//获取html
var html = document.getElement;流程控制
顺序流程控制语句
分支结构
循环结构
分支结构
单分支
双分支
多分支
单分支
if(条件){
//满足条件后执行代码
}var agr=prompt('输入你的年龄')
if(agr>18){
alert('你成年了！！！')
} 双分支
if(条件){
//满足条件后执行代码
} else{
//不满足条件走的语句
}var agr = prompt("输入你的年龄");
if (agr > 18) {
alert("你成年了！！！");
} else {
alert("回家吃奶吧！！！");
}多分支
if
if(条件){
//满足条件后执行代码
} else if(条件){
//满足条件走的语句
} else if(条件){
//满足条件走的语句
} else{
//以上条件都不满足走的语句
}var agr = prompt("输入你的年龄");
if (agr > 18) {
alert("你成年了！！！");
} else if (age === "18") {
alert("刚刚好");
} else if (age < 10 && age > 5) {
alert("还是太小了");
} else {
alert("这样啊");
}switch
switch(表达式){
case 字符;
//满足条件后执行的代码
break;//跳出循环
case 字符;
//满足条件后执行的代码
break;//跳出循环
case 字符;
//满足条件后执行的代码
break;//跳出循环
default：
//以上条件都不满足
break;
}switch(表达式){
case 字符;
//满足条件后执行的代码
break;//跳出循环
case 字符;
//满足条件后执行的代码
break;//跳出循环
case 字符;
//满足条件后执行的代码
break;//跳出循环
default：
//以上条件都不满足
break;
}switch和if的区别
if和switch判断条件的数据类型不同，if的判断条件数据类型是布尔类型，,如果需要判断的具体数值多,而且符合byte、 short 、int、 char这四种类型,我们尽可能选择switch语句,因为效率高
if elseif 流程语句中可以允许有多个判断条件为true但只会执行第一个判断条件为true的语句体，switch语句中case条件取值是不能重复的
写法上，当if 流程语句中只有一个判断条件的时候语句体的{}可以省略不写，switch语句中只有一个case条件语句体的{}也不能省略，当switch语句有多个case时，每个case后面的break关键字不能省略
三目运算
条件?条件满足：条件不满足var num = 10;
num > 9 ? console.log("大于9") : console.log("小于9");循环语句
for循环语句
for(初始换的变量;表达式;递增递减表达式){
//要循环的內容
}for (var i = 0; i < 10; i++) {
console.log("勇士总冠军");
}for (var i = 0; i < 10; i++) {
console.log("勇士总冠军第" + (i + 1) + "次");
}双重for循环
for (var i = 0; i < 10; i++) {
console.log("我是外层的循环" + i);
for (var j = 0; j < 10; j++) {
console.log("我是内层的循环" + j);
}
}外层循环一次，内层循环走完全部
while循环
while(判断条件){
//循环体
}var num = 0;
while (num < 10) {
console.log(num);
num++;
}do while循环
do{
//循环体
}while(条件判断)var num = 0;
do {
console.log(num);
num++;
} while (num < 10);while和do while的区别
do while不换条件满不满足都会先执行一次循环体
while只有条件满足才会执行循环体
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
