初始HTML(四) JS高级

时间:2019-01-10
本文章向大家介绍初始HTML(四) JS高级,主要包括初始HTML(四) JS高级使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

JavaScript高级

1. BOM对象

Browser Object Model 浏览器对象模型
我们把浏览器抽取成对象模型,可以模拟一些浏览器的功能

1.1 window对象

对话框

<script>
    /*
    * 对话框
    *       1) 警告框:window.alert('消息内容');
    *       2) 确认框;confirm('消息内容');确认按钮 
    *       返回true,取消按钮 返回false
    *       3) 输入框; prompt('消息内容',确认值,);
    *       确认按钮输入值,取消按钮返回null
    *       window 方法和属性,window可以省略不写
    * */
    console.log(confirm("5+4=?"));
    //window.alert("嘿,世界")
   // console.log(prompt("5+4=?"));
</script>

定时器

/*
    * 定时器
    *  1) 复用定时器
    *       var number= setInterval('函数名()',间隔时间);
    *       根据间隔时间,执行指定函数,无限循环,返回值定时器编号
    *       var number= setInterval(函数名,间隔时间);根据间隔时间
    *       执行指定函数,
    *       clearInterval(number);关闭定时器
    *  2) 一次性定时器
    *       var number = setTimeout('函数名()',间隔时间);根据间隔时间
    *       执行指定函数,仅执行一次,返回定时器编号
    *       clearTimeout(number);关闭定时器
    *
    * */

会动的时钟

</head>
<body>
<!--创建一个时钟-->
<h1 id="clock">我是时钟</h1>
<!--制作一个开始的按钮-->
<input type="button" value="开始" onclick="start()"/>
<!--制作一个暂停的按钮-->
<input type="button" value="暂停" onclick="pause()"/>
</body>
<script>
    var timer;
    //开始调用
    function start() {
        //清除上一个计时器
        window.clearInterval(timer);
        //1秒之后开始begin()
        timer= window.setInterval("begin()",1000);
    }
    //
    function begin() {
      //得到现在的时间
        var time = new Date();
        //得到 时钟元素
        var clock = document.getElementById("clock");
        //将时间显示在h1元素
        clock.innerHTML = time.toLocaleString();
    }
    //暂停
    function pause() {
        //清除计时器
        window.clearInterval(timer);
    }
</script>

1.2 location对象

<input type="button" value="跳转到百度" onclick="jump()">;
</body>
<script>
    /*
    *  location对象
    *   1) location.href 当前窗口地址栏的属性值
    *   2) location.reload() 页面刷新
    * */
    function jump() {
        location.href="http://www.baidu.com";
    }

</script>

页面跳转

<h1 id="jump">开始跳转</h1>
</body>
<script>
    var num=5;
    document.getElementById("jump").onclick=function () {
        setInterval("time()",1000);
    }
   function  time(){
        if(num!=0){
            document.getElementById("jump").innerText=num--;
        }else {
            location.href="http://localhost:63342/myWeb/day03/c_%E4%BA%8B%E4%BB%B6/" +
                "b_%E8%BD%AE%E7%95%AA.html?_ijt=3sjhop04275fldr7ofrgj96lks";
        }

   }
   </script>

1.3 history对象

属性和方法

</head>
<body>
<input type="button" value="前进" id="qian">
</body>
<script>
    /*
    * history.forward();前进
    * history.back();后退
    * history.go(1);前进
    * history.go(-1);后退
    * history.go(0);刷新
    * */
    document.getElementById("qian").onclick=function () {
        history.forward();
        location.href="http://localhost:63342/myWeb/day04/a_" +
            "%E5%88%9D%E4%BD%93%E9%AA%8C/a_01%E5%AF%B9%E8%AF%9D%E6%A1%86.html" +
            "?_ijt=t0pcrpdnj976otuj9i5arfbpkv"
    }
</script>
</html>

2 DOM

Document Object Model 文档对象模型

html标签通过浏览器加载内存中会生成一颗DOM属性,通过js代码可以获取这颗树的任意一个节点,可以这个节点属性和文本内容,动态修改html标签

2.1 获取节点的方法

//获取唯一节点(元素)
document.getElementBYId(‘id的属性值’);
//获取一组节点(元素)
document.getElementByTagName(‘html标签名’);
//通过class过去属性
document.getElementsByClassName(“class的属性值”);
//name的属性
document.getElementByName(‘name的属性值’);
查找节点

