- 博客(49)
- 收藏
- 关注
RSS订阅原创 JavaScript的基础内置对象、基本数据类型
内置对象 Math、 Date 、Array、StringMath 对象日期对象 Date// 获取当前时间必须实例化var now = new Date();// 获取指定时间的日期对象var future = new Date('2019/5/1');注意：如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象通过Date实例获取总毫米数 总毫秒数的含义 基于1970年1月1日（世界标准时间）起的毫秒数 获取总毫秒数// 实例化Date对象va
2022-02-27 21:52:16
220
原创 JavaScript基础---变量作用域、对象
作用域作用域概述通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。全局作用域作用于所有代码执行的环境(整个script标签内部)或独立的js文件局部作用域作用于函数内的代码环境，就是局部作用域，因为跟函数有关系，所以也称为函数作用域。jS没有块级作用域块作用域由 { } 包括变量的作用域全部变量-在全局作用域下声明的变量叫做全局变量（在函数外部定义
2022-02-27 21:12:17
114
原创 JavaScript基础--数组、函数
数组数组的概念数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。创建数组利用 new 创建数组var 数组名 = new Array() ；var arr = new Array(); // 创建一个新的空数组利用数组字面量创建数组//1. 使用数组字面量方式创建空的数组var 数组名 = []；//2. 使用数
2022-02-27 20:22:06
103
原创 JavaScript基础--变量、运算符
JavaScript组成ECMAScriptECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展,规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。DOM——文档对象模型文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程
2022-02-27 19:42:29
757
原创 Bootstrap
Bootstrap引入相关样式文件<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">bootstrap布局容器Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。.container响应式布局的容器 固定宽度大屏 ( >=1200px) 宽度定为 1170px中屏 ( >=992px) 宽
2022-02-27 16:47:19
43
原创 rem布局
rem (root em)是一个相对单位，类似于em，em是父元素字体大小，rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。媒体查询什么是媒体查询媒体查询（Media Query）是CSS3新语法。使用 @media查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染.
2022-02-27 16:14:50
51
原创 flex布局
flex 父级常见属性flex-direction：设置主轴的方向justify-content：设置主轴上的子元素排列方式flex-wrap：设置子元素是否换行align-content：设置侧轴上的子元素的排列方式（多行）align-items：设置侧轴上的子元素排列方式（单行）flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrapflex-direction 方法及属性justify-content 设置主轴上的子元素排列方式f
2022-02-27 11:38:49
94
原创 移动web流式布局
meta标签移动端大量使用 CSS3盒子模型box-sizing传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + paddingCSS3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 paddingCSS3中的盒子模型， padding 和 border 不会撑大盒子了/CSS3盒子模型/box-sizing: border-box;/传统盒子模型/box-sizing: content-box;移动端单独制
2022-02-27 11:21:16
134
原创 html5
h5 拓展了哪些内容语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成h5 新增标签多媒体标签- 音频 – audio- 视频 – video
2022-02-25 16:39:05
94
原创 css基础
1.css类型行内样式（内链样式）内嵌样式（内部样式表）外部样式表（外链式）2. css选择器标签选择器（p等）、类选择器（class）、id选择器（id）、通配符选择器（*）3.复合选择器后代选择器：父级 子级{属性:属性值;属性:属性值;}子元素选择器：父级 >子级{属性:属性值;属性:属性值;}交集选择器：标签.class选择器 eg： p.one并集选择器：各个选择器通过,连接而成的，通常用于集体声明 eg： .one, p , #test {color: #F00
2022-01-11 20:58:13
145
原创 axios 及proxy 代理
aoxis 封装请求安装依赖npm install axios全局的 axios 默认值axios.defaults.baseURL = ‘https://api.example.com’;axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;自定义实例默认值//
2021-09-28 09:34:30
1029
原创 数组遍历 map for-in for-of forEach
mapnames = [1,2,3,4]for-infor ( k in var arr){arr[k] //属性k//遍历序列}for-offor(let value of arr) {});forEacharr.forEach(()=>{})效率比较图
2020-10-12 14:31:41
78
原创 表单数据绑定
input、textarea 表单数据绑定text 和 textarea 元素使用 value property 和 input 事件使用v-model进行数据绑定checkbox 和 radio 使用 checked property 和 change 事件select 字段将 value 作为 prop 并将 change 作为事件修饰符...
2020-08-12 14:30:55
340
原创 vue的input 输入框数据绑定
checkbox如果是单个数组绑定 使用布尔值 为checked的值如果是多个数组绑定使用数组 数组内容为value值
2020-06-28 17:30:21
2477
原创 事件处理------self stop once prevent
.self.self只执行直接作用在该元素身上的事件，所以它相当于忽略了 其他元素的冒泡或者捕获事件。但是这种忽略只局限于自身。.stop.stop 阻止冒泡事件.once.once 事件只执行一次.prevent.prevent 阻止默认事件 如a链接的跳转事件...
2020-06-28 17:14:46
60
原创 数组变化的改变的检测
数组对象的添加与修改push pop shift unshift splice sort reverse 会自动检测发生数据改变filter concat slice map 数组不能检测到数组发生改变 要使用set 或splice 进行替换即可检测
2020-06-28 16:47:47
598
原创 flex弹性合布局
flex 弹性盒布局采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴【辅轴】（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主
2020-06-18 10:44:33
107
原创 vue基础
1. 引入vue.js下载vue.js文件远程使用<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2. 创建Vue对象el : 指定根element(选择器)data : 初始化数据(页面可以访问)methods:方法computed：计算 在属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果$watch() :监视属性,通过通过vm对象的或watch
2020-05-31 17:06:14
125
原创 模板 art-template
1. 第一个模板const template = require('art-template');const path = require('path');const views = path.join(__dirname, 'views', '01.art');const html = template(绝对路径, { name: '张三', age: 20, content: '<h1>我是标题</h1>'})console.log(html);2 模板
2020-05-26 20:58:01
96
原创 moogodb 创建数据create 查找 find 验证 type 与 集合关联 mongoose.Schema.Types
数据库连接// 引入mongoose第三方模块 用来操作数据库const mongoose = require(‘mongoose’);// 数据库连接mongoose.connect(‘mongodb://localhost/playground’, { useNewUrlParser: true})// 连接成功.then(() => console.log(‘数据库连接成功’))// 连接失败.catch(err => console.log(err, ‘数据库连接失败’)
2020-05-26 20:26:59
465
原创 sever async promise router
1.服务器搭建const http = require(‘http’);const app = http.createServer();app.on(‘request’, (req, res) => { //响应}）app.listen(3000);console.log(‘服务器启动成功’)2.引入模块const url = require(‘url’);//url模块const path = require(‘path’);//路径模块const fs = require(‘fs
2020-05-26 19:59:29
66
原创 gulp
gulp 插件主要用做文件压缩js css等使用方法gulp.task(‘任务名称’，()=>{gulp.src('绝对路径‘).pipe(gulp.dest(‘处理后存放位置’))})引用gulp模块const gulp = require('gulp');const htmlmin = require('gulp-htmlmin');const fileinclude = require('gulp-file-include');const less = require('gu
2020-05-26 18:46:36
76
原创 exports 与 module.exports readFile 与 writeFile path
exports暴露出方法让想调用的人requireconst add = (n1, n2) => n1 + n2;exports.add = add;const a = require('绝对路径');console.log(a.add(10, 20));module.exportsconst greeting = name => `hello ${name}`;const x = 100;exports.x = x;module.exports.greeting = g
2020-05-26 17:48:52
126
原创 es6基础
1.let const var 关键字/* --------let关键字就是用来声明变量的-------- */ // let a = 10; // console.log(a);/* --------使用let关键字声明的变量具有块级作用域-------- */ // if (true) { // let b = 20; // console.log(b) // if (true) { // let c = 30; // } // console.log(c); //
2020-05-26 16:43:57
86
原创 javascript 表单验证RegExp正则表达式
1. 正则表达式在js中的使用 // 1. 利用 RegExp对象来创建 正则表达式 var regexp = new RegExp(/123/); console.log(regexp); // 2. 利用字面量创建 正则表达式 var rg = /123/; // 3.test 方法用来检测字符串是否符合正则表达式要求的规范 console.log(rg.test(123)); console.log(rg.test('abc'));2
2020-05-26 16:23:21
130
原创 JavaScript高级——构造函数创建对象
1.构造对象// 1. 利用 new Object() 创建对象var obj1 = new Object();// 2. 利用 对象字面量创建对象var obj2 = {};// 3. 利用构造函数创建对象function Star(uname, age) {this.uname = uname;this.age = age;this.sing = function() {console.log(‘我会唱歌’);}}var ldh = new Star(‘刘德华’, 18);v
2020-05-26 16:10:21
325
原创 JavaScript高级——类
1.创建类 <script> // 1. 创建类 class 创建一个 明星类 class Star { constructor(uname, age) { this.uname = uname; this.age = age; } } // 2. 利用类创建对象 new var ldh = new Star('刘德华', 18); var zxy = new S
2020-05-26 15:15:20
57
原创 $.each()和$().each(),以及forEach()的用法
forEach() 是JS遍历数组的方法复制代码var arr=[1,2,3];arr.forEach(function(val,index,arr){// var 为数组中当前的值// index 为当前值得下标// arr 为原数组arr[index] = 2*val;})console.log(arr); //结果：修改了原来数组，为每个数乘以2复制代码forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。复制代码点我数组元素总和：复制代码注意:
2020-05-25 14:39:59
173
原创 jQuery基本方法
dom 对象与jQuery对象DOM 对象： 用原生js获取过来的对象就是DOM对象var myDiv = document.querySelector(‘div’); // myDiv 是DOM对象var mySpan = document.querySelector(‘span’); // mySpan 是DOM对象console.dir(myDiv);jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装$(‘div’); // $
2020-05-23 17:29:42
108
原创 javascript 与 jQuery添加类的区别
jueryscript<div class="one two"></div><button> 开关灯</button><script> // classList 返回元素的类名 var div = document.querySelector('div'); // console.log(div.classList[1]); // 1. 添加类名 是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
2020-05-23 16:46:49
77
原创 jquery与javascript加载区别
javaScript$(windows).on(‘load’,function(){})jQuery$(function() { })页面DOM结构加载完执行$(document).ready(function() {}
2020-05-23 16:33:05
83
原创 浏览器缓存 localStorage 与sessionStorage
存储方式均是以键值对形式存储添加存储setItem(‘名称’,‘值’)获取存储getItem(‘名称’)删除存储removeItem（‘名称’）清空缓存(清除所有记录)clear()sessionStorage 关闭浏览器后失效 <input type="text"> <button class="set">存储数据</button><button class="get">获取数据</button><button c
2020-05-23 16:24:04
165
原创 阻止鼠标右键和选中页面文字功能
阻止鼠标右键contextmenu 我们可以禁用右键菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault(); })禁止选中文字禁止选中文字 selectstart document.addEventListener('selectstart', function(e) { e.preventDefault(); }
2020-05-21 17:40:44
104
原创 JavaScript事件委托
事件委托原理不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上 然后利用冒泡设置每个子节点 防止代码重复<ul> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹
2020-05-21 17:34:43
67
原创 阻止冒泡
<div class="father"> <div class="son">son儿子</div></div><script> // 常见事件对象的属性和方法 // 阻止冒泡 dom 推荐的标准 stopPropagation() var son = document.querySelector('.son'); son.addEventListener('click', function(e) {
2020-05-21 17:30:31
68
原创 阻止默认跳转等行为
preventDefault 传统模式使用 return false阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交var a = document.querySelector(‘a’);a.addEventListener(‘click’, function(e) {e.preventDefault(); // dom 标准写法})传统的注册方式a.onclick = function(e) {// 普通浏览器 e.preventDefault(); 方法// e.preve
2020-05-21 17:28:01
190
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人