JS基础
对个人学习中感觉重要的知识点进行记录
HZ~
记录学习,欢迎交流!(*╹▽╹*)
展开
-
26-正则表达式
正则表达式简介定义:正则表达式用于定义一些字符串的规则。作用:计算机可以根据正则表达式,来检查一个字符串是否符合指定的规则;或者将字符串中符合规则的内容提取出来。如果你想查看正则更多的内容,可以查阅官方文档关于 RegExp 这个内置对象的用法。创建正则表达式的对象方式一:使用构造函数创建正则表达式的对象语法: var 变量 = new RegExp("正则表达式"); // 注意,参数是字符串 var 变量 = new RegExp("正则表达式", "匹配模式"); // 注意,两个参原创 2020-08-25 09:09:35 · 293 阅读 · 0 评论 -
JS-25-offset、scroll、client的相关属性
offset 系列offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意:返回的数值都不带单位下面分别介绍。1、offsetWidth 和 offsetHightoffsetWidth 和 offsetHight:获取元素的宽高 + padding + border,不包括margin。如下:offsetWidth = width + padd原创 2020-08-16 15:22:27 · 201 阅读 · 0 评论 -
JS-24-移动端触摸事件
触屏事件概述移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件<script> var body = document.querySelector("body")原创 2020-08-15 19:15:12 · 141 阅读 · 0 评论 -
JS-23-ajax
简介Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Aja原创 2020-08-14 13:00:34 · 216 阅读 · 0 评论 -
JS基础-22-HTTP和HTTPS协议
HTTP与HTTPS 一、前言:先来观察这两张图,第一张访问域名http://www.12306.cn,谷歌浏览器提示不安全链接,第二张是https://kyfw.12306.cn/otn/regist/init,浏览器显示安全,为什么会这原创 2020-08-12 21:30:02 · 1766 阅读 · 0 评论 -
JS基础-21-audio、video的一些属性和方法
属性src:音频资源地址controls:是否显示控制器autoplay:自动播放(浏览器禁用了)muted:静音volume:音量currentTime:可以设置和获取当前播放到的时间点方法play :播放pause:暂停事件onpause:暂停事件onplay:播放事件onplaying:正在播放事件onvolumchange:音量改变...原创 2020-08-10 23:16:48 · 442 阅读 · 0 评论 -
JS基础-20-本地存储
iframe基本概念原创 2020-08-10 07:13:20 · 101 阅读 · 0 评论 -
JS基础-19-BOM
BOM什么是BOM BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。 BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。BOM的构成BOM 比 DOM 更大,它包含 DOM。顶级对象windowwindow对象的常原创 2020-08-09 12:45:39 · 147 阅读 · 0 评论 -
JS基础-18-addEventListener和冒泡
绑定事件的两种方式/DOM事件的级别方式一:onclick element.onclick = function () { }举例:<body><button>点我</button><script> var btn = document.getElementsByTagName("button")[0]; //这种事件绑定的方法容易被层叠。 btn.onclick = function () {原创 2020-08-03 08:47:22 · 1161 阅读 · 0 评论 -
JS基础-17-事件
事件简介事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。事件的三要素事件源(谁):触发事件的元素事件类型(什么事件): 例如 click 点击事件事件驱动程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数案例代码<body> <b原创 2020-08-02 09:18:50 · 177 阅读 · 0 评论 -
JS基础-16-DOM节点操作
常见概念JavaScript的组成JavaScript基础分为三个部分:ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM:文档对象模型(Document object Model),操作网页上的元素的API。比如让盒子移动、变色、轮播图等。BOM:浏览器对象模型,操作浏览器部分功能的API。比如让浏览器自动滚动。节点节点(Node):构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点,比如原创 2020-08-01 12:39:34 · 334 阅读 · 0 评论 -
JS基础-15-内置对象:Date/Math
内置对象简介内置对象就是指这个语言自带的一些对象,供开发者使用,这些对象提供了一些常用的或是最基本而必要的功能。JavaScript的内置对象:内置对象对象说明Arguments函数参数集合Array数组Boolean布尔对象Date日期时间Error异常对象Function函数构造器Math数学对象Number数值对象Object基础对象RegExp正则表达式对象String字符串对象内置对象原创 2020-07-29 23:12:18 · 204 阅读 · 0 评论 -
JS基础-14-内置对象:String
内置对象属性方法基本数据类型不能绑定属性和方法1、基本数据类型:注意,基本数据类型string是无法绑定属性和方法的。比如说: var str = "qianguyihao"; str.aaa = 12; console.log(typeof str); //打印结果为:string console.log(str.aaa); //打印结果为:undefined上方代码中,当我们尝试打印str.aaa的时候,会发现打印结果为:undefined。也就是说原创 2020-07-29 23:03:12 · 177 阅读 · 0 评论 -
JS基础-13-包装类
包装类包装类的介绍我们都知道,js中的数据类型包括以下几种。基本数据类型:String、Number、Boolean、Null、Undefined引用数据类型:ObjectJS为我们提供了三个包装类:String():将基本数据类型字符串,转换为String对象。Number():将基本数据类型的数字,转换为Number对象。Boolean():将基本数据类型的布尔值,转换为Boolean对象。通过上面这三个包装类,我们可以将基本数据类型的数据转换为对象。代码原创 2020-07-29 22:26:44 · 113 阅读 · 0 评论 -
JS基础-12-数组
数组简介数组(Array)是属于内置对象,我们可以在MDN网站上查询各种方法。数组和普通对象的功能类似,也是用来存储一些值的。不同的是:普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引来操作元素。索引:从0开始的整数就是索引。数组的存储性能比普通对象要好。在实际开发中我们经常使用数组来存储一些数据,使用频率非常高。数组的基本操作数组的元素可以是任意的数据类型,也可以是对象,也可以是函数,也可以是数组。数组的元素中,如果存放的是数组,我们就称这种数组为二维数组。创建数组对象方原创 2020-07-29 21:48:34 · 456 阅读 · 0 评论 -
JS基础-11-原型对象
原型对象原型的引入 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = function () { console.log("我是" + this.na原创 2020-07-26 22:00:56 · 140 阅读 · 0 评论 -
JS基础-10-对象的创建&构造函数
创建自定义对象的几种方法方式一:对象字面量对象的字面量就是一个{}。里面的属性和方法均是键值对。例如:var o = { name: "生命壹号", age: 26, isBoy: true, sayHi: function() { console.log(this.name); } };console.log(o);控制台输原创 2020-07-26 19:43:35 · 333 阅读 · 0 评论 -
JS基础-09-this
this解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this,this指向的是一个对象,这个对象我们称为函数执行的 上下文对象。根据函数的调用方式的不同,this会指向不同的对象:【重要】1.以函数的形式调用时,this永远都是window。比如fun();相当于window.fun();2.以方法的形式调用时,this是调用方法的那个对象3.以构造函数的形式调用时,this是新创建的那个对象4.使用call和apply调用时,this是指定的那个对原创 2020-07-26 12:45:59 · 72 阅读 · 0 评论 -
JS基础-08-对象简介和对象的基本操作
面向对象简介对象的作用是:封装信息。比如Student类里可以封装学生的姓名、年龄、成绩等。对象具有特征(属性)和行为(方法)。面向对象:可以创建自定义的类型,很好的支持继承和多态。面向对象的特征:封装、继承、多态。对象简介基本数据类型和引用数据类型的对比基本数据类型(值类型):String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。引用数据类型(引用类型):Object 对象。基本数据类型:基本数据类型的值直接保存在栈内原创 2020-07-26 10:26:43 · 170 阅读 · 0 评论 -
JS基础-07-作用域
作用域(Scope)的概念作用域指一个变量的作用范围。在js中,一共有两种作用域:全局作用域函数作用域全局作用域直接编写在script标签中的JS代码,都在全局作用域。全局作用域在页面打开时创建,在页面关闭时销毁。在全局作用域中有一个全局对象window,它代表的是一个浏览器的窗口,它由浏览器创建我们可以直接使用。在全局作用域中:创建的变量都会作为window对象的属性保存。创建的函数都会作为window对象的方法保存。全局作用域中的变量都是全局变量原创 2020-07-25 23:15:16 · 89 阅读 · 0 评论 -
JS基础-06-函数
函数的介绍函数:就是将一些功能或语句进行封装,在需要的时候,通过调用的形式,执行这些语句。函数也是一个对象使用typeof检查一个函数对象时,会返回function函数的作用:将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重复劳动。简化编程,让编程模块化。来看个例子: console.log("你好"); sayHello(); // 调用函数 // 定义函数 function sayHello(){ console.log("原创 2020-07-25 21:42:29 · 140 阅读 · 0 评论 -
JS基础-05-流程控制语句:选择结构(if和switch)循环结构(for和while)
本文首发于博客园,并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端。代码块用{}包围起来的代码,就是代码块。JS中的代码块,只具有分组的作用,没有其他的用途。代码块中的内容,在外部是完全可见的。举例: { var a = 2; alert("smyhvae"); console.log("永不止步"); } console.log("a = " + a);打印结果:(可以看出,虽.原创 2020-07-25 18:55:32 · 360 阅读 · 0 评论 -
JS基础-04-运算符
前言比如说+、*、/、( 都是运算符,而(3+5)/2则是表达式。运算符的定义和分类运算符也叫操作符。通过运算符可以对一个或多个值进行运算,并获取运算结果。比如:typeof 就是运算符,可以来获得一个值的类型。它会将该值的类型以字符串的形式返回:number string boolean undefined object。注:运算符都是会返回结果的,而typeof这个运算符返回的结果就是变量的类型。那返回的结果的类型是什么呢?是字符串。运算符有很多分类,比如:算数运算符自增运算符原创 2020-07-25 18:42:09 · 199 阅读 · 0 评论 -
JS基础-03-变量的强制类型转换
其他的简单类型 --> String方法一:变量+"" 或者 变量+“abc”举例如下:var a = 123; // Number 类型console.log(a + ''); // 转换成 String 类型console.log(a + 'haha'); // 转换成 String 类型上面的例子中,打印的结果,都是字符串类型的数据。方法二:调用toString()方法举例如下:变量.toString()【重要】该方法不会影响到原变量,它会将转换的结果返回。当然我们原创 2020-07-25 17:41:31 · 440 阅读 · 0 评论 -
JS基础-02-变量
字面量:数字和字符串“字面量”即常量,是固定值,不可改变。看见什么,它就是什么。简单的字面量有2种:数字、字符串。字面量都可以直接使用,但是我们一般不会直接使用字面量。如果直接使用字面量的话,非常麻烦。比如说,多个地方要用到同一个字面量,还不如事先定义一个变量,用来保存字面量。变量更加方便我们使用,所以在开发中都是通过变量去保存一个字面量,而不会直接使用字面量。变量变量的概念变量:变量可以用来保存字面量,而且变量的值可以任意改变。变量的定义和赋值在js中使用var关键字来声明一个变量。原创 2020-07-25 17:25:33 · 260 阅读 · 0 评论 -
JS基础-01-JS简介
JavaScript背景JavaScript是世界上用的最多的脚本语言。发展历史JavaScript诞生于1995年。布兰登 • 艾奇(Brendan Eich,1961年~),1995年在网景公司,发明的JavaScript。JavaScript是由网景公司发明,起初命名为LiveScript,后来由于SUN公司的介入更名为了JavaScript。备注:由于当时Java这个语言特别火,所以为了傍大牌,就改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌原创 2020-07-25 12:37:40 · 288 阅读 · 0 评论