<body>
<input type="button" id="lianjie2" value="标签">
<input type="button" id="lian3" value="通过name给div值">
<input type="button" id="jie4" value="通过类名div给值">
<hr/>
<a >百度</a> <br>
<a >千里寻</a> <br>
<a >龙猫</a> <br>
<a >你的名字</a> <br>
<hr/>
<div name="one"></div>
<div name="one"></div>
<div name="one"></div>
<div name="one"></div>
<hr/>
<div class="two"> </div>
<div class="two"> </div>
<div class="two"> </div>
</body>
<script>
    window.onload=function() {
        var b2 = document.getElementById("lianjie2");
        b2.onclick = function () {
            var aN = document.getElementsByTagName("a");
            for (var index = 0; index < aN.length; index++) {
                aN[index].href = "http://www.itcast.cn";
            }
        };

        //根据name的属性值找
        var b3 = document.getElementById("lian3")
        b3.onclick=function() {
            //返回一个数组
            var divs = document.getElementsByName("one")
            for (var i = 0; i < divs.length; i++) {
                divs[i].innerHTML = "<a href='#'> 黑马程序员</a>";
            }
        };

        //根据姓名寻找
        var b4 = document.getElementById("jie4")
        b4.onclick=function(){
            var divs = document.getElementsByClassName("two")
            for (var i = 0; i < divs.length; i++) {
                divs[i].innerHTML = "<a href='#'>java开发EE</a>";
            }
        }

    }
</script>

全选与反选

<body>
<input type="checkbox" name="a" value="1500" >山地自行车1500 <br>
<input type="checkbox" name="a" value="200">时尚女装200 <br>
<input type="checkbox" name="a" > 笔记本电脑3000元<br>
<input type="checkbox" name="a" >情侣手表800 <br>
<input type="checkbox" name="a" >桑塔纳2000 <br>
<hr/>
<input type="checkbox" id="all" onclick="selectAll()"/>全选/全不选
&nbsp;
<input type="button" id="reverse" onclick="reverseSelect()" value="反选"/>
&nbsp;
</body>
<script>
    //全选/全不全

    function selectAll() {
        var all =document.getElementById("all");
        //得到上面所有复选框状态
       var v= document.getElementsByName("a");
        for(i = 0;i<v.length;i++) {
            v[i].checked=all.checked;
        }
    }
    function reverseSelect() {
        //得到上面所有的复选框
        var  a=document.getElementsByName("a");
        for (i=0;i<a.length;i++) {
            a[i].checked=!a[i].checked;
        }
    }
</script>

省市联动

<body>
<select  id="proviceId" onchange="selectCity(this)">
    <option > -请选择-</option>
    <option > 黑龙江</option>
    <option > 吉林</option>
    <option > 辽宁</option>
    <option > 河南</option>
</select>
<select  id="cityId">
    <option value="">
        --请选择市
    </option>
</select>
</body>
<script>
    var citys = new Array(5);
    citys[0] = [];
    citys[1] = ["哈尔滨","齐齐哈尔","大庆","佳木斯"];
    citys[2] = ["长春市","吉林市","四平市","通化市"];
    citys[3] = ["沈阳市","锦州市","大连市","铁岭市"];
    citys[4] = ["郑州市","洛阳市","安阳市","南阳市"];
    function selectCity(pNode) {
        //获取当前省份所选择到的索引值
        var index=pNode.selectedIndex;
        //根据索引值取出该省份对应的城市
        var  cityData=citys[index];
        //进行初始话
        var options="<option value=\"\">\n" +
            "        --请选择市\n" +
            "    </option>";
        //遍历一维城市数组,每个城市就是一个option
        for (var i= 0;i<cityData.length;i++) {
            var cityName=cityData[i];
            options +="<option>"+cityName+"</option>";
        }
        //添加到cityselect框下;
        var cityNod= document.getElementById("cityId");
        cityNod.innerHTML=options;
    }
</script>

2.2 使用js控制css样式

动态修改样式

<head>
    <meta charset="UTF-8">
    <title>示例代码</title>
    <style>
        .two{
            color: red;
            font-size:45px;
            font-family: 宋体 ;
        }
    </style>
</head>
<body>
<p id="first">
    这是第一自然段
</p>
<p id="second">
    这是第二自然段
</p>
<input type="button" value="改变几个样式" onclick="changeCss()"/>;
<input type="button" value="改变类样式" onclick="changeClass()"/>
</body>
<script>
    function changeClass() {
       var p2= document.getElementById("second");
        p2.className="two";
    }
</script>

表格隔行换色

<head>
    <meta charset="UTF-8">
    <title>修改表格的背景色</title>
    <style>
        table {
            margin: auto;
            border-collapse: collapse;
        }
        tr {
            text-align: center;
            height: 32px;
        }
    </style>
</head