前端学习笔记—JavaScript

视频地址:
Web前端必学的JS入门教程,零基础JavaScript入门
前端基础教程,JS必会的DOM BOM操作

JavaScript

基础认识

1
弹出提示对话框:alert(“弹出对话框”)

解释型语言,一行一行解释。

<script>
    alert("弹出对话框")
</script>

在这里插入图片描述

认识js

发明人:布兰登·艾奇(Brendan Eich,1961年~)

1995年利用十天完成JS设计
网景公司最初命名为LiveScript,后来与Sun合作改名JavaScript

运行在客户端浏览器上。

js的作用:

在这里插入图片描述

js的组成:

在这里插入图片描述

注释:
在这里插入图片描述

在这里插入图片描述

js的输入输出:

在这里插入图片描述

prompt取值是字符型的

变量

var age;//声明一个名称为age的变量,赋值var age=18;

只声明不赋值值为undefined

在这里插入图片描述

数据类型

数据类型可变

简单(基本)数据类型
在这里插入图片描述判断变量是否为数字型的方法:
在这里插入图片描述

获取字符串String长度

str.length

转义符
在这里插入图片描述

undefined和null

在这里插入图片描述

判断变量类型typeof 变量名

<script>
    var str = 'roydon';
    alert(typeof str)//string
</script>

在这里插入图片描述
这里的null类型为object,现在不考虑,后面会讲。

数据类型转换

1.转换成string

在这里插入图片描述

2.转换成数字型number

在这里插入图片描述

隐式转换

在这里插入图片描述

NaN:not a number不是一个数字

在这里插入图片描述

3.转换成布尔型boolean

Boolean函数。例如:Boolean(‘true’);
在这里插入图片描述

在这里插入图片描述

数组

var arr = new Array(2,3,4);//==>arr[2,3,4],若参数为一个,表示数组长度,元素为空

或者,利用字面量创建数组

var arr = ['小明','小红','小强'];

在这里插入图片描述

数组遍历:length拿数组长度

在这里插入图片描述

数组排序:

在这里插入图片描述
在这里插入图片描述

上图数组排序得到的结果:
1.arr [ ‘blue’, ‘red’, ‘pink’ ] ;
2.arr1 [1,4, 7, 13 ,77];
sort()函数默认只对一位数的数字排序生效,若要排序多位数数字,需要添加function方法。
解析链接:Array.prototype.sort()
默认sort()排序结果:(位数大于一的数字出现结果不正确)
在这里插入图片描述

检测是否为数组:instanceofArray.isArray()

在这里插入图片描述

数组操作:添加或删除

在这里插入图片描述

1.添加

在这里插入图片描述push();
在这里插入图片描述

2.删除

在这里插入图片描述

数组索引方法:

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

函数

声明和调用:function

在这里插入图片描述

第一行function getSum后面括号中的num1num2是形参。
最后两行调用传入的两个参数叫实参。

两种声明方式:

在这里插入图片描述

return:

在这里插入图片描述

arguments

内置对象,存储传递来的所有实参,保存的形式是数组(伪数组)

在这里插入图片描述

作用域:

全局和局部

就近

对象

对象的创建3法

	<script>
        //创建对象的3种方法
        //var person={} //创建了一个空对象
        //方法1=============
        var person = {
            pname: 'roydon',
            age: 18,
            gender: 'man',
            getAge: function () {//方法
                console.log(this.age);
            }
        }
        //获取属性的两种方法
        //1.
        console.log(person.pname);
        //2.
        console.log(person['age']);
        person.getAge();//既然是方法,就要带()
        //方法2=============
        var person1 = new Object();
        person1.pname = 'yicheng';
        person1.age = 19;
        person1.gender = 'man';
        person1.getAge = function () {
            console.log(this.age);
        }
        //获取属性两种方法同上
        console.log(person1);
        person1.getAge();
        //方法3==============构造函数法,首字母大写
        function Person3(pname, age) {
            this.pname = pname;
            this.age = age;
            this.getAge = function () {
                console.log(this.age);
            }
        }
        var person3 = new Person3('jack',20);
        person3.getAge();
    </script>

