敦煌璧画-CSDN博客

原创键盘事件与表单事件

关键事件按下，响应任何键的按下按下，响应能输入字符的键和enter键的按下抬起，响应任何键的抬起e.keyCode e.which 得到按键的键值得到按键的键值，或者是鼠标按下的键值onfocus onblur表单元素获得（失去）焦点的时候触发，非表单元素只要能获得焦点，也能触发这个事件，比如a document等。onchange当内容发生改变的时候触发，一般用在 input select 标签上。onsubmit当点击了submit 按钮后，form标签会触发这个事件。onreset当点击

2022-06-06 10:46:39 239 1

原创 JS数据交互之本地存储

本地存储分为两种：sessionStorage（临时存储）、localStorage（永久存储）。相比cookie：

2022-06-06 10:45:45 385

原创前端JS之事件对象

event事件对象是伴随着事件触发而产生的一个内置对象，它存储了关于该事件的各种信息，比如鼠标位置、按键信息等等，同时也可以它也提供了很多控制事件传递的方法。IE8以下使用全局event，其他浏览器使用事件函数的第一个参数，兼容写法类似于：鼠标位置client鼠标到可视区的距离。page 鼠标到文档的距离。offset 鼠标到触发事件的元素的距离。screen 鼠标到用户屏幕的距离。父级距离鼠标到触发事件的元素的父级的距离。阻止冒泡事件会沿着DOM结构一层一层向上传递，这个过程称为事件冒泡。阻止冒

2022-06-04 16:30:18 195

原创 JS数据交互之cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:Cookie 以名/值对形式存储，如下所示:当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。cookie是保存在中，以文本形式保存，每条信息可以设置过期时间。JavaScript 可以使用 document.cookie 属

2022-06-04 16:29:36 1177

原创 JS数据交互之ajax

ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。ajax可以在不刷新页面的前提下向后端发送/请求数据，在开发中是必然会用的技术。没用经过封装的原生ajax看起来非常复杂，使用起来代码也极为不协调，并且如果需要多次顺序请求，就会出现回调地狱，所以一般我们不会直接使用原生ajax。使用jQuery的ajax之前需要先引入jQuery库。我们可以下载jQ源码来引入，或者直接从各种CDN库引入，

2022-06-03 21:46:07 1763

原创前端JS数据交互之跨域

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器同源策略造成的，是浏览器对javascript施加的安全限制。例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。在后端利用Nginx进行反向代理设置，例如将81请求转发到82上不过这是后端的事情。作为前端初学者，了解即可。CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origi

2022-06-03 21:42:35 374

原创前端JS之DOM与BOM

childNodes获取一个元素的所有子节点……节点类型DOM包含了多种节点，我们通常获取的标签，只是节点中的一种：重点理解前三种节点。每个节点有属性，文本节点和属性节点的属性。常见的节点获取API常用：children parentNode offsetParent不常用：firstElementChild / firstChild lastElementChild / lastChild nextElementSibling / nextSibling previousElemen

2022-06-03 21:41:07 55

原创 01、初识DOM

DOM为我们提供了一个全局内置对象，要操作HTML标签，我们可以调用对象中的各种方法来获取页面中的标签（在js中我们可以称之为元素或者节点）：通过ID获取eg：通过选择器获取eg：eg：通过class名获取eg：通过标签名获取eg：特殊标签的获取获取html标签获取head标签获取body标签获取title标签一般情况下，推荐使用 ID获取或者选择器获取，比较方便。 ...

2022-06-03 21:39:56 71

原创 1.JS之基础知识总结

1.JS基础知识1.js特点：是基于原型的面向对象语言，解释性语言，动态语言，弱语言等等。2.ECMAscript是js的标准语法3.dom是文档对象模型，是用于操作网页上的内容。bom是浏览器对象模型，用于与浏览器交互。4.js代码写在script标签中，将script标签直接写在body标签里面或下面都属于——————js内部写法5.属于js的外部写法6.js代码的注释方法有2种，分别是单行注释 //,和多行注释 /* */.7.在js中主要的弹窗有 1.弹出对话框alert（“ ”） 2

2022-05-15 19:42:33 217

原创 JS之函数创建与使用训练

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padd

2022-05-11 22:27:05 75

原创 JS之for循环使用训练

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padd

2022-05-11 22:26:20 232

原创 JS之数据类型与算术运算训练

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="keywords" content="关键词信息"> <meta name="description" content="描述信息"> <meta name="viewport" content="width=device-width,

2022-05-04 22:40:14 173 1

原创 JS之-条件语法，三目转换训练

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padd

2022-05-04 22:39:32 269

原创 html段落与换行标签复习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2022-04-15 21:27:47 281

原创 html基本骨架复习

