JavaScript高级

最新推荐文章于 2024-05-27 17:09:10 发布
最新推荐文章于 2024-05-27 17:09:10 发布
阅读量334 收藏 3
点赞数 2
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38353993/article/details/83140769
版权

一 BOM对象

Browser Object Model 浏览器对象模型

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

例如：地址栏模拟成location对象，前进后退刷新按钮模拟成history对象

在这里插入图片描述

1.2 window对象

模拟浏览器整个窗口

1）对话框
<script type="text/javascript">
    /*
    * 对话框
    *   1）警告框：window.alert('消息内容');
    *   2）确认框：confirm('消息内容'); 确定按钮 返回true 、取消按钮 返回false
    *   3）输入框：prompt('消息内容','默认值'); 确定按钮 返回输入的值、 取消按钮 返回null
    *
    * 注意：window 方法和属性，window可以省略不写
    * */

    // window.alert('你好，传智播客');
    // console.log(confirm('贺哥美不美？'));
    console.log(prompt('5+4=？','请输入内容'));
</script>
2）定时器
<script type="text/javascript">
    /*
    * 定时器
    *   1）复用性定时器
    *      var number =  setInterval('函数名()',间隔时间); 根据间隔时间，执行指定函数，无限循环，返回值定时器编号
    *      var number =  setInterval(函数名,间隔时间); 根据间隔时间，执行指定函数，无限循环，返回值定时器编号
    *      clearInterval(number); 关闭定时器
    *   2）一次性定时器
    *      var number = setTimeout('函数名()',间隔时间); 根据间隔时间，执行指定函数，仅执行一次，返回定时器编号
    *      var number = setTimeout(函数名,间隔时间); 根据间隔时间，执行指定函数，仅执行一次，返回定时器编号
    *      clearTimeout(number); 关闭定时器
    *
    * */
    function sing() {
        console.log("单身情歌");
    }

   // let interval = setInterval('sing()', 1000);
   // console.log("定时器编号:" + interval);

    // 关闭定时器
    document.getElementById('myBtn1').onclick = function () {
        clearInterval(interval);
    }

    function dance() {
        console.log("海草舞");
    }

    let timeout = setTimeout('dance()',2000);

    // 关闭定时器
    document.getElementById('myBtn2').onclick=function () {
        clearTimeout(timeout)
    }

</script>
c）案例：会动的时钟

需求

点击开启按钮，时间开始移动，点击暂停按钮，时间停止移动

技术分析

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        border: 1px solid black;
    }
    div #time{
        color: aqua;
    }
</style>
<body>
<div align="center">
    <h2 id="time">我是时间</h2>
    <input type="button" value="开始" id="start" onclick="start()"/>
    <input type="button" value="暂停" id="pause" onclick="pause()"/>
</div>

</body>
<script type="text/javascript">
    window.onload = function () {
        var time = document.getElementById("time");
        function timeChange() {
            time.innerText = new Date().toLocaleString();
        }
        var number;
        document.getElementById("start").onclick = function () {
            clearInterval(number);
            number = setInterval(timeChange,1000);
        }
        document.getElementById("pause").onclick = function () {
            clearInterval(number);
        }
    }
    // var time = document.getElementById("time");
    // function timeChange() {
    //     time.innerText = new Date().toLocaleString();
    // }
    // var number;//获取
    // function start() {
    //     clearInterval(number);
    //     number = setInterval(timeChange,1000);
    // }
    // function pause() {
    //     clearInterval(number);
    // }
</script>

1.3 location对象

浏览器窗口地址栏

a）属性和方法
<script type="text/javascript">
    /*
    * location对象
    *   1）location.href 当前窗口地址栏的属性值
    *   2）location.reload() 页面刷新
    * */
    // 获取当前地址
    console.log(location.href);
    // 跳转新页面
    //location.href = "https://www.baidu.com";

    // 补充知识点，id是页面的唯一标识，js可以直接使用
    // doucment.getElementById('myBtn');
    myBtn.onclick=function () {
        location.reload();
    }
</script>
b）案例：页面倒计时跳转

需求

页面倒计时5秒后，跳转到百度

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        border: 1px solid black;
    }
</style>
<body>
<div align="center">
    <h2>将在<span id="addressChange">5</span>秒后跳转到百度</h2>
    <input type="button" value="点击跳转" id="change">
</div>

</body>
<script type="text/javascript">
    window.onload = function () {
        //页面跳转
        var number = 5;
        function addressChange() {
            var ac = document.getElementById("addressChange");
            if (number>=1){
                ac.innerText=number--;
            }else {
                window.location.href="http://www.baidu.com";
            }
        }
        document.getElementById("change").onclick = function () {
            setInterval(addressChange,1000);
        }
    }

1.4 history对象

浏览器窗口历史记录对象

a）属性和方法
<script type="text/javascript">
    /*
    * history对象
    *   1）history.forward(); 前进
    *   2）history.back(); 后退
    *   3）history.go(1); 前进
    *   4）history.go(-1);后退
    *   5）history.go(0); 刷新
    *
    *
    * */