遍历forin:

//遍历
for (const key in person3) {
	if (Object.hasOwnProperty.call(person3, key)) {
		const name = key;//属性名
        console.log(name);
        const element = person3[key];//值
        console.log(element);
     }
}

在这里插入图片描述
在这里插入图片描述

日期Date对象:
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

获取时间戳:

在这里插入图片描述为啥时是从1970年开始,自行百度。

时间戳转换成时分秒:

在这里插入图片描述

倒计时案例:

	<script>
        // 定义一个函数参数为倒计时结束时间
        function countDown(time) {
            var nowTime = +new Date();//当前时间戳(毫秒数
            var inputTime = +new Date(time);//输入时间的时间戳
            var times = (inputTime - nowTime) / 1000;
            var d = parseInt(times / 60 / 60 / 24);//天
            d = d < 10 ? '0' + d : d;//个位数转成01,02,03形式
            var h = parseInt(times / 60 / 60 % 24);//时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);//分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);//秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2022-7-8 20:00:00'));
        var date = new Date();
        console.log(date);
    </script>

下面是模拟:
在这里插入图片描述

字符串

字符串基本操作

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述在这里插入图片描述

Web API

应用程序编程接口

在这里插入图片描述

DOM

在这里插入图片描述

dom树:

在这里插入图片描述

每一个元素可以看作一个对象

获取页面元素

在这里插入图片描述

  1. 根据ID获取(返回的是一个匹配到ID的DOM Element对象)
document.getElementById();

可以使用console.dir();查看

  1. 通过标签名获取(返回的是一个指定标签的集合)
element.getElementByTagName();
  1. 通过类名获取
    在这里插入图片描述
    在这里插入图片描述

事件基础

例如,点击一个按钮,弹出对话框

<button id="btn">
    点我
</button>

事件分为三部分:事件源、事件类型、事件处理程序。也叫事件三要素

//1.事件源=事件被触发的对象(按钮)
var btn = document.getElementById('btn');
//2.事件类型=如何触发,例如:点击,鼠标悬停,按键按下
//3.事件处理程序=函数赋值
btn.onclick=function(){
	alert('点了我');
}

操作元素

  1. 改变元素内容

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

同时,亦可获取标签,innerText获取内容(去空格和换行),

innerHtml获取元素加内容,(保留空格和换行)

案例:密码框显示,隐藏密码

html

在这里插入图片描述

css
在这里插入图片描述

js

在这里插入图片描述


DOM核心重点

获取过来的DOM元素是一个对象所以称为文档对象模型

在这里插入图片描述
DOM操作:

  1. 创建
  • document.write
  • innerHTML
  • createElement
  • appendChild
  • insertBefore
  • removeChild
  1. 改(主要修改DOM元素的属性、内容、表单的值等)
  • 修改元素属性:src、href、title等
  • 修改普通元素内容:innerHTML、innerText
  • 修改元素样式:style、className
  • 修改表单元素:value、type、disabled等
  1. 查(获取DOM元素)
  • DOM提供的API方法:querySelector()querySelectorAll()。(H5新方法,推荐)
  • 利用节点操作获取元素:父(parentNode)、子(children)、兄弟(previousElementSibling、nextElementSibling)。
  1. 属性操作(可自定义属性)
  • setAttribute():设置DOM的属性值
  • getAttribute():得到DOM的属性值
  • removeAttribute()移除属性
  1. 事件操作
    12

事件高级

1.注册事件(绑定事件)

注册事件两种方法:传统方式、方法监听注册方式

在这里插入图片描述
addEventListener()事件监听方式

在这里插入图片描述

2.删除事件(解绑事件)

传统解绑方法:

var divs = document.querySelectorAll('div');
    divs[0].onclick = function() {
        alert(11);
        // 1. 传统方式删除事件
        divs[0].onclick = null;
     }

方法监听注册解绑方式:

    // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
3.DOM事件流

在这里插入图片描述

在这里插入图片描述

4.事件对象event
// 事件对象
var div = document.querySelector('div');
div.onclick = function(e) {
     console.log(e);
    }
     // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
     // 2. 事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
     // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息,鼠标坐标啊,如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
     // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e

常见属性和方法:
ie以si,下列方法结合实际记忆

在这里插入图片描述

5.阻止事件冒泡

e.stopPropagation(); // stop 停止 Propagation 传播
下列代码为例,当点击父盒子中的son盒子时,不阻止事件冒泡,会发生弹出三个提示框(son、father和document),阻止事件冒泡后,父亲元素不在冒泡弹出框。只弹出son提示框。

<script>
  // 常见事件对象的属性和方法
  // 阻止冒泡  dom 推荐的标准 stopPropagation() 
  var son = document.querySelector('.son');
  son.addEventListener('click', function(e) {
     alert('son');
     e.stopPropagation(); // stop 停止  Propagation 传播
  }, false);
  var father = document.querySelector('.father');
  father.addEventListener('click', function() {
      alert('father');
  }, false);
  document.addEventListener('click', function() {
      alert('document');
  })
</script>
6.事件委托

在这里插入图片描述
在这里插入图片描述

7.鼠标事件

常用:
在这里插入图片描述

在这里插入图片描述
e.preventDefault();阻止默认事件;阻止默认右键显示菜单操作;

在这里插入图片描述

<script>
    // 1. contextmenu 禁用右键菜单
    document.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    })
    // 2. 禁止选中文字 selectstart
    document.addEventListener('selectstart', function(e) {
        e.preventDefault();
     })
 </script>

