html5之js学习

js:主要给页面中的元素设置一些动态事件,让用户和界面之间进行交互
JS的基础语法:
//js是一门弱语言,java是一门强语言
// 强弱语言的区别:1,java中必须要明确变量的数据类型而js中所有的数据类型都是var,具体数据类型由系统自动识别
//2,java中有具体的作用域,而js中只有function中有作用域
console.log(“我是js的外联式引入”);
//变量的本质就是一块内存空间,js声明变量都用var
// js中变量的基本数据类型有:Number(数字),String(字符串),boolean类型(只有true和false两种类型),null类型(空类型),undefined(未定义类型)
//java在声明变量的时候需要将数据类型具体化,因为java是强类型的语言,而js统一数据类型为var,因为js是弱语言
//变量名的要求:数字,字母,下划线和$的组合,不能以数字开头,不能是系统关键字和保留字,严格区分大小写,使用驼峰命名法

var a = 10;
var b = "123";
var c = '456';
var d = true;
var e = false;
var f = null;
var g;//未定义类型:undefined
//转换成boolean类型的值:1.数字类型转换成boolean类型:非0为真 2.字符串类型转换boolean类型:非空为真
console.log(Boolean(1));
//隐式转换:1.加号两边如果有一个字符串,就是拼接字符串 2.如果是其它类型的数据,就是转换为数值计算
var a = 5+'123';
//随机数的生成
Math.random();//生成[0 1)之间的随机数
// 生成某个范围中的随机整数parseInt(Math.random()*(最大值-最小值+1)+最小值);
console.log(parseInt(Math.random()*(50-40+1)+40));

JS中的函数:

function test(a,b)
{
   console.log(a+b);
   return a*b;
}
//匿名函数:1,将匿名函数保存到一个变量中,
var fn = function () {
  console.log('我是一个匿名函数');
};
fn();
//匿名函数:2.直接在匿名函数后面加上()直接调用,立即执行,这种情况需要将整个匿名函数用()括起来
(function () {
    console.log("我是立即执行的匿名函数");
})();
(function () {
    console.log("我是立即执行的匿名函数2");
}());
fn();
// JS里面的变量只分为函数内部的局部变量和函数外面的全局变量,之所以使用匿名变量就是为了使用函数的作用域
function f1()
{
  var  a = 10;
  function f2()
  {
    console.log(a);
    var  a = 20;
    console.log(a);
  }
}
f1();

JS中的数组:var ay =[1,2,3,4,5];,JS中的数组的长度是可以改变的
//数组的遍历
for(var i=0;i<ay.length;i++)
{
console.log(ay[i]);
}
ay[5]="6";//虽然数组的只有5个元素,但是ay[5]会给数组添加一个元素

DOM操作:
js中获得页面的元素方法有:
1.document.getElementsByClassName()
2.document.getElementsByTagName()
3.document.getElementsById()

//获取div
    var div = document.getElementsByTagName('div')[0];
    //修改页面元素的样式
    //1.JS中均采用驼峰命名法
    //2.JS操作的均是 行间式
    div.style.backgroundColor = "green";
    //获取页面元素的样式:只能获取行间式样式,且带有单位
    var width = div.style.width;
    //只能获取行间式中的元素样式或计算后的样式(可以获取所有样式包含特殊伪类),且带有单位,但是该方法是只读方法
    var width2 = getComputedStyle(div,null).width;
    console.log(width2);
    //获取计算后样式并修改:
    div.style.width = parseInt(width) * 2 + "px";
    div.style.borderRadius = "50%";
    //修改页面元素内容:
    div.innerText = "修改内容";
    div.innerHTML = "<i>再次修改</i>";
    //outterText,
    //给div添加一个全局属性
    div.setAttribute("name","div");
    //给div添加一个标识
    div.index = 10;
    var sup = document.querySelector(".sup");
    //获取父级--永远是一个元素
    // var body = docment.querySelector("body");
    var body = sup.parentElement;
    console.log(body);
    //获取子级元素--永远是个集合
    var children = sup.children;
    console.log(children);
    var sub2 = children[1];
    //获取a标签
    var a = sub2.parentElement.parentElement.children[1].children[0];
    // nextElementSibling:下一个兄弟元素
    // previousElementSibling:下一个兄弟元素
    //parentElement:父级元素
    console.log(a);
    //删除a元素
    // a.remove();//自身删除
    a.parentElement.removeChild(a);//父级删除子级元素
    //获取目标页面元素
    var wrap = document.getElementsByClassName("wrap")[0];
    //创建DOM节点
    var redDiv = document.createElement("div");
    //设置节点相关属性
    redDiv.style.width = "200px";
    redDiv.style.height = "200px";
    redDiv.style.backgroundColor = "red";
    //将节点添加到目标页面元素上
    wrap.appendChild(redDiv);
    var yellowDiv = document.createElement("div");
    //通过类名整体操作样式
    yellowDiv.className = "yellowDiv";
    //默认添加到页面元素的最下面
    // wrap.appendChild(yellowDiv);
    //将yellowDiv添加到redDiv之前
    wrap.insertBefore(yellowDiv,redDiv);

