js
关注
分享
扫一扫
文章平均质量分 66
皮卡卡卡
一个正在学习前端小萌新～
展开
-
33-视频与音频
第三十三章.视频与音频1. video标签 <!-- src 视频地址 width height 视频宽高 controls 显示视频控件 autoplay 自动播放（前提得加muted静音） muted 静音 loop 循环播放 poster --> <video src="./视频.mp4" width="500" height="400" controls mut原创 2021-03-18 12:37:08 · 187 阅读 · 1 评论 -
32-储存技术
第三十二章.储存技术1. cookie用户访问网站时，将一些字符串信息保存下来，当下次访问的时候可以直接读取到上次所存储的信息。1.1 注意事项请在服务器环境下使用cookie；客户端与后端都能设置cookie；每个网页之间cookie不共享，每个浏览器之间cookie不共享；与后端的所有交互都会自动带上cookie；单个域名cookie的大小不能超过4kb；客户端每次可以获取所有的cookie内容，每次只能设置一条cookie字段。1.1 基础写法设置cookie //得到原创 2021-03-17 22:25:23 · 174 阅读 · 0 评论 -
31-面向对象编程-补充
第三十一章.面向对象编程-补充封装性//工厂模式 function student(name,id){ let obj = {}; obj.name = name; obj.id = id; obj.company = "外经贸"; obj.say = function(){ console.log(`我是${this.name}，学号：${this.id}`); }; return ob原创 2021-03-17 22:24:52 · 92 阅读 · 0 评论 -
30-面向对象编程
第三十章.面向对象编程1.创建对象创建单个对象var afei = { name : "皮卡", age : 18, university : "外经贸", sayName : function(){ alert(this.name); }}工厂模式假设我们要创建多个统一类别的对象，比如：var pika = { name : "皮卡", age : 18, university : "外经贸",原创 2021-03-17 22:24:21 · 115 阅读 · 0 评论 -
28-正则表达式二
第二十八章.正则表达式二其他字符特殊字符 /* * | 或者 * * ^ 起始位置 * $ 结束位置 * * . 匹配所有字符(除了 \n \r) * * */let str = "abcd";let str2 = "abd";let reg = /abc|d/g;// | 或者let reg2 = /ab(c|d)/g;// 和ab[cd]console.log(str.match(reg));//["a原创 2021-03-17 22:22:42 · 147 阅读 · 0 评论 -
27-正则表达式一
第二十七章.正则表达式一一.正则表达式正则表达式是一个查找和替换字符串的强有力的工具。在 JavaScript 中，正则表达式通过内置的“RegExp”类的对象来实现，并与字符串集成。例子常规写法：//提取出str中所有的数字组成一个数组 ["188","38","3","29"]let str = "特务兔187伟哥38小希3薄荷29";function fn( str ){ let arr = []; let s = ""; for (le原创 2021-03-17 22:22:12 · 142 阅读 · 0 评论 -
26-键盘事件与表单事件
第二十六章键盘事件与表单事件1.键盘事件关键事件keydown 按下，响应任何键的按下keypress 按下，响应能输入字符的键和enter键的按下keyup 抬起，响应任何键的抬起e.keyCode e.whiche.keyCode 得到按键的键值e.which 得到按键的键值，或者是鼠标按下的键值2.表单事件onfocus onblur表单元素获得（失去）焦点的时候触发，非表单元素只要能获得焦点，也能触发这个事件，比如a document等。onchange原创 2021-03-17 22:21:39 · 341 阅读 · 0 评论 -
25-event
第二十五章eventeventevent事件对象是伴随着事件触发而产生的一个内置对象，它存储了关于该事件的各种信息，比如鼠标位置、按键信息等等，同时也可以它也提供了很多控制事件传递的方法。1.兼容IE8以下使用全局event，其他浏览器使用事件函数的第一个参数，兼容写法类似于：ele.onclick = function(ev){ ev = ev || window.event;};2.鼠标位置clientclientX clientY鼠标到可视区的距离。pagepa原创 2021-03-17 22:20:58 · 169 阅读 · 0 评论 -
24-各种宽高、距离的获取
第二十四章.各种宽高、距离的获取1.可视区宽高窗口宽高window.innerWidth window.innerHeight包含了滚动条的宽度和浏览器本身的边框宽度（低版本IE不支持）。内容区宽高document.documentElement.clientWidthdocument.documentElement.clientHeight不包含滚动条等。2.元素的各种宽高clientclientWidth clientHeight宽(高)+padding。o原创 2021-03-17 22:20:22 · 144 阅读 · 0 评论 -
23-BOM
第二三章.BOMBOMBOM（Browser Object Model）浏览器对象模型，提供了一些和浏览或窗口相关的操作。学过的弹窗、日志、定时器就属于BOM的一部分。1.重要事件onresize宽口大小发生改变的时候触发。onscroll页面滚动的时候触发，也可以用于某个元素节点上。onfocus onblur进入页面和离开页面时触发，也可以用于其他能获得焦点的元素节点上。open() close()2.重要对象location获取/设置 URL相关的属性原创 2021-03-17 22:19:51 · 107 阅读 · 0 评论 -
21-ES6语法知识二
第二十一章.ES6语法知识二for…in let arr = [4,5,6,7];for(let key in arr){ console.log(key , arr[key]);}//0 4//1 5//2 6//3 7 数字会打印出索引值 key value let obj = { name : "mint", age : 20, sex : "男", university : "外经贸" }; //f原创 2021-03-15 15:34:54 · 612 阅读 · 0 评论 -
20-ES6语法知识一
第二十章.ES6语法知识一letconsole.log(a); //报错let a = 10;/** （let const）暂时性死区* 只要当前作用域中声明过某个变量，那么声明使用该变量会报错** 建议，同个作用域所有的定义全部写在最前面*/let x = 10;function fn() { console.log(x); let x = 20;}fn(); //报错constconst a = 10;a = 20; //报错const a =原创 2021-03-15 15:33:58 · 239 阅读 · 0 评论 -
19-日期对象
第十九章.日期对象1. Date对象Date是约会的意思是日期的意思。Date是一个日期对象模型，和Math非常相似。Date===window.Date;//truetypeof Date;//"function"typeof Date();//"string"//"Thu Jun 18 2020 23:00:58 GMT+0800 (中国标准时间)"运行Date()返回一个日期的字符串表示： 周几 月份 日期 年 时:分:秒 时制+时区（补充）new Date()创建新的时间对原创 2021-03-15 15:33:24 · 300 阅读 · 2 评论 -
18-数学对象和定时器
第十八章.数学对象和定时器1. Math对象JS中的计算只能取到合理近似值(误差很小),请理性看待，合理使用.1+.2;//0.30000000000000004Math是一个JavaScript内置对象，在window对象下的一个属性Math === window.Math数学中我们常用的计算以及参数都会保存在Math对象中。圆周率π和自然常数eMath.PI;//3.1415926...//计算面积，概率都会用到Math.E;//2.71828182...//计算指数对数都会用原创 2021-03-15 15:32:52 · 127 阅读 · 0 评论 -
17-字符串相关API
第十七章.字符串相关API字符串就很数熟知了，就不多赘余bb了，直接上代码啦~/* * string.length 得到字符串的长度 * 只读，不可修改 * * string[0] 可以下标取值 * 只读，不可修改 * * 低版本的IE不兼容 [] 下标取字符串的值 * 所以一般情况下，我们想要取某个位置的字符使用： * charAt( index ) * * */ let str = "abc 皮..原创 2021-03-15 15:32:22 · 146 阅读 · 0 评论 -
16-数组相关API
十六章.数组相关APIpush() 、pop()、unshift()、shift() let arr = [11,22,33,44]; // 往数组后面添加数据 arr.push(678);// 返回长度5 [11,22,33,44,678] arr.push(5,6);//[11,22,33,44,678,5,6] // 删除数组的最后一个数据 arr.pop();//[11,22,33,44,678,5] // 往数组前面添加数原创 2021-03-15 15:31:47 · 137 阅读 · 0 评论 -
15-作业案例
十五.作业案例自定义多选框需求：当鼠标点击要选择的选项框，即勾选上，也可以取消；点击全选按钮，全部勾选上；点击反选按钮，取消已勾选的；<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0;font-family原创 2021-03-15 15:31:05 · 125 阅读 · 0 评论 -
14-函数的深扒
第十四章 函数的深扒1. argumentsarguments是再函数作用域内存在的一个类数组对象，存储函数的参数等属性。function foo(){ console.log(arguments); for(var i = 0;i< arguments.length+2;i++){ console.log(arguments[i]); }}foo(1,2,"哈哈哈",{},[1,2]);//arguments参数只有在函数作用域里面才生效，它是一原创 2021-03-15 15:30:30 · 92 阅读 · 0 评论 -
13-闭包
十三.闭包闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。先考虑一个问题function foo(){ var a = "我是foo里面的a";}foo();//这段代码执行之后，foo里面的a还存在嘛？结果显而易见，a已经不存在了。因为foo执行完了之后foo的作用域消失了，所以作用域里面的变量不见了，被销毁了。咱们需要用某种方法来获得foo里面的a，怎么办呢？简单function foo(){原创 2021-03-15 15:29:39 · 79 阅读 · 0 评论 -
12-函数作用域与解析顺序
十二.函数作用域与解析顺序var /* ES5 * var * function * * */ console.log(x); // 变量提升 -- 解析代码的时候，会先读（当前作用域中）所有的var var x = 20; //等价于 var x; console.log(x); x = 20; let x = 20; console.log(x);基于ES5 /*原创 2021-03-15 15:29:05 · 117 阅读 · 0 评论 -
11-函数
十一.函数函数的概念函数就是封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用函数的使用函数在使用时分为两步：声明函数和调用函数声明函数自定义函数方式（命名函数）// 声明定义方式function fn() {...}// 调用 fn(); 因为有名字，所以也被称为命名函数function 是声明函数的关键字，必须小写由于函数一般是为了实现某个功能才定义的，所以通常将函数名命名为动词，比如：getSum调用函数的代码既可原创 2021-03-13 13:24:43 · 452 阅读 · 0 评论 -
10-循环案例
十.循环案例九九乘法表 <style> * { margin: 0; padding: 0; font-family: "Microsoft Yahei"; } span{ display: inline-block; width: 90px; height: 30px; text-align: center; line-height: 30px; bor原创 2021-03-13 13:23:59 · 76 阅读 · 0 评论 -
9-循环语句
九.循环语句一.循环: 做重复的事情,在次数上出错, 枯燥乏味让我们快速实现代码的重复多次的执行. 循环 for 循环 能精确控制次数的循环模型: for(A; B; C){ 这两个分号不能多也不能少 D } 四个部分是什么含义? * * B: 循环的结束条件 * 需要有一个布尔类型: * true 循环没有结束 *原创 2021-03-13 13:22:03 · 272 阅读 · 0 评论 -
8-条件判断
八.条件判断表达式: 定义 就是有返回值的就是表达式条件判断: 代码执行的时候 在某种条件下执行A, 其余情况下执行B判断条件: 两个结果的: true falseif if(A){ B } //如果A为真, B里面的内容都会执行 //A为假, B里面的就不执行 let input = document.querySelector(".input"); let button = document.querySel原创 2021-03-13 13:21:21 · 86 阅读 · 0 评论 -
7-类型转换
七.类型转换JS是一种弱类型语言，在定义变量时不需要指定类型，一个变量可以存储任何类型的值JS数据类型分为简单类型与复杂类型，简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型简单类型值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型，包括：string ，number，boolean，undefined，null复杂类型引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型，通过 new 关键字创建的对象（系统对象、自定义原创 2021-03-13 13:20:53 · 119 阅读 · 0 评论 -
6-运算符
六、运算符一.逻辑运算符:多个条件之间的判断 一定会返回一个值判读条件A 布尔类型判断条件B同时都满足:A为真 B 也为真A && B 与运算符专业的解释:(遇到假的就返回)A && BA 为真 返回 BA 为假 返回 A一个值到底是真还是假?数据 进行识别转换转成布尔类型,改怎么转?六大假值:"" false 0 undefined null NaN 都是毫无争议的假值其余都是真值二.或运算符:(遇到真的就返回)原创 2021-03-13 13:20:08 · 123 阅读 · 0 评论 -
5-运算符
五.运算符JS 符号运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号JavaScript中常用的运算符有： 算数运算符、递增和递减运算符、比较运算符、逻辑运算符、赋值运算符算数运算符算术运算使用的符号，用于执行两个变量或值的算术运算浮点数的精度问题：浮点数值的最高精度是17位小数，但在进行算术计算时，其精确度远远不如整数var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004co原创 2021-03-13 13:19:38 · 195 阅读 · 0 评论 -
4-样式操作与属性操作（补充案例）
四.样式操作与属性操作（补充案例）案例改名字 <style> .nav{ width: 100px; height: 100px; background-color: pink; } .aa{color:red} .bb{font-weight: bold} </style></head><body> <div id="wrap" class="aa">文字&原创 2021-03-13 13:18:57 · 84 阅读 · 0 评论 -
3-样式操作与属性操作
三.样式操作与属性操作JS DOMDOM 简介什么是DOM文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式DOM树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中的所有内容都是节点（标签、属性、原创 2021-03-13 13:18:10 · 223 阅读 · 0 评论 -
2-变量、数据类型
二.变量、数据类型一.JS 变量什么是变量变量是用于存放数据的容器，通俗的讲，变量就是一个装东西的盒子。变量在内存中的存储本质：变量是程序在内存中申请的一块用来存放数据的空间变量的使用变量在使用时分为两步：声明变量// 声明变量 var age; // 声明一个 名称为age 的变量 var 是一个 JS关键字，用来声明变量( variable 变量的意思 )，使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管age 是程序员定义的变量原创 2021-03-11 19:03:18 · 507 阅读 · 0 评论 -
1-认识JavaScript
一.认识JSHTML(骨架，元素，结构)CSS(表现，效果，状态)JS(响应行为，交互，复杂操作)JavaScript(JS)是什么？基于原型，动态类型，解释型，弱类型 脚本语言传统语言： OOL 基于类/对象=>实例 Javascript： 基于原型，对象(万物皆对象)，原型可以指定，方法可灵活使用 脚本语言： 依赖环境(宿主环境)运行，浏览器可以使用DOM/BOM等，还有nodeJS(服务端) 弱类型/动态类型： 变量声明不需要规定类型，并且可以相互转换 解释型原创 2021-03-11 19:02:32 · 144 阅读 · 0 评论