鼠标事件对象
MouseEvent --> clientX、pageX、screenX

<script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');
            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');
            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>
8.键盘事件

在这里插入图片描述例如,网站的搜索框一般会设置一个快捷键,当我们点击s键时,利用ASCII码判断按下的键是否为s若是则给搜索框一个焦点。
在这里插入图片描述
源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            display: block;
            margin: 100px auto;
            width: 300px;
            height: 25px;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <input type="text">
    <script>
        // 核心思路: 检测用户是否按下了s 键,如果按下s 键,就把光标定位到搜索框里面
        // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
        // 搜索框获得焦点: 使用 js 里面的 focus() 方法
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            if (e.keyCode === 83) {
                search.focus();
            }
        })
    </script>
</body>
</html>

BOM

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

window对象常见事件

1.窗口加载事件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

// load 等页面内容全部加载完毕,包含页面dom元素 图片 flash css 等等

// DOMContentLoaded 是DOM 加载完毕,不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

2.调整窗口大小事件

在这里插入图片描述

定时器

在这里插入图片描述

1.setTimeout()定时器

在这里插入图片描述

    <script>
        // 1. setTimeout 
        // 语法规范:  window.setTimeout(调用函数, 延时时间);
        // 1. 这个window在调用的时候可以省略
        // 2. 这个延时时间单位是毫秒 但是可以省略,如果省略默认的是0
        // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
        // 4. 页面中可能有很多的定时器,我们经常给定时器加标识符 (名字)
        // setTimeout(function() {
        //     console.log('时间到了');

        // }, 2000);
        function callback() {
            console.log('爆炸了');
        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 我们不提倡这个写法
    </script>

在这里插入图片描述

停止setTimeout()定时器

在这里插入图片描述

    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        //先给定时器一个名称,根据名称指定停止
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>
2.setInterval()定时器

在这里插入图片描述

    <script>
        // 1. setInterval 
        // 语法规范:  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
            console.log('继续输出');
        }, 1000);
        // 2. setTimeout  延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器
        // 3. setInterval  每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数
    </script>

JS执行队列

在这里插入图片描述

在这里插入图片描述

异步:
在这里插入图片描述

location对象

URL

在这里插入图片描述

在这里插入图片描述search得到的是网址主机问号?(包含)之后的数据,是string字符串

例如:https://editor.csdn.net/md/?articleId=1256752823244
location.search得到的是?articleId=1256752823244
可以用substr(1)方法去掉问号
在这里插入图片描述

navigator对象

在这里插入图片描述

history对象

在这里插入图片描述

PC端网页特效

丰富网页

元素偏移量offset

在这里插入图片描述

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

roydon_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值