JS学习笔记

一：定时器
（1）重复执行定时器
setInterval
每隔多长时间执行一次函数 重复执行
setInterval（function(){
…
},时间）//这里时间为毫秒
（2）延迟执行定时器
setTimeout（）
执行多长时间后执行一次
setTimeout（function(){
…要执行的代码
}，时间）//毫秒数
在body里定义一个div

//1:在div里设置一个id方便捕捉

//2：获取div节点
var div=dcoument.getElementByld(“div”);
//3:添加一个点击事件
div.function(){
//延迟定时器
window.setTimeout(function(){
div.innerHTML=“好”;
}，3000)//点击后 三秒显示好
setInterval(fun,1000);
}
//在外面定义一个fun方法
function fun(){
i++;
div.innerHTML=i;
}
（3）停止方法
clearInterval（）；
二：心跳效果
//在头部 定义选择器
.h1{
font-size: 32px;
color: red;
}
.h2{
font-size: 32px; //文本大小
color: yellow;//文本颜色
}
//在身体部

❤

var div=document.getElementById(“div”);
i=1;
setInterval(function(){
div.className=“h”+i;//h是选择器名 i代表数字
i++
if(i==3){//这里如果i=3没有 则返回再次循环
i=1;
}
},100)
三：跳转界面
//跳转到下个页面
window.history.go(1);//这里括号里必须是整数 负数不行
//跳到下个页面
window.history.forword();
//返回上一个页面
window.history.back()
//返回上个页面
window.history.go(-1);
//如果要返回上上个页面
window.history.go(-2);
四：DOM
DOM 文档对象模型
DOM赋予我们可以操作页面的能力
可以创建,插入,修改,删除元素等等

      Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。
      节点:
        html页面中的所有内容的都是节点,而dom就是用来操作节点

        获取节点:
            1.document.getElementById("id值")
                根据元素的id属性值,获取到唯一一个元素节点

            2.主语.getElementsByTagName("元素名")
                根据元素名字获取一组元素
                主语:document|父节点
            3.主语.getEelementsByClassName("class属性值")
                根据与class属性值获取一组元素
            4.getElementsByName()
五：创建节点
	创建节点：createElement()
	参数:元素标签名
    主语:document
    返回值:新节点
     
     插入节点 appendChild()
     追加元素,在父节点中的最后位置追加
     参数:要插入的节点
     主语:父节点
     返回值:追加的节点
     
     插入节点insertBefore(childNode1,ChildNode2)
     参数:
     childNode1 要插入的节点
     ChildNode2 父节点中的指定子节点
     主语:父节点
     返回值:返回第一个参数,要插入的节点
      注意:ChildNode2参数的值为null,undefined,实现的是追加的效果
      div.innerHTML="<p>你是真的钱</p>";//这个innerHTML能识别<p>
      div.innerText="<p>你是真滴钱</p>"//这个不能识别 <p>所以 打印出来的是<p>你是真滴钱</p>
      //让i1的数据 在i2的前面
		document.body.insertBefore（i1,i2）

	六：插入图片标签
	//1.创建图片标签
		var img=document.createElement("img");
       // 2.设置属性  src
       img.setAttribute("src","../img/5c596b7ely1fwh0s8t7boj22lj38wu10.jpg");//获取图片方法
       img.style.width="200px";
        //3.插入到body中
        document.body.appendChild(img);
        var span=document.getElementsByTagName("span")[0];//这里跟索引为0表示这里只有一个span标签
        var div=document.getElementsByTagName("div")[0];
        div.appendChild(span);