/* ..  */ #这是多行注释

//          #这是单行注释

#JavaScript是一种脚本语言，是一种动态类型、弱类型

#JavaScript通常是用来操作HTML语言的 ：HTML骨架（页面结构），css样式（元素大小、颜色、位置、隐藏或显示等），js是行为（部分动画效果、页面与用户交互等）

#js标签写在哪

#1、script标签里面；

#2、卸载外部.js后缀文件里面，通过script标签引入（script src="外部js文件"）;注意：在引入js文件里面的script里面，一定不能在写js代码

#3、写在标签里面（<div onclick="alert(1)"></div>）;标签里面写js代码一般情况下不推荐

#script标签的位置

#head或者body里面 ； 要注意是否需要加上window.onload=function() (表示最后再执行) ； 如果没说什么特殊的要求，一般script标签放在body结束之前

alert(1);#弹窗效果，可用来调试代码

console.log(1)；#打印到控制台，用来调试代码

#定义变量规则： var let const

#1、不能使用关键字或者保留字（结束里面已经赋予其有意义的词，留着备用的词）

#2、只能包含数字、字母、$ 、_ ，并且不能以数字开头

#3、颜色保区分大小写

#4、尽量见名知意

#用","号可以是一个var定义多个变量，var变量并不要求立马赋值

#js如何操作页面呢

#要操作页面，就是操作标签，js要操作标签，就要先获取标签

#如何获取独有标签

document.title

document.head

document.body

document.title="我要改标题"

document.body.innerHEML="<b>我很好啊</b>"#修改body里面的内容必须加上innerHTML，这个=号表示覆盖

document.body.innerHEML=document.body.innerHEML+"<b>我很好啊</b>"#+号表示添加

#可以简写为document.body.innerHEML+="<b>我很好啊</b>"

document.body.innerText="<b>我很好啊</b>"#如果加上innerText的话，会把文本内所有内容全部修改（出现的是"<b>我很好啊</b>"）

#其他元素的获取，id前面必须是document，其他的漆面可以是某个元素（id document），但不能是集合

document.getElementById() #通过id获取元素

.getElementsByClassName()  #通过ClassName获取元素

.getElementsByTagName()     #通过标签名获取元素

.querySelector()

.querySelectorAll() #通过选择器的写法获取元素

document.getElementsByName() #通过name值回去元素

#获取id

var oBox = document.getElementById("box") #获取上面id名为box的id

oBox.innerHTML="<b>ahhh</b>"

#获取classname

var oBox1 = document.getElementsByClassName("box")

oBox1.innerHTML="hahahaha"#没有下标是显示不出来的

#获取一堆原色的集合，设置操作的时候要通过下标（索引、序号）拿到对于的某一个

oBox[0].innerHTML="hahahah"

#获取标签名

var oP = document.getElementsByTagName("p")

alert(oP.length);#获取长度

oP[0].innerHTML+="<b>ahh</b>" #给的第一个元素添加ahh，跟上面的classname一样需要添加下标

#通过选择器获取元素

var oI = document.querySelctor("#box1 .warp2 .warp3");

oI.innerHTML+=""#如果是多个元素，自动获取的就是第一个

var oI1=document.querySelectorAll("#box i");

oI1[0].innerHTML+=""#同样要加下标

<div id="box">

    <p></p>

    <p></p>

    <p></p>

    <p></p>

</div>

<p>0001</p>

<p>0002</p>

<p>0003</p>

<p>0004</p>

<script>

    var oP = document.getElementsByTagName("p");

    alert(oP.length);#所有的p，8个

    var oBox = document.getElementById("box"),

        oP1=oBox.getElenmentByTagName("p");

    alert(oP1.length);#id下面的p，4个

    var oP2=document.querySelectorAll("#box p");

    alert(oP2.length);#id下面的p，4个

</script>

document.body.innerHTML+=""

#也可以用这种形式

document.write("")

write

#在文档流关闭之前，给body部分新增内容

#在文档流关闭之后，修改整个HTML的内容，用window.onload（）写

#事件

#就是js捕捉用户的操作，并作出正确的响应。在事件函数里面，有一个关键字this，代表当前触发事件的这个元素事件，用户的操作

#元素.事件=函数

#鼠标事件：左键单击 onclick ；左键双击 ondblclick ； 鼠标移入 onmouseover/onmouseenter ；鼠标移出 onmouseout/onmouseleave

<div id = "box"></div>

<script>

    var oBox=document.getElementById("box")

    oBox.onclick=function(){

      console.log("我被点击了") ；

      oBox.innerHTML+="我被点击了"；

      this.innerHTML+="我被点击了"；#用这个this就是相当于上面的oBox

    }

#js操作元素的标签属性

#规范的标签属性：.符号直接操作（可读可写）

#不规范（自定义）的标签属性

#获取.getAttribute ; 设置 .setAttribute ; 移除 .removeAttribute 

#注意：

#所有的路径、颜色、获取的结果不一定是你写的内容

#通过id获取的元素赋值给变量后，假设修改了id，这个变量还是这个元素

#自定义标签属性的操作方式，同样可以操作符合规范的标签属性

<a href="http://www.baidu.com" targert="_blank" class="box" id ="box" tz="xp">去百度</a>

<script>

    var oA=document.getElementById("box");

    alert(oA.target);#可读性

    oA.id="box1";#修改id，当然一般没人去改id，一般操作class

    oA.href="http://www.taobao.com";#修改路径

    oA.tz="hahh" #无效，不规范的不能用.操作来修改

    alert(oA.getAttribute("tz"));#获取tz

    alert(oA.className);#如果要获取class必须要使用className

    oA.setAttribute("target","_self");#修改tz属性

    oA.setAttribute("py","web");#原来没有的属性也可以添加上

    oA.removeAttribute("class");#移除属性

</script>

<div id ="box" class="box"></div>

<script>

    var oBox=document.getElementById("box")

    oBox.style.height="300px";

    oBox.style.weight="300px";

    oBox.style.background="red";#修改样式

    oBox.style.cssText="width:300px;height:300px;background:red";#可以用这种方法来修改多个属性

    oBox.style.marginLift="100px";#如果书写复合属性要注意驼峰命名（去掉-号，-号后面的第一个单词大写）

    oBox.style["margin-top"]="100px";#也可以用这种方法

</script>