- 博客(28)
- 收藏
- 关注
原创 Grid网格布局
我们平时使用flex布局比较多,但是flex中justify-content:space-between和around会让子元素两端对齐,最后一行的子元素分配不在我们理想中
2024-09-03 10:13:22
198
原创 前端环境启动命令修改
可下载 npm install cross--env插件。这样npm run dev启动时运用本地local地址。在package.json中scripts可写入。npm run start 启动时运行所需地址。前端npm run 启动命令地址不同时。
2023-10-17 09:40:03
99
原创 关于<meta name=“viewport“ content=“width=device-width,initial-scale=1.0“>的解释
1、名词解释2、viewport 语法介绍:3、target-densitydpi 属性的 取值范围注意:所有的缩放值都必须在0.01–10的范围之内3、target-densitydpi 属性的 取值范围1、device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。2、high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。3、medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设
2023-10-08 13:57:03
924
原创 BOM的基础2
窗口事件onload 当文档加载完成时运行脚本,入口函数window.onload = function () { // 当网页或文档加载完成(包含图片、视频等)执行 }onunload 关闭当前网页就会执行window.onunload = function () { // 关闭当前页面时执行 }onpageshow 当窗口可见时运行脚本onpagehide 当窗口隐藏时运行脚本onblur 当窗口失去焦点时运行脚本onfocus 当窗口得到焦点时运行脚本 window.on
2022-05-08 20:12:39
77
原创 BOM基础
BOM一、初识BOMwindow.alert("警告框");//全局方法会省略windowvar a="全局变量"; function func(){ console.log("全局函数") }二、BOM的属性值为对象//1.history历史记录,对history对象的只读引用console.log(window.history);//2.location 用于窗口或框架的location对象console.log(window.locat
2022-05-06 21:20:13
195
原创 事件冒泡、事件监听、事件捕获、事件委托
事件冒泡bubbles 返回布尔值,指示事件是否是冒泡事件类型。 默认truecancelBubble 返回布尔值,指示事件是否取消了冒泡事件。 默认falseoBox1.onclick=function(ev){ ev=ev||window.event; alert("box1"); if(ev.stopPropagation){ ev.stopPropagation() }else{ // 除
2022-05-06 10:07:23
100
原创 键盘鼠标事件
键盘鼠标事件DOM的键盘事件onkeydown 键盘上的某个按键被按下时触发onkeyup 键盘上的某个按键被松开时触发onkeypress 键盘上的某个按键被按下并松开时触发 不识别(上下左右 alt ctrl shift backface)DOM的表单事件输入事件oninput 元素获取用户输入时触发焦点事件onfocus 元素获取到焦点时触发onblur 元素失去焦点时触发onsubmit 表单提交时触发onchange 该事件在表单元素的内容改变时触发(<input
2022-05-05 09:05:36
101
原创 DOM的遍历
一.DOM的遍历1. 父元素查找 children 返回(元素)子节点 console.log(box.children);//HTMLCollection(3) [div.box1, div.box2, ul.list]childNode 返回子节点(包含文本(空)节点) console.log(box.childNodes);//NodeList(7) [text, div.box1, text, div.box2, text, ul.list, text]firs...
2022-04-27 09:06:16
1071
原创 DOM中HTML的改变
DOM中HTML的改变一、DOM中HTML改变输出流 document.write() // 入口函数 // 当文档加载完成后 执行 window.onload = function () { document.write("改变输出流");//会覆盖文档 }1、字符串2、解析标签3、换行4、docunment.write()换行:与<pre></pre>连用document.writ..
2022-04-25 22:23:25
192
原创 DOM获取元素
DOM获取元素1、通过标签名、类名、id、name(1) 通过id获取元素 是唯一的var atOP=document.getElementById('top')(2)通过class名获取元素 一个或多个HTMLCollection 集合 类似于为数组 伪数var aHeader=document.getElementsByClassName('header')(3)通过标签名获取元素 一个或多个var aText=document.getElementsByName('span')(
2022-04-25 09:47:12
752
原创 Date的对象
1.Date的对象 var date=new Date()(1)getTimezoneOffset 返回本地时间与格林威治时间的分钟差 console.log(date.getTimezoneOffset());//-480(2)toString() 将date对象转换为字符串 console.log(date.toString());//Fri Apr 22 2022 11:30:33 GMT+0800 (GMT+08:00)(3
2022-04-23 21:24:30
113
原创 Number、Boolean、Date、Math对象
一、Number对象的创建1、字面量var num=10;//number2、nwe关键字var num2=nwe Number(value)var num2=nwe Number(100)//objectvar num2=nwe Number('100')//Number(100)var num2=nwe Number('hello')//Number(Nan)二、Number对象的精度进制js中只用一种数字类型 包含整数和小数(浮点型)var num1=100;
2022-04-21 18:56:41
752
原创 正则表达式
正则表达式一、创建1.字面量 /表达式/修饰符var reg1=/abc/g;//匹配一个字符串中是否包含abc g:global(全局) console.log(reg1); console.log(typeof reg1);//object2、new关键字 构造函数//var reg2=new RegExp('表达式','修饰符') var reg2=new RegExp('abc','g'); console.log(reg2);二、属性和方法var r
2022-04-20 21:53:48
218
原创 多维数组与字符串
多维数组与字符串一、多维数组1、一维数组var arr=[1,2,3];2、多维数组==数组项==还是数组var arr=[[1,2,3],[4,5],[6,7]]//访问二维数组console.log(arr[0][0]);//结果 1console.log(arr[1][0]);//结果 4//二维数组进行遍历for(var i=0;i<arr.length;i++){//i=0意为多维数组里第一项 for(var j=0;j<arr[i
2022-04-19 18:42:22
474
原创 数组的方法
一、数组的方法var a=[1,2,3,4]var b=[5,6,7,8,9]var c=['A','B','C']1.every()检测数值元素的每个元素是否符合条件 console.log(a.every(function(item){ return item>0 }))2.some()检测数组中是否有元素符合条件 console.log(b.some(function(item){ ...
2022-04-18 23:00:16
92
原创 JS数组的
1.JS数组的对象数组:数的组合(分组)数组对象:使用单独的变量名储存一系列的值,一个容器储存多个元素。数组项:元素typeof返回object,和object相似,但是存储效率比普通对象高var house1="别墅";var house2="公寓";var house3="大平层"//使用数组,将一系列的值进行存储var aHouse=["别墅","公寓","大平层"];2.JS数组的创建(1)字面量var arr=[1,2,3];console.log(arr);
2022-04-17 20:14:44
80
原创 JavaScript对象
JavaScript对象-对象(object)是一个以键值对形式储存属性的集合,每个属性有一个特定的名称,以及与名称相对应的值。这种关系有一个专有名称,称为映射。-万物皆对象-语法:{key:value,key2:value2,...}-JavaScript的对象的值是:属性和方法的数据。一、对象的分类1、内置对象由Es标准中定义的对象,在任何的Es中都可以使用例如:Math Date Array String Number Booleanconsole.log(Math.PI
2022-04-14 19:52:10
733
原创 JavaScript的函数
一、函数的声明1、变量声明 通过var关键字var a=10;2、函数的声明function 函数名(参数){函数体return 返回值}通过function关键字声明func:函数名x:函数的参数{}:函数体 function func(x){ <!--执行的代码--> console.log("这是一个函数") }3、函数的调用 通过函数名调用func();func();func();func
2022-04-13 19:30:41
129
原创 JavaScript的循环
JavaScript的循环循环是将代码执行指定的次数。一、for循环1、for循环for(语句1;语句2;语句3){执行的代码}注:语句1:条件的变量的初始值(代码执行前执行) 只执行一次语句2:循环条件语句3:循环(代码块)已被执行后执行的代码(通常是自增或自减)2案例for (var i = 0; i < 4; i++) { <!--console.log(i,"执行的代码")--> document.write("☆☆☆☆☆&
2022-04-12 19:54:57
2811
原创 JavaScript的运算符
# JavaScript的运算符## 赋值运算符= 变量的赋值## 算数运算符``` + - * / % var a=10,b=3; // + 加 var c=a+b; console.log(c);//13 // - 减 console.log(a-b);//7 // * 乘 console.log(a*b);//30 // / 除 console.log(a/b);//3.3333333333333335...
2022-04-11 20:15:06
175
原创 JavaScript的基础
javascript简介1、JavaScript简称js,最初由网景(现在的Mozilla)公司创建,由于商标冲突原因,其标准版本命名为ECMAScript,JavaScript与java没有任何关系,此外js(JavaScript)和jsp(java servlet pages)也没有关系。 2、js的工作分为两部分,一部分属于js语言本身的特性,而另一部需要依靠宿主环境(web浏览器)才能完成。JS的组成部分JavaScript由ECMAScript(js核心语法部分)DO
2022-04-11 08:51:04
76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人