- 博客(57)
- 收藏
- 关注
RSS订阅原创 npm包基本操作
npm init ：初始化文件npm install 包名：安装（简写 npm i 包名）npm install 包名 -save：开发用 简写 -Snpm install 包名 -save-dev：上线用npm install 包名 -g：全局安装 -y：默认安装npm install 包名@版本号：安装指定版本npm uninstall 包名：卸载（npm remove 包名）npm list -g ：全局列举（不加 -g 列举当前目录下的安装包）npm config get registry：查看n
2022-06-09 16:22:07
695
3
原创 终端操作及npm内置模块
cd.. ：返回上一级cd 文件名：跳转目录cd\ ：返回根目录dir ：显示当前路径下所有的文件cls ：清屏node js文件名 ：执行js文件ctrl+c ：终止程序运行注：在nodejs中使用包，无论要不要下载，都必须导入！fs.readFile("文件路径","编码格式（可省略）",function(err,dataStream){})：用来读取指定文件中的内容（err读取成功返回null）。fs.writeFile("文件路径","写入的内容","编码格式（可省略）",function(err,
2022-06-09 14:30:29
649
原创 nodejs初识
第一种：module.exports.属性名 = 属性值 | module.exports = {属性名}（module是一个对象，有一个属性是exports）。第二种：exports.属性名 = 属性值（exports是一个对象）。第一种：let 集合名 = require('地址'); 集合名.属性名调用。第二种：let {属性名} = require('地址')。在nodejs环境中，每个模块都会包装成一个函数（方法）后运行的console.log(arguments);（arguments 函数内置
2022-06-08 16:35:40
314
原创 cookies
cookie：就是浏览器暂时存储一些数据，在电脑本地上（要在服务器环境下设置才可以，cookie是以站点为单位存储的，不同浏览器之间不可以共用）。设置 cookie：document.cookie = "属性名=属性值"修改 cookie：document.cookie = "属性名=属性值"删除 cookie：document.cookie = "属性名=属性值;expires=" + data.toUTCString() （需设置一个过期的时间data。）。（toUTCString() ：把日期转换为一
2022-06-08 16:19:44
204
原创 节流与防抖
节流 ：在规定的时间内只触发一次let time1 = null;$('.box1').click(function () {let time2 = new Date()if (time2 - time1 >= 2000) {time1 = new Date()console.log('节流');}})节流封装函数： 防抖 ：触发后要停上一定的时间后再次触发let time3 = null;$('.box2').click(function () { let time4 = new
2022-06-08 16:11:06
160
原创 jQuery中Ajax请求及三级联动
发送get请求：$.get("请求地址","传给后端的数据","回调函数","返回的数据类型")发送post请求：$.post("请求地址","传给后端的数据","回调函数","返回的数据类型")实现层级选择，选中省后才能选取相对的市，选中市后才能选取相对应的县/区...
2022-06-08 16:06:11
317
原创 jQuery初识（二）
hover([over,]out)：鼠标移入移出事件（注意： 如果只有一个参数，移出移入都触发）over:鼠标移到元素上要触发的函数out:鼠标移出元素要触发的函数当$( )里面传递的是一个 html 结构字符串，则就是创建元素节点。$("父元素").append(子元素) | 子元素.appendTo("父元素")：把子元素追加到父元素末尾。$("父元素").prepend(子元素) | 子元素.prependTo($("父元素"))：把子元素插入到父元素内容最前面。$("存在元素").after(插入元
2022-06-08 15:58:15
196
1
原创 jQuery初识
jQuery中的变量前面必须加上 $ ，且自带遍历功能（$ 等价于 jQuery）。 <!-- 完整版jQuery --> https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js <!-- 压缩版jQuery --> https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js .html() 设置超文本内容 .val() 设置表单元素内容 .css()
2022-05-30 13:59:07
330
原创 Ajax初识
json语句：json是一种特殊的字符串，可以被任意的语言所使用，并且可以转换成任意语言中的语句。（json创建对象时，属性和属性值必须加上“” 号。） JSON.parse()：json语句转成js语句。 JSON.stringify()：js语句转换成 json语句。 eval()：在执行js语句的时候，直接执行并返回结果。（eval()方法使用的过程中，如果遇到{}，则需要给字符串前后各加一个小括号（），因为他会自动将{}当成一个字符串去执行） 利用ajax获取本地文件 1、创建 ajax
2022-05-24 21:21:01
191
原创 事件委托及正则
事件委托： 1、事件仅绑定在父元素一份。 2、目标元素必须经过判断符合条件，才能指向后续操作。 3、用e.target 代替 替换 this 获得目标元素。 当元素有多个子元素需要绑定一样的事件时，只需要给父元素绑定一次就行。因为子元素会通过事件冒泡找到父元素的事件处理函数，而且后期添加的子元素也可以直接使用父元素事件处理函数。 正则： 正则创建方法： let reg = new RegExp("abc","g") let reg1 = /abc/g 正则表达式的两种测试方法： test
2022-05-24 21:10:59
163
原创 键盘事件及小知识
键盘事件：（一般用于表单和全局） onkeyup： 当键盘在某个HTML元素上弹起的时候触发（优先使用up）。 onkeydown：当键盘在某个HTML元素上按下的时候触发（如果按下不放手，会一直触发）。 onkeypress ： 键盘按下（只支持字符键）只产生字符后才触发。 document.onkeyup = function(){ console.log("我是按下弹起触发的"); } document.onkeydown = function(){ console.log(
2022-05-19 17:37:31
539
原创 事件对象和绑定事件
事件对象： ev事件对象：每一个事件方法都有一个默认的参数，表示事件对象。（IE8的适配：let e = ev || window.event） 获取鼠标位置： clientX和clientY：相对于浏览器可视窗口左上角原点 screenX 和screenY：相对于电脑屏幕的左上角 pageX 和 pageY：相对于页面文档流左上角原点 offsetX 和 offsetY：相对于触发事件的元素 事件绑定有两种方式： 1、传统绑定事件方式：on... // 同一个元素，同一个事件，只能..
2022-05-18 17:32:17
285
原创 事件（鼠标事件）
鼠标事件： 点击事件： onclick 鼠标点击左键触发 ondblclick 鼠标左键双击触发 oncontextmenu 鼠标右击点击事件 离开事件： onmouseout 鼠标离开触发 经过子节点的时候会触发 onmouseleave 鼠标离开触发 进入事件： onmouseover 鼠标经过触发 经过子节点的时候会触发 onmouseenter 鼠标进入 onmousemove 鼠标移动触发 鼠标移入会不停的触发 按下弹起事件： onmousedown 鼠标按下触发 on
2022-05-17 14:29:49
1808
原创 开关思想、创建单元格
开关思想： 定义一个变量，决定一种状态。（我们在获取元素的时候，如果定义是id，则可以直接使用，但是不推荐） <button id = "btn">开关</button> <script> let flag = true btn.onclick = function(){ if(flag){ document.body.style.backgroundColor = "#333"
2022-05-17 14:23:07
163
原创 扩展运算符和this指向排他思想
ES6方法： 扩展运算符： ...（对象不可以直接使用...扩展运算符） 1、把伪类数组转化为真数组。 let lis = document.getElementsByTagName('li'); console.log(lis); console.log([...lis]); 2-1、合并数组 let a = [11, 22, 33]; let b = [44, 55, 66]; let c = [...a, ...b]; console.log(c); 2-2、合并对象 对象中如果有相
2022-05-16 13:43:04
174
原创 添加、删除节点
节点操作： 添加(创建)节点顺序： 1、创建一个空对象 只能用document调用。 let a = document.createElement("a"); 2、为空元素添加关键属性和内容。 a.href = "http://www.baidu.com"; a.innerHTML = "跳转链接"; 3、再将空元素加载到DOM树中，前提是先找到父元素，用父元素调用函数，添加到自己的子元素中。 添加方式： 1、添加（追加）到一个父元素下所有子元素末尾。 document.body.app
2022-05-14 19:55:53
1364
原创 DOM及HTML DOM
元素.setAttribute("属性名"，"属性值");：核心DOM(早期)，现在常用于自定义属性，获取 ：元素.getAttribute("属性名");判断是否包含该属性：元素.hasAttribute("属性名")；。 元素.removeAttribute("属性名");：删除 。 HTML DOM是在早期的基础上进行更新简化的： 1、系统自动提前预设了所有html属性，属性值为“”（空）。 2、后期人们在操作属性时，直接使用 ：元素.属性名， 例如 a1.title = "这是超链接" ；。
2022-05-12 17:19:41
212
原创 DOM补充
父子关系： 节点.parentNode：获取父节点（找到最上层返回是null） parentElement：获取元素和parentNode差不多 父节点.childNode：获取包含文本节点的所有子节点，节点之间的空格也是文本属性（标签间的空白也是文本，但是IE8以下的不会）返回的是伪数组。 children：获取当前元素的所有子元素。 父节点.firstChild：表示当前节点的第一个子节点（获取时也是会获取标签间的空格）。 firstElementChild：获取元素的第一个元素子节点。
2022-05-12 17:13:03
200
原创 BOM补充及DOM获取节点
BOM location：浏览器的地址栏信息。 跳转到新页面： window.location.href = "跳转的网址"； location.assign= "跳转的网址"； location= "跳转的网址"； 刷新当前页面： window.location.reload(); history.go(0); DOM 获取节点方法：（除了获取id不是集合，其他通过类名、通过标签名、通过属性名都为集合，如果想要具体的得使用下标） document.getElementById().
2022-05-10 14:30:22
272
原创 BOM网页相关操作
window.prompt("提示文本"，“默认值”)：弹出一个提示文本。 定时器： setTimeout( 函数，时间)：延迟多少毫秒执行。 setInterval(函数，时间)：间隔定时器，不断重复执行。 关闭定时器：clearTimeout( 定时器返回值)、clearInterval(定时器返回值)。 open打开网页效果： // 一个参数时，只有网址，只要刷新就会打开新页面 window.open("https://www.bilibili.com/"); //二个参数时，每次刷新都
2022-05-09 14:04:22
347
原创 ECMAScript补充
三元表达式：通过？和：来替代if判断。 var cj = +prompt('请输入你的成绩') /* if (cj >= 60 && cj < 80) { alert('恭喜你及格了！') } else if (cj >= 80) { alert('你很优秀！') } else { alert('很可惜，你没有及格！') } */ let a = cj >= 60 && cj < 80 ? '恭喜你及格了！' : (c
2022-05-09 13:50:00
363
原创 JS冒泡、选择排序
冒泡排序：相邻的数据进行两两比较，小数放在前面，大数放在后面，这样一趟下来，最小的数就被排在了第一位，第二趟也是如此，如此类推，直到所有的数据排序完成。 口诀：双层 for 循环，一层减一次，里层减外层，变量相交换 (目的：比较数组中的数值大小)。 <script> let arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; for (let i = 0; i < arr.length - 1; i++) { for (let
2022-05-06 14:20:28
370
原创 ES6数组方法
数组遍历方法： let arr = [1, 2, 3, 4, 5]; /* 第一种遍历方法 */ for (var i = 0; i < arr.length; i++) { console.log(arr1[i]); } /* 第二种遍历方法 */ for (var j in arr) { console.log(arr[j]); } /* 第三种遍历方法 */ arr.forEach(function (a, b, arr) { console.log('数值' + a,
2022-05-05 15:14:50
890
原创 JS改变this指向及工厂、构造函数
改变this指向：（继承构造函数原型对象中的方法，要放在所有原型对象方法的上面） 函数名.call( ); 第一个参数必须是指定的对象，方法的原参数，挨个放在后面。 函数名.apply( ); 第一个参数：传入该函数this执行的对象，传入什么强制指向什么，第二个参数开始：数组，把放原有的参数放在一个数组中。 函数名.bind( ); bind用法和call()一样，直接运行方法，但bind返回为新的方法，然后重新调用。 // 无参情况下call function fun(){ consol
2022-05-04 13:36:07
380
原创 JS箭头函数、this及BOM屏幕宽高
浏览器窗口封装： function innerWh (){ return { width:document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth, height:document.documentElement.clientHeight || document.body.clientHeight
2022-05-03 17:44:12
259
原创 JS函数细节作用
函数： 函数调用两种方法： 按钮调用：<button onclick="fn()"></button> 函数名直接调用：fn() 传递函数两种方法： 按钮里传递：<button onclick="fn(a，b)"></button> 函数名里直接传参：fn(a，b) 变量： 全局变量：在函数外声明的变量，网页上的所有脚本和函数都能访问它。 作用域：在全局中都能被访问。（所有window对象的属性拥有全局作用域，所有末定义直接赋值的变量自动声明
2022-04-30 11:44:50
218
原创 JS中的Math对象
Math：用于执行数学任务。 Math.ceil()：对小数进行上舍入。 Math.floor()：对小数进行下舍入。 Math.round()：把数四舍五入为最接近的数。 Math.random()：返回0.0~1.0之间的随机数（包括0，不包括1）。 (Math.floor(Math.random() * (max - min+1)) + min; //含最大值，含最小值) (Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小
2022-04-28 13:48:53
214
原创 JS中String属性
trim()：字符串中去除字符左右两边的空格（不能去除字符里面的空格）。 两种校验是否为空的方法： let a = prompt('请输入正确的信息'); /* 第一种校验不能为空的方式 包括如输入空格 */ if(a.trim()==''){ alert('输入不能为空') } /* 第二种校验不能为空的方式 包括如输入空格*/ if(!a.trim().length){
2022-04-27 15:48:16
226
原创 JS中String字符串
String：创建字符串对象。 let str = new String('xxx') /*对象类型*/ let str = 'xxx' /*字符串类型*/ concat()：字符串拼接。 replace()：字符串替换（第一个属性是要替换的，第二个属性是换成什么）（第一个属性可使用正则来进行替换：/\d/g）（第二个属性可使用function (v, i)便于以后进行if等判断）。 split()：字符串转换为数组。 lastIndexOf()：从后往前数，找到第一个值就返回其下标。 m
2022-04-26 14:56:24
857
原创 JS中Date对象及String字符串
Date： 用于处理日期和时间。 let oDate = new Date(); 表示构建一个当前时间对象。 let oDate = new Date('2022/4/4 4:44:44'); 表示构建一个指定时间对象。（格式必须是字符串的类型。）（月 日，年、年，月，日、年，月，日等。） Date.getFullYear()：年份。 Date.getMonth()：月份（0-11，0代表1月份）。 Date.getDate()：日期。 Date.getHours()：小时 (0-23)
2022-04-25 14:22:14
915
原创 JS数组小知识
concat：合并数组。 arr1.concat(arr2) pop：删除数组的最后一项（会返回后面删除的那一项）。 arr.pop(); shift：删除数组最前面一项（会返回前面删除的那一项）。 arr.shift(); unshift：在原数组前面添加一项（会返回新数组的长度）。 arr.unshift('保时捷'); splice：指定位置添加删除，共有三个参数：第一个，所在数组的位置（索引）、第二个，删除几个、第三个，添加的内容。 // 删除（会返回后面删除的那些项组成
2022-04-23 20:12:46
385
原创 JS对象及数组
对象：JavaScript对象是带有属性和方法的特殊数据类型。可分为：内置对象和自定义对象。 内置对象： Array：用于在单独的变量名中存储一系列的值。 Date：用于操作日期和时间。 String：用于支持对字符串的处理。 Math：用于执行常用的数学任务，它包含了若干个数字常量和函数。 自定义对象： 语法：let 对象 ={ } 给对象添加属性：对象.属性 = 属性值，删除一个对象的属性：delete 对象.属性。 小练习：（增加，删除对象属性） let ht = {
2022-04-22 14:43:52
1284
1
原创 JS循环及调试
break：终止某个循环，使程序跳到循环块外的下一条语句，在循环中位于break后的语句将不再执行。 for(var i=1;i <= 5;i++){ let num = parseInt(prompt('输入第' + i + '人的成绩')); if(num < 0){ document.write('第' + i + '名的成绩为输入有误，请重新输入！' + '<br>');
2022-04-21 14:45:37
577
原创 while循环和函数
while循环： //当循环条件为true时，执行循环体， //当循环条件为false时，结束循环。 //初始部分 while(循环条件){ //循环操作：需要循环执行的语句 //变化部分 } do-while循环： （特点：特点是不管条件成不成立，都会执行一次。） do{ //循环操作; //变化部分 }while(循环条件); 循环的优势：1、解决重复操作。2、减少代码编写量，使代码结构清晰。3、增强代码的可读性。 多重循环★：1、各循环可互相嵌套。2、...
2022-04-20 15:26:24
1004
原创 JS变定量及for循环
先使用变量，后再使用var定义变量，会出现变量提升，在开始会给变量一个初始值undefined。es6新声明变量关键词 let ，使用let不能重复声明同一变量。（使用let不存在变量提升，需先定义变量，再使用变量，否则会报错。） document.write(str); var str = '123'; //let str = '123' es6提供声明常量的关键字 const，常量不可改变。（注：给常量重新赋值会报错。） const str = '123'; // str = '456';
2022-04-19 17:05:32
370
原创 js输出语句及选择结构
逻辑运算符： &&(与号) 、||(或号)、!(取反)。 输出语句： 在页面中打印：document.write('我打印了'); 弹出框：alert('我弹出了'); 控制台普通打印：console.log('我在控制台打印了')； 控制台打印一个错误提示：console.error('你错了，原因是。。。'); 控制台打印一个警告提示：console.warn('警告你不能乱踩花草树木'); 控制台打印一个详细提示 console.info('详细提示'); 开始计算..
2022-04-18 16:10:27
202
原创 JS数据类型及运算
JavaScript：是一种是一门编程语言，基于对象和事件驱动的脚本语言。（html:控制网页的结构、css：控制网页的样式、js：控制网页的逻辑 。） 组成：ECMAScript： JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关、DOM：一套操作网页元素的API、BOM：一套操作浏览器功能的API。 书写位置：1、写在script标签中。2、引入一个js文件。3、写入行内样式里。 var声明变量：var age; 变量
2022-04-16 20:37:57
670
原创 水平垂直居中
实现行内元素实现水平和垂直居中的方式： text-align: center; line-height: Xpx; 实现元素的水平和垂直居中的几种方式： 1、使用弹性盒模型 实现水平和垂直居中。 display: flex; justify-content: center; align-items: center; 2、采取绝对定位配合margin的方式实现。（得设置固定的宽度和高度。） position: absolute; left: 50%; top: 50%; margin-
2022-04-15 15:29:41
435
原创 媒体查询及响应式布局
@media： 通过对属性进行验证，确认是否被选中，添加样式。 screen：就表示所有的电子设备的屏幕、print：表示打印机的屏幕、all：表示所有、and：和，两个条件之间需添加（前后需要添加空格）。 max-width： 表示小于等于这个宽度的时候 屏幕显示、min-width： 表示大于等于这个宽度的时候 屏幕显示。 小知识点： meta name="viewport" 理想视口。 width=device-width 显示的宽度为设备的宽度。 initial-scale=1.0 是否
2022-04-14 15:23:48
320
原创 Flex弹性布局（二）
align-content：统一设置所有的多轴交叉轴定位对齐方式。（当换行时，会出现多个交叉轴，属性值会定义每行相对于本行的交叉轴的定位。） align-content: flex-start; start对齐。 align-content: flex-end; end对齐。（其他属性值类似于justify-content: ;。） align-self: 在一根轴线下允许单个项目的对齐方式与其他统一的对齐方式不一样。（属性值类似于justify-content: ;。） order： 设置排列
2022-04-13 14:53:44
223
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人