</script>

二 DOM对象

2.1 概述

Document Object Model 文档对象模型

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

在这里插入图片描述

2.2 获取节点的方法

// 获取唯一节点（元素）
document.getElementById('id的属性值');
// 获取一组节点(元素)
document.getElementsByTagName('html标签名');
document.getElementsByClassName("class的属性值");
document.getElementsByName('name的属性值');
a）案例：查找节点

需求

根据上面所学的方法，找到相应节点元素

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" id="btn1" value="通过标签名设置连接">
    <input type="button" id="btn2" value="通过name值赋值内容">
    <input type="button" id="btn3" value="通过类名赋值内容">
</div>
<div>
    <a>aaaa</a>
    <a>aaaa</a>
    <a>aaaa</a>
</div>
<div>
    <span name="text1"></span><br>
    <span name="text1"></span><br>
    <span name="text1"></span>
</div>
<div>
    <span class="text2"></span><br>
    <span class="text2"></span><br>
    <span class="text2"></span>
</div>
</body>
<script>
    document.getElementById("btn1").onclick=function () {
        var elementsByTagName = document.getElementsByTagName("a");
        for (var i = 0;i<elementsByTagName.length;i++){
            elementsByTagName[i].href="http://www.baidu.com";
        }
    }
    document.getElementById("btn2").onclick=function () {
        var elementsByName = document.getElementsByName("text1");
        for (var i = 0;i<elementsByName.length;i++){
            elementsByName[i].innerHTML="<font color='red'>bbbb</font>"
        }
    }
    document.getElementById("btn3").onclick=function () {
        var elementsByClassName = document.getElementsByClassName("text2");
        for (var i = 0;i<elementsByClassName.length;i++){
            elementsByClassName[i].innerHTML="<font color='#7fffd4'>cccc</font> "
        }
    }
</script>
</html>
b）案例：全选反选

需求

点击复选框，动态影响商品列表

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="checkbox" name="item" value="1500"/> 山地自行车1500<br/>
<input type="checkbox" name="item" value="200"/> 时尚女装200<br/>
<input type="checkbox" name="item" value="3000"/> 笔记本电脑3000元<br/>
<input type="checkbox" name="item" value="800"/> 情侣手表800<br/>
<input type="checkbox" name="item" value="2000"/> 桑塔纳2000<br/>
<hr/>
<input type="checkbox" id="all" onclick="selectAll(this)"/>全选/全不选 &nbsp;
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/>&nbsp;
</body>
<script>
    function selectAll(obj) {
        var checked = obj.checked;
        var elementsByName = document.getElementsByName("item");
        for (var i =0;i<elementsByName.length;i++){
            elementsByName[i].checked=checked;
        }
    }
    function reverseSelect() {
        var elementsByName = document.getElementsByName("item");
        for (var i =0;i<elementsByName.length;i++){
            elementsByName[i].checked=!elementsByName[i].checked;
        }
    }
</script>
</html>
c）案例：省市联动

需求

选择指定省份信息，动态加载相应的城市列表

在这里插入图片描述

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <select id="province">
        <option value="noChange">--请选择省份--</option>
    </select>
    <select id="city">
        <option value="noChange"> --请选择城市--</option>
    </select>
</div>
</body>
<script>
    var cityList = new Array();
    cityList['北京市'] = ['朝阳区', '东城区', '西城区', '海淀区'];
    cityList['上海市'] = ['宝山区', '黄浦区', '青浦区', '南汇区'];
    cityList['广州省'] = ['广州市', '佛山市', '中山市', '东莞市'];
    cityList['河北省'] = ['邯郸市', '石家庄市'];
    cityList['河南省'] = ['郑州市', '洛阳市'];
    cityList['湖北省'] = ['武汉市', '宜昌市'];
    cityList['湖南省'] = ['湖南省', '长沙市'];
    cityList['陕西省'] = ['陕西省', '西安市'];
    cityList['山西省'] = ['山西省', '太原市'];
    cityList['黑龙江省'] = ['黑龙江省', '哈尔滨市'];
    cityList['台湾省'] = ['台北市'];
    cityList['其他'] = ['其他'];
    window.onload = function () {
        for (var index in cityList){
            document.getElementById('province').innerHTML += '<option value="' + index + '">' + index + '</option>';
        }
    }
    document.getElementById('province').onchange = function () {
        // 获取当前 option value的值
        var value = this.value;
        // 根据省份名称 查询城市列表
        var cityArr = cityList[value];

        document.getElementById('city').length = 1;
        // 遍历城市列表，添加城市option
        for (var index in cityArr) {
            // 使用 dom内置对象
            document.getElementById('city').add(new Option(cityArr[index], cityArr[index]));
        }
    }
</script>
</html>

2.3 使用js控制css样式

之前在html页面把css写死了，现在通过js动态修改标签的css样式

// 通过js代码直接修改  获取此标签dom元素
元素.style.样式名='样式值';
	补充：
    	css编写中: font-size
		js编写中： fontSize 小驼峰式命名