<!DOCTYPE html><!-- html 标签是网页最大的结构 --&

2022-04-15 21:27:09 293

原创 html标题标签复习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题

2022-04-15 21:26:10 277

原创作业小练习

小练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt

2022-04-14 10:35:47 67

原创小米网页布局小案例

小米网页布局小案例<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="keywords" content=""> <meta name="description" content=""> <title></title> <

2022-04-14 10:35:03 688

原创练习十六-网页界面布局案例

网页界面布局案例 <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="keywords" content=""> <meta name="description"...

2022-04-14 10:34:30 312

原创练习十五-电商商品界面案例

<!DOCTYPE html><html lang="en"><meta charset="utf-8"><meta name="keywords" content=""><meta name="description" content=""><head> <title></title> <style> *{ margin: 0;

2022-04-11 09:26:56 113

原创练习十四-无序列表使用2

<!DOCTYPE html><html lang="en"><meta charset="utf-8"><meta name="keywords" content=""><meta name="description" content=""><head> <title></title> <style> *{ margin: 0;

2022-04-11 09:26:10 120

原创练习十三-无序列表的使用练习

无序列表的使用练习 body,ul{ margin: 0; padding:0; } .box1{ width:200px; height:300px; margin: 50px; border: 1px solid rgb(156, 155, 155); } ul{ font-size: 12px;

2022-04-01 15:26:05 154

原创练习十二-界面布局练习

界面布局练习包包 body,p,span{ margin: 0; padding: 0; } *{ font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif; } .box1{ width: 202px; height: 304px; margin: 20px auto;

2022-04-01 15:25:35 282

原创 Html，CSS知识复习汇总

Html，CSS知识复习汇总1.html是网页内容的展示，比如文字，图片，视频，音频等等2.css是网页内容的装饰，比如让文字的大小和字体更漂亮，设置图片和视频的位置等等3.html是超文本标记语言，css是层叠样式表4.网页文件的后缀名为 .html5.在vscode中按！+tab可以添加网页模板6.作用是声明文档类型，版本声明7.是网页中最大的标签，即双标签，根标签8.通常放一些附加信息，说明性信息9.当前网页所有的html结构都放在这里面10.单标签，通常meta里会写一些页面附

2022-03-07 09:13:26 182

原创前端-JS运算符复习

运算符（operator）1.加性操作符let result = 1+2 //基础用法数据求和let result1 = 5+"5" //用于字符串拼接//容易犯错的案列let num1 = 5;let num2 = 10;let message = "我今年"+num1+num2+"岁了" //数值运算和字符串拼接连用记得加挎号2.减法操作符let result = 2 - 1; //基础用法数据求差//特殊的用法let result1 =

2022-02-12 16:04:06 302

原创前端-JS循环语句复习

循环语句1.do-while语句概念:do-while是一个后测试循环语句,既代码会先执行一次在对退出条件进行求值.换句话说就是最少会执行一次使用方法: do { statement } while (expression);使用案列:let i = 0;do{ i += 2; console.log(i);}while(i<10);//第一次: i = 2 打印 2，判

2022-02-12 16:02:19 68

原创前端-JS数组

数组概念：javascript中的数组(Array) 与其他语言中的数组是有很大区别的，js中的数组可以存放任意的数据类型，数组的大小也是随着元素的增加动态增加的。1.创建数组的几种方式*采用Array构造函数//基本用法let colors = new Array();//也可以直接指定数组的长度let colors = new Array(20); //指定了一个长度为20的数组 //也可以直接写数组的元素let colors = new Array("red","yel

2022-02-12 16:00:10 519

原创前端-JS数据类型与类型转换复习

数据类型#1. 数据类型基础数据类型number 数字string 字符串boolean 布尔值undefined 未定义null 空指针symbol 唯一值（新增）bigInt 大整数（新增）引用数据类型object 对象使用 typeof 操作符可以用来检测数据的类型。#Number类型JavaScript不区分整数、浮点数等，统一都叫Number。typeof 100 得到 "number"。数值字面量10 1.5 -20浮点数精度问题con

2022-02-08 21:54:14 413

原创前端-JS流程控制语句复习

流程控制语句前置知识点:1.关系操作符（>,<,<=,>=）let result = 5>3; //truelet result2 = 5<3; //false //特殊用法let result3 = "book" <"apple"; //比较的是首字母的ASCII编码let result4 = "23" < "3"; //true //同上let result5 = "23" < 3; //false 如果有一方是数字

2022-02-08 21:53:02 210

原创前端-JS基础之面向对象

Class用法class跟let、const一样：不存在变量提升、不能重复声明…es5面向对象写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。//es5functi

2022-02-08 21:50:09 80

原创前端-JS基础之常用内置对象

定时器setTimeout() 用来指定某个函数或字符串在指定的毫秒数之后执行只执行一次clearTimeout() 清除定时器/*setTimeout() 有两个参数 1.执行体注意:函数传递参数可以把实参放在时间参数的后面(不兼容IE9及以下) 2.时间多久执行*/let a=0let fun =()=>{ a++ console.log(a) setTimeout(fun,1000)}setTimeout(fun,1000)//clea

2022-02-06 20:14:19 690

原创前端-JS基础之定时器

定时器setTimeout() 用来指定某个函数或字符串在指定的毫秒数之后执行只执行一次clearTimeout() 清除定时器/*setTimeout() 有两个参数 1.执行体注意:函数传递参数可以把实参放在时间参数的后面(不兼容IE9及以下) 2.时间多久执行*/let a=0let fun =()=>{ a++ console.log(a) setTimeout(fun,1000)}setTimeout(fun,1000)//clea

2022-02-05 12:31:47 4558

原创前端-JS基础之各类型常用api

常用APINumbertoFixed()四舍五入指定小数位数，返回结果为字符串let num = 3.1415926// 保留两位小数let str1 = num.toFixed(2) // 3.14// 保留三位小数let str2 = num.toFixed(3) // 3.142Number.isNaN()判断一个数是否是NaNNumber.isNaN('123') // false Number.isNaN(456) // falseNumber.isNaN(true

2022-02-05 12:30:28 574

原创前端-JS基础之作用域

作用域作用域通俗的说，是变量起作用的范围。因为每个变量都有对应的“生活环境”JavaScript中作用域主要分为以下几种：全局作用域（即script标签内的空间）函数作用域（每个函数的花括号内的部分）块作用域（除函数外，其他的花括号空间都是块作用域，如if的花括号）变量只提供给当前环境和当前环境的子环境进行使用。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <titl

2022-01-26 16:48:11 976

原创前端-运算符作业

运算符作业let a = 1; let s = "我的" * a; s的值是underfined10 * 10 % 2 + 18 / 3 ** 2 结果值为 :2let s = 10; s += s; s的值为 :20let a = 10; let s = a++; console.log(a); a的值为:11对象在做相等判断时是比较内存地址嘛 true false下列哪些会转换类型进行比较 > ==

2021-12-28 22:36:47 102

原创前端-类型转换-作业

类型转换作业怎么显式转换成Number类型或String类型:Number()String()转换成Boolean()值为false的有哪些?0,"",false,underfined,nan,0n,nulllet bl = Number(true) + 1 ; bl 值为 :2Number([1])、 Number({}) 、 Number("丸子") 分别返回啥值1,nan,nanlet a = 10;let s = aa = 100

2021-12-28 22:36:07 125

原创前端-判断与循环的作业

if(100 % 2 ){ console.log(1) } 该语法打印什么 :无使用switch判断 monny 的值100 则打印妈妈真大方50 则打印妈妈真好5 则打印妈妈真小气let money;switch(money){ case 5: console.log("妈妈真小气") break; case 50: console.log("妈妈真好") break; case 100: cons..

2021-12-28 22:35:23 86

原创前端-JS基础之函数

函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。通俗的说，函数是利用特定语法，将一段代码打包在一起，每次调用函数就可以让这个代码块内的代码全部执行，复用代码。要注意的是，函数跟循环不相似，循环是重复一定次数的执行代码，函数虽然可以重复执行代码，但是它很灵活，可以任意决定它调用的时机声明函数声明函数有两种方式// 方式一let fn1 = function () { // 代码块}// 方式二function fn2 () { // 代码块}fn1和fn2

2021-12-28 22:34:23 753

原创前端-JS基础之循环

循环for循环是任何一门语言都会有个命令，用于反复执行某段代码。例如，循环代码块5次：for (let i = 0; i < 5; i++) { let text = `当前数字为${i}` console.log(text)}// 输出结果：当前数字为0当前数字为1当前数字为2当前数字为3当前数字为4此例中，let i = 0是声明循环的计次变量，i < 5是循环终止条件，i++是计次变量更新步长，{}内的所有代码为循环体内代码块。具体流程是：计次变量进行

2021-12-26 23:49:21 704

原创前端-JS基础之判断

判断判断是代码流程控制的一个重要环节，绝大多数逻辑的实现都离不开判断。1. if判断写法：//单个ifif( 条件 ){ //条件为真时执行的代码}//if elseif( 条件 ){ //条件为真时执行的代码}else{ //条件为假时执行的代码}//多个elseif( 条件1 ){ //条件1为真时执行的代码}else if( 条件2 ){ //条件1假条件2真时执行的代码}else if( 条件3 ){

2021-12-26 23:48:32 1300

空空如也

空空如也