JS中的事件主要有:鼠标事件和键盘事件

 redDiv.onclick = function () {
        console.log("单击事件");
    }
    redDiv.ondblclick = function () {
        console.log("双击事件")
    }
    redDiv.onmouseover = function () {
        console.log("鼠标移入事件")
    }
    redDiv.onmousedown = function () {
        console.log("鼠标按下事件")
    }
    redDiv.onmouseup = function () {
        console.log("鼠标抬起事件")
    }
    redDiv.oncontextmenu = function () {
        console.log("鼠标右击事件")
        //阻止鼠标右击的默认事件
        return false;
    }
    redDiv.onmouseout = function () {
        console.log("鼠标移出事件")
    }
    //over和out会在鼠标从父级元素移到子级元素的时候,触发一次移出和移入
    // leave和enter从父级移到子级不会触发(凡是在父级元素的范围内就不会触发,只有在鼠标移出父级范围才会触发)
    redDiv.onmouseleave = function () {
        console.log("鼠标移出事件")
    }
    redDiv.onmouseenter = function () {
        console.log("鼠标移入事件")
    }
    redDiv.onmousemove = function () {
        console.log("鼠标移动的时候触发")
    }
    //键盘事件:只能绑定给一些特定的元素
    //绑定给document
    // document.onkeydown = function () {
    //     console.log("down键盘按下")
    // }
    // document.onkeypress = function () {
    //     console.log("press键盘按下")
    // }
    // document.onkeyup = function () {
    //     console.log("键盘抬起事件")
    // }
    //表单中的一些事件:
    uName.onchange = function () {
        console.log("change:内容发生改变之后触发,当内容输入完毕后才触发")
    }
    uName.oninput = function () {
        console.log("input:内容发生改变后触发,实时监听")
    }
    uName.onfocus = function () {
        console.log("聚焦")
    }
    uName.onblur = function () {
        console.log("失焦")
    }
    //给整个form表单绑定事件
    reg.onsubmit = function () {
        console.log("提交表单时触发的方法")
        //阻止提交按钮的默认事件
        return false;
    }
    reg.onreset = function () {
        console.log("重置表单时触发的方法")
    }
    //window窗口的事件
    window.onresize = function () {
        console.log("当窗口的尺寸发生变化的时候触发")
    }
    window.onscroll = function () {
        console.log("当窗口内容滚动的时候触发")
    }
    //img.onload(图片加载完毕后触发的方法)
    window.onload = function () {
        console.log("窗口加载完毕后触发")
    }

事件对象:
scrollLeft：设置或获取当前左滚的距离，即左卷的距离；
scrollTop：设置或获取当前上滚的距离，即上卷的距离；
scrollHeight：获取对象可滚动的总高度；
scrollWidth：获取对象可滚动的总宽度；
clientHeight:内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框，也不包含滚动条等边线，会随窗口的显示大小改变)

clientLeft,clientTop: 这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.
返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离，可以理解为边框的长度
offsetLeft：获取对象左侧与定位父级之间的距离
offsetTop：获取对象上侧与定位父级之间的距离
PS：获取对象到父级的距离取决于最近的定位父级
offsetWidth：获取元素自身的宽度（包含边框）
offsetHeight：获取元素自身的高度（包含边框）

offsetLeft：获取对象左侧与定位父级之间的距离 
offsetTop：获取对象上侧与定位父级之间的距离 
PS：获取对象到父级的距离取决于最近的定位父级 
offsetWidth：获取元素自身的宽度（包含边框） 
offsetHeight：获取元素自身的高度（包含边框）
 document.onkeydown = function (ev) {
        //keyCode标识了触发事件的是哪一个按键
        console.log(ev.keyCode);
        if  (ev.keyCode==65)
        {
            console.log("按了a键,发射");
        }
        if (ev.keyCode==65&&ev.metaKey==true)
        {
            console.log("按了组合键:command+a");
        }
    }
    //press的事件对象区分大小写,但是不支持特殊的按键,keydown的事件对象不支持大小写,但是支持特殊按钮
    document.onkeypress = function (ev) {
        console.log("press:"+ev.keyCode);
    }

JS中的定时器有两种:
1.一次性的定时器:setTimeout();在一定时间后执行一次定时器中的函数
2.//循环定时器:每隔一段时间都会执行一次定时器中的函数 setInterval()
清除定时器的方法也是有两种:1.clearTimeout();2.clearInterval()

//循环定时器
var timer  = setInterval(function () {
        console.log("执行了"+a++);
    },2000);
    //一次性定时器
    setTimeout(function () {
        //清除定时器
        clearTimeout(timer);
    },10000);

JS中的动画效果:

  /*动画名称*/
            animation-name: run;
            /*动画执行的时长*/
            animation-duration:1s;
            animation-timing-function:linear;
            /*动画的延迟时长*/
            /*animation-delay: 1s;*/
            /*动画执行的次数 infinite:无数次*/
            animation-iteration-count: 1;
            /*动画的方向,默认是normal,reverse:反向执行,alternate:奇数次正向执行,偶数次反向执行,看到的效果就是来回摆动*/
            /*alternate-reverse:效果和alternate刚好相反*/
            animation-direction:normal;
            /*forwards:动画结束的时候,让元素不再回到初始的位置而是停留在当前位置*/
            /*backwards:动画结束之后,让元素回到初始的位置;动画延迟期间,元素的位置会变成动画的起始位置*/
            /*both:有上面两种的特点:动画结束停留在当前位置,动画延迟期间,元素的位置会变到动画的起始位置*/
            animation-fill-mode: forwards;
            //自定义动画
                    @keyframes run {
           from
            {
          }
            to
            {
            }

JS中的ajax异步请求数据:

 var request = new XMLHttpRequest()
 //第一个参数是请求数据的方式:get或者post;
//第二个参数是url:请求数据的路径
 //第三个参数true/false:请求数据是否为异步请求
  request.open("get","file:///Applications/XAMPP/xamppfiles/htdocs/ajax/test.json",true)
    request.send()
    //请求事件
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status==200)
        {
            console.log(request.responseText);
        }
    }