初始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>
<body>
<table id="tab1" border="1" width="800" align="center">
    <tr style="background-color: #ccc;">
        <th>分类id</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a> |<a href="">删除</a>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a>
        </td>
    </tr>
    <tr>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a>
        </td>
    </tr>
</table>
</body>
<script>
    window.onload=function() {
        var trArray  =document.getElementsByTagName('tr');
        for(var i = 1;i<trArray.length;i++) {
            if (i % 2== 0) {
                trArray[i].style.backgroundColor='red';
            }else {
                trArray[i].style.backgroundColor='yellow';
            }
            trArray[i].onmouseover=function() {
                color = this.style.backgroundColor;
                this.style.backgroundColor="lightgreen";
            };
            trArray[i].onmouseout = function(){
                this.style.backgroundColor = color ;
            }
        }
    };
</script>

3 表单效验

正则表达式

// 方式一
var reg = new RegExp('正则表达式字符串','匹配模式');  i = ignore  g=global
// 方式二
var reg = /正则表达式语句/匹配模式;
<script type="text/javascript">
    var str = 'ABC123de45fgh6789qqq111';
    // 校验 字符串中是否以 abc开头
    // 使用正则对象
    let regExp = new RegExp('^abc', 'i');
    // test 方法 进行校验 成功返回 true 失败 false
    console.log(regExp.test(str));
    // 使用正则语句
    let regExp2 = /111$/;
    console.log(regExp2.test(str));

    // 拓展知识点:现在想把整个数值都取出来
    let regExp3 = /\d+/g;
    // console.log(regExp3.matchAll(str));
    // match 方法是字符串提供的
    console.log(str.match(regExp3));

    // js最标准的正则模板: /^正则表达式$/
/*
*                   邮箱:   jin.jia-de_123 @ 163 . com.cn
*                                                   cn
*                                                   com.cn
*                   正则:/^ ([a-z0-9_\.-]+) @ ([\da-z\.-]+) \. ([a-z\.]{2,6})$/
*
*                   () 代表一组
*                   [] 代表任意元素
*                   a-z 26个英文字母
*                   0-9 阿拉伯数字
*                   _ 下划线
*                   . 任意字符
*                   \ 转义字符
*                   - 减号
*                   + 代表一个或多个
*                   \d digit 0-9
*                   {2,6} 量词 至少2个,最多6个
*
* */
</script>
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值