// js结合类选择器，进行修改
元素.className="类选择器";
a）案例：动态修改样式

需求

根据上面所学的方法，实现标签样式修改

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .myClass{
            color: orange;
            font-size: 50px;
            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 type="text/javascript">

    // 方式一： 元素.style.样式名='样式值’  驼峰式命名  font-size->  fontSize
    function changeCss() {
        var first = document.getElementById('first');
        first.style.color = 'red';
        first.style.fontSize = '30px';
        first.style.fontFamily = '楷体';
    }

    // 方式二：元素.className= '类选择器'
    function changeClass() {
        var second = document.getElementById('second');
        second.className='myClass';
    }
</script>
</html>
b）案例：表格隔行换色

需求

通过js动态添加表格背景色，鼠标移入移出实现高亮的效果

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
    <caption><h1>商品分类</h1></caption>
    <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>
    var color;
    var elementsByTagName = document.getElementsByTagName("tr");
    for (var i =1;i<elementsByTagName.length;i++){
        if (i%2==1){
            elementsByTagName[i].style.backgroundColor="lightpink";
        }else {
            elementsByTagName[i].style.backgroundColor="lightblue";
        }
        elementsByTagName[i].onmouseover = function () {
            color = this.style.backgroundColor;
            this.style.backgroundColor="lightgreen";
        }
        elementsByTagName[i].onmouseout = function () {
            this.style.backgroundColor = color;
        }
    }
</script>
</html>

三 表单校验

3.1 正则表达式

Regular Expression

作用：按照正确规则去匹配我们的字符串

a）js中如何正则表达式
// 方式一
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>

复习

  • 能够使用window对象常用的方法
  • 能够使用location对象常用的方法和属性
  • 能够使用history对象常用的方法
  • 能够使用DOM中来查找节点
  • 能够使用JavaScript对CSS样式进行操作
  • 能够使用正则表达式进行表单的验证
你的pizza到了
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 高级（进阶）
m0_73198722的博客
10-29 779
JS高级
javascript高级
weixin_34408624的博客
01-19 94
数组及操作方法 数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的 #定义数组的方法 //对象的实例创建 var aList = new Array(1,2,3); //直接量创建（常用） var aList2 = [1,2,3,"asd"]; # 操作数据中数据的方法 var aList = [1,2,3,4] 1.获取数组的长度：aList.length ...
javascript高级进阶
最新发布
2302_77862232的博客
05-27 239
类是用于创建对象的模板，他们用代码封装数据以处理数据，js中的类建立在原型上。
JavaScript高级编程
mydeman的学习日志
08-20 7691
         原文地址： http://www.onlamp.com/pub/a/onlamp/2007/07/05/writing-advanced-javascript.html        Web应用程序（Web Applications）        从计算机纪元的黎明刚刚来临开始，不同平台间软件的互用性就一直是关注的焦点。为了尽可能实现用户的最大要求，软件发布者往往将流行软件从一
javascript高级程序设计
06-02
"JavaScript高级程序设计"是一本深入探讨JavaScript编程语言的书籍，旨在帮助读者掌握JS的各个方面，适合自学者进行系统学习。以下是对书中的主要知识点的详细阐述： 1. JavaScript简介： JavaScript是一种广泛...
javascript高级教程.pdf
05-26
《JavaScript高级教程》这本书深入探讨了这一动态语言的核心概念和技术，旨在帮助开发者提升技能，掌握JavaScript的高级用法。 首先，JavaScript是一种解释型的、基于原型的、动态类型的脚本语言。这意味着它不需要...
Javascript高级教程
10-17
在"JavaScript高级教程"中，我们将深入探讨其API（应用程序编程接口）的使用，以及如何结合这些工具来构建复杂的web前端应用。 首先，JavaScript API是浏览器提供的一系列预定义函数和对象，允许开发者与浏览器进行...
JavaScript 高级编程
04-22
很详细透彻的 javascript 网上收集 的 但是不知道是那本书 知道的告诉我下 我去买本 入门与提高 javascript教程 入门与提高 javascript教程入门与提高 javascript教程
javascript 高级
进击的程序猿
05-11 698
javascript 高级 js 基础补充 typeof 可以查看一个值的类型 typeof 简单类型：返回结果简单类型 typeof null: 并不是 null 而是 object typeof 复杂类型： 返回的都是 object typeof 函数： 返回的 function （在 js 中函数是一等公民） console.log(typeof 11) // 输出number //...
Javascript高级
AlanRedsheep
01-27 321
JavaScript高级 JavaScript输出 window.alert()弹出警告框 &lt;script&gt; window.alert("Warning！"); &lt;/script&gt; document.write()将内容写到HTML文档中 请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.wri...
JavaScript高级编程指南
"这是一本全面介绍JavaScript高级技术的教程，专为前端开发人员设计，涵盖了从基础到进阶的JavaScript知识，包括语言核心、DOM操作、对象与数据结构、事件处理等多个方面。" 在《JavaScript高级教程》中，作者首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值