1. JS代码写在哪里：script里面；写在外部.js后缀文件里面，通过script标签引入；写在标签里面
注意：在引入js文件的script里面，一定不能再写js代码；
标签里面写js代码一般情况下不推荐（在某些插件里面，可能全部都是通过这种方式引入）
script标签的放置位置：
body或者head里面，只要注意一点：如果script里面涉及到操作后面的元素，而script又非得放前面的话，需要加上：window.onload=function(){//这里再写代码};
如果说没什么特别的要求，一般script标签放在Body结束之前。
2.写JS代码需要注意什么：
a.严格区分大小写（引号里面是没有这个规则）；b.语句字符都是半角字符；（字符里面可以使用任意字符）；c.某些完整语句后面要写分号；d.代码要缩进，缩进要对齐。
3 系统的三种不同类型弹窗
<script type="text/javascript">
confirm("你确定吗？");// 确认弹窗;
alert("你确定吗？");// 弹出弹窗;
prompt("你确定吗？");// 输入弹窗;
</script>4.获取元素以及修改内容
a.获取元素方式
独有标签可以直接获取到，例如：document.body ; document.title
body里面的结构标签可以用过ID名、class名、标签名、name名、选择器获取
document.getElementById()
obj.getElementsByClassName()（通过class名获取，不兼容IE8及以下）
obj.getElementsByTagName()
obj.getElementsByName()
obj.querySelector()（通过选择器获取，不兼容IE7及以下）
obj.querySelectorAll()（通过选择器获取，不兼容IE7及以下）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="box"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div id="alisa">
<p class="kk">
<i class="fly"></i>
</p>
<i class="fly"></i>
</div>
<p></p>
<p></p>
<script type="text/javascript">
//document.title="修改页面title信息";
//document.body.innerHTML="<p>修改别的标签的内容，得用innerHTML或者innerText插入内容</p>";
//document.body.innerText="<p>innerText与innerHTML的区别是：innerText无法解析p标签</p>";
//box.innerHTML="因为id是唯一的，所以可以直接添加内容.(不推荐！)";
document.getElementById("box").innerHTML="推荐使用！";
//document.getElementsByClassName("wrap").innerHTML="因为class有很多个，所以element需要+s。获取的是确切的某个元素，可以直接操作这个元素";
document.getElementsByClassName("wrap")[0].innerHTML="获取的是一堆元素的集合，设置内容时要通过下标（索引/序号）拿到对应的某一个再用";
document.getElementsByClassName("wrap")[1].innerHTML="获取第二个类";
//alert(document.getElementsByClassName("wrap").length);
document.getElementsByTagName("p")[0].innerHTML="通过标签名获取";
document.querySelector("#alisa .kk .fly").innerHTML="通过选择器获取，获取第一个对应的元素";
document.querySelectorAll("#alisa .fly")[1].innerHTML="通过选择器获取，获取的是一个集合，该选择器下所有对应的元素";
</script>
</body>
</html>作业：点击一个盒子之后，变成一个a标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<style type="text/css">
#box{width: 100px;height: 20px;background: pink;color: #fff;text-align: center;margin: 0 auto;cursor: pointer;}
a{color: #fff;}
a:hover{color: #fff;;}
</style>
</head>
<body>
<div id="box">点我试试</div>
<script type="text/javascript">
var firstDiv=document.getElementById("box");
firstDiv.onclick=function(){
firstDiv.innerHTML="<a href='#'>潭州首页</a>";
}
</script>
</body>
</html>5.函数+构造函数
默认值+解构赋值，函数的设定与默认值，方法一：
<script>
function fn({title,content}){
console.log(title,content);
}
fn({title:"alisa",content:"123456"})
</script>方法二：
<script>
function fn({title="alisa",content}){
console.log(title,content);
}
fn({content:"123456"})
</script>最新箭头函数写法：去掉function，后面加一个=>
6.onclick事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="my first javascript function";
}
</script>
</head>
<body>
<h1>onclick</h1>
<p id="demo">paragraph</p>
<button type="button" onclick="myFunction()">try it!</button>
</body>
</html> <script>
document.write("新增内容");//文档流关闭之前
window.onload = function(){
document.write("window.onload表示是文档流关闭之后，修改整个HTML页面，原先的内容清空");
}
</script>8.JS里的事件
<body>
<div id="box"></div>
</body>
<script>
//事件：响应用户的操作,元素.事件-函数
//鼠标事件：*左键单击onclick；*左键双击ondbclick；右键单击oncontextmenu；无右键双击。*鼠标移入onmouseover/onmouseenter;*鼠标移出:onmouseout/onmouseleave。鼠标按下onmousedown。鼠标移动onmousemove。鼠标抬起onmouseup。鼠标滚轮onmousewheel
//键盘事件：按键按下onkeydown,onkeypress;按键抬起onkeyup
//表单事件：获得焦点onfocus：失去焦点onblur;内容改变onchange...
//系统事件：加载完成onload;内容滚动onscroll;窗口改变大小onresize
//函数：有名函数;匿名函数
//function hanshu(){alert("有名函数");};
//hanshu();//有名函数可以加括号自执行，执行的位置可以再定义的前面
//document.getElementById("box").onclick = hanshu;//有名函数可以把名字放到事件后，充当一个事件函数，事件触发的时候执行
document.getElementById("box").onclick = function(){alert("匿名函数");};
</script>9.简单认识
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<!-- <script type="text/javascript" src="./js/bootstrap.min.js"></script> -->
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<style type="text/css">
#box{width: 100px;height: 100px;background: pink;margin: 50px auto;}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
document.getElementById("box").onclick = function(){
//在事件函数内，有一个关键字this，代表着当前触发事件的这个元素
this.innerHTML="在盒子内添加文字！"
};
</script>
</html>10.定义变量
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<!-- <script type="text/javascript" src="./js/bootstrap.min.js"></script> -->
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<style type="text/css">
#box{width: 100px;height: 100px;background: pink;margin: 50px auto;}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
//定义变量:规则-1.不能使用关键字或者保留字（js里面已经赋予它有意义的词，或者留着备用的词）2.只能包含数字/字母/_/$，并且不能以数字开头3.严格区分大小写4.尽量见名知意
var bianliang = document.getElementById('box');
//添加鼠标点击事件
bianliang.onclick=function(){
this.innerHTML="鼠标点击！";
}
//添加鼠标移入事件
bianliang.onmouseenter=function(){
this.innerHTML="鼠标移入！";
}
//添加鼠标移出事件
bianliang.onmouseleave=function(){
this.innerHTML="鼠标移出！";
}
// var x=1;var y=2;var z=3;
// alert(x+y+z);
//用，可以让一个var定义多个变量
//Var变量时并不要求立马赋值
var x=10,y=20,z=30;
alert(x+y+z);
</script>
</html>11.prompt弹窗，document.write()
<script>
var val = prompt("请输入您的昵称！")//prompt("")可以出现弹窗
document.write("<h1>"+ val +"</h1>");//利用+号拼接，实现将弹窗内输入的文字在页面输出
document.write("<h2>"+ val +"</h2>");
document.write("<h3>"+ val +"</h3>");
</script>12.拼接
<script>
//+的拼接,+号两边一旦有字符串（引号引起来的一坨），那么+号就不再是数学运算了，而是拼接，最终结果是字符串
var x="10",y="20";
alert(x+y);
</script>13.作业
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
<style type="text/css">
#box1,#box2{width: 150px;height: 25px;line-height: 25px;background: pink;color: #fff;margin: 50px auto;text-align: center;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
<script>
var obox1=document.getElementById("box1"),obox2=document.getElementById("box2");
obox1.onclick=function(){
this.innerHTML="我被点击了！";
obox2.innerHTML="#box1被点击了！";
};
obox2.onclick=function(){
this.innerHTML="我被点击了！";
obox1.innerHTML="#box2被点击了！";
};
obox1.onmouseenter=function(){
this.innerHTML="我被移入了！";
obox2.innerHTML="#box1被移入了！";
}
obox2.onmouseenter=function(){
this.innerHTML="我被移入了！";
obox1.innerHTML="#box2被移入了！";
}
</script>
</html>14.js操作标签属性和自定义属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
<style type="text/css">
#box1,#box2{width: 150px;height: 25px;line-height: 25px;background: pink;color: #fff;margin: 50px auto;text-align: center;}
</style>
</head>
<body>
<a href="https://www.baidu.com/" id="box" afei="123">百度</a>
</body>
<script>
/*
js操作元素的标签属性：
符合规范的标签属性：
. 符号直接操作（可读可写）
不规范（自定义）的标签属性：
获取：.getAttribute()
设置：.setAttribute()
移除：.removeAttribute()
注意：
所有的 路径/颜色 获取的结果不一定是你写的内容
通过ID获取的元素赋值给变量后，假设修改了ID，这个变量还是表示这个元素
自定义标签属性的操作方式，同样可以操作符合规范的标签属性
*/
var abox=document.getElementById("box");
alert(abox.getAttribute("afei"));
</script>
</html>15.不规范的属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
<style type="text/css">
#box1,#box2{width: 150px;height: 25px;line-height: 25px;background: pink;color: #fff;margin: 50px auto;text-align: center;}
</style>
</head>
<body>
<a href="https://www.baidu.com/" id="box" afei="123">百度</a>
</body>
<script>
// 当元素.操作属性时，假设该属性名称是，规范的标签属性，那么这个操作是针对于标签属性的
//假设该属性名称不是，规范的标签属性，那么这个操作就和标签属性没有任何关系
//访问一个从来没有定义过的变量的时候，会报错
//访问一个对象从来没有设定过的自定义属性的时候，不会报错，值是undefined
var obox=document.getElementById("box");
obox.afei="456";//s对象的自定义属性
alert(obox.afei);
//当var没有放在某个函数内部的时候，我们可以理解为window.后面的变量称之为全局变量 ------ var x=10等价于window.x=10;
//当var处于函数内部的时候，不能理解为window.，后面的变量称之为局部变量
</script>
</html>16.js基础数据类型
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
</head>
<body>
<div id="box"></div>
</body>
<script>
//数据类型：
//var a=10;//number数字
//var a = "20";//string字符串
//var a = true;//boolean布尔值
//var a = document;//object对象
//var a = document.getElementById("box");//object对象
//var a = [1,2,3,"45"];//object对象
//var a=[];//object对象
//var a= null;//object对象,在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型
//function a(){};//function对象
//var a;//undefined未定义
alert( typeof a);
</script>
</html>17.操作样式
控制元素的样式：
外部样式表：js不能操作外部文件
内部样式表：js可以操作，很麻烦，所以不常用。优先级高。
行内样式标签属性：优先级最高。大部分情况下，Js都是通过操作行内样式达到修改样式的目的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
<style type="text/css" id="style">
#box{width:200px;height:200px;background:red;}/*外部样式表*/
</style>
</head>
<body>
<div id="box" style="background: green;height: 100px;width: 100px;"></div><!-- 行内样式标签属性 -->
</body>
<script>
//var ostyle = document.getElementById("style");
//ostyle.innerHTML += "#box{width:100px;height:100px;background:pink;}";// 内部样式表
</script>
</html>18.操作样式另外的途径
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
</head>
<body>
<div id="box"></div><!-- 行内样式标签属性 -->
</body>
<script>
// 操作复合属性时，要注意用驼峰写法（去掉-号，-后面的第一个单词大写）
var oBox = document.getElementById("box");
oBox.style.width = "200px";
oBox.style.height = "200px";
oBox.style.backgroundColor = "pink";
</script>
</html>19.作业：01-作业-QQ说说发表功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="潭州教育-阿飞老师">
<title>Title</title>
<style>
*{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
li{ list-style-type: none;}
#box{
position: relative;
width: 500px;
height: 140px;
margin: 50px auto;
background: #ccc;
border-radius: 5px;
padding-top: 10px;
}
#txt{
display: block;
width: 480px;
height: 80px;
margin: 0 auto;
resize: none;
border-radius: 5px;
}
#box .img{
position: relative;
width:40px;
height: 40px;
border: 1px solid #fff;
margin: 7px 0 0 10px;
cursor: pointer;
}
#box .img img{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#box .btn{
position: absolute;
bottom:10px;
right: 10px;
width: 80px;
height: 30px;
background: #f60;
color: #fff;
font-size: 12px;
line-height:30px;
text-align: center;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
#list{
width: 500px;
margin: 50px auto;
}
#list ul li {
overflow: hidden;
border-bottom: 1px solid #eee;
padding: 5px 0;
}
#list ul li img{
float: left;
width: 40px;
height: 40px;
}
#list ul li p{
float: right;
width: 440px;
font-size: 12px;
text-indent: 2em;
}
</style>
</head>
<body>
<div id="box">
<textarea id="txt"></textarea>
<div class="img">
<img src=images/tx1.jpg style="display: block" alt="">
<img src="images/tx3.jpg" alt="">
</div>
<div class="btn">发表</div>
</div>
<div id="list">
<ul>
<!--<li>
<img src="images/tx1.jpg" alt="">
<p>内容</p>
</li>
<li>
<img src="images/tx3.jpg" alt="">
<p>内容</p>
</li>
<li>
<img src="images/tx1.jpg" alt="">
<p>内容</p>
</li>-->
</ul>
</div>
<script>
var oBox = document.getElementById("box"),
aImg = oBox.querySelectorAll(".img img"),
oBtn = oBox.querySelector(".btn"),
oUl = document.querySelector("#list ul"),
oTxt = document.getElementById("txt"),
src = "images/tx1.jpg";
//点击第 1 个img的时候，让第 2 个显示，自己隐藏
aImg[0].onclick = function () {
aImg[1].style.display = "block";
this.style.display = "none";
src = aImg[1].src;
};
//点击第 2 个img的时候，让第 1 个显示，自己隐藏
aImg[1].onclick = function () {
aImg[0].style.display = "block";
this.style.display = "none";
src = aImg[0].src;
};
//点击发表，往ul里面加内容
oBtn.onclick = function () {
var val = oTxt.value; //获取textarea的内容
//if ( val ){
oUl.innerHTML += "<li><img src='"+src+"'><p>"+val+"</p></li>";
oTxt.value = "";//清空textarea的内容
//}
};
</script>
</body>
</html>
20.简单认识数组
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script>
//数组
/* var shuzu=[
50,"shuzu",[7,8,9]
];
alert(shuzu[2][1]);//下标 / 序号 / 索引*/
/* json的属性可以加引号，也可以不加引号
在用json来传输数据的时候，属性必须加双引号，并且值一般都是字符串*/
var shuzu={
name:"alisa",// 属性可以加""引号，也可以不加，例如此处也可以是"name"
age:23,
sex:'女',
};
alert(shuzu.age);
</script>
</body>
</html>21.判断语句
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
</head>
<body>
<div id="box"></div>
</body>
<script>
/* 条件==>布尔值;判断符：> < >= <= == != === !==;==只判断值是否一样，===不仅仅判断值，还判断类型是否一样*/
/* if (3<5) {
//这里的代码只有当条件为true的时候才执行
}else{
//这里的代码只有当条件为false的时候才执行
}*/
//第二种写法
var x = 20;
if (x>60) {
alert("x大于60");
}else if (x>40) {
alert("x大于40");
}else if (x>10) {
alert("x大于10");
}
/*当if的条件，运算完后不是布尔值的时候，会被强制性的转换为布尔值。
***哪些值，在转换为布尔值的时候为false(数字除了0，其他都为真)
* 0 (number)
* false (boolean)
* "" (string)
* null (object/null)
* undefined (undefined)
* NaN (number)
在if里面，能用布尔值做判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间
在两个值比较的时候，能用三等（===）判断的时候，就用三等判断
*/
</script>
</html>22.if的简写方式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
</head>
<body>
<div id="box"></div>
</body>
<script>
/* */
var x;
//当真语句只有一行的时候，可以去掉大括号，还可以直接写在条件（）后面
/*if (3<5) {
x=10;
}*/
//if (3<5) x=10;
//真语句一行，假语句一行，可以采用三目运算写法
/*if (5<4) {
x=10;
}else{
x=20;
}*/
//5<4?x=10:x=20;//条件？真语句:假语句；
//当三目的真假语句都是给同一个变量赋值的时候，可以更进一步简写
x=5<4?10:20//条件5<4为真时，结果是10，条件为假时，结果为20
</script>
</html>23.switch
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
</head>
<body>
<div id="box"></div>
</body>
<script>
var name = "alisa";
/*if(name==="alisa"){
alert(name+"超级美")
}else if(name === "ACR"){
alert( name +"超级漂亮！");
}else if(name === "小粉红"){
alert( name + "超级可爱");
}else if(name === "小仙女"){
alert( name + "巴啦啦小魔仙");
}else{
alert("变身！");
}*/
//全等
switch ( name ){
case "alisa":
alert( name + "超级美");
break;
case "ACR":
alert( name + "超级漂亮！" );
break;
case "小粉红":
alert( name + "超级可爱" );
break;
case "小仙女":
alert( name + "巴啦啦小魔仙" );
break;
default:
alert( "变身！" );
break;
}
</script>
</html>24.图片选项卡切换