- 博客(32)
- 资源 (7)
- 收藏
- 关注
RSS订阅原创 我的前端自学 JQuery中的Ajax
一、JQuery中提供了$.ajax()方法用于发送ajax请求，在发送ajax请求时，只要调用这个方法就可以了，在方法中需要传递一个对象作为参数，这个参数就是用来配置ajax请求的。$.ajax({ // 请求方式 type: 'get', // 请求地址 url: '/test', // 请求数据 如果需要发送JSON字符串数据类型则需要转换成字符串 JSON.stringify({uername: '张三', age: 18}) data: { uername: '张三', age:
2021-03-20 14:12:24
428
原创 我的前端自学 express框架
（一）概述Express是一个基于Node平台的web网页开发框架，它提供了一系列强大的特性，帮助你创建各种web应用。我们可以用npm install express命令下载它。Express框架特性：1 .提供了方便简洁的路由定义方式(router模块就是从express框架中抽取的)2 .对获取http请求参数进行了简化处理3 .对模板引擎支持程度高，方便渲染动态HTML页面4 .提供了中间件机制，有效控制http请求5 .拥有大量第三方中间件对功能进行扩展...
2021-03-13 16:16:17
348
原创 我的前端自学 node 模板引擎 art-template
（一）概述art-template模板引擎是为了代替服务器端以字符串拼接的方式响应资源的解决方案，它是node的一个第三方模块。下载命令：npm install art-template引入资源： const template = require(“art-template”);创建模板数据：const html = template(“模板路径”, { 数据 })；注意，模板路径一定要是绝对路径，模板文件的格式为artconst path = require("path");const te
2021-03-10 23:43:39
131
原创 我的前端自学 node.js基础(三)
（一）数据库相关以及环境搭建1 .数据库相关概念database； 数据库collection： 集合，一组数据的集合document： 文档，一条具体的数据field： 字段，文档中的属性名称2 .mongoose第三方包使用node操作mongodb数据库需要依赖的第三方包。①数据库连接 mongoose提供的connect方法connect方法的第二个参数根据版本需求选择传入或者不传入,如果要访问的数据库不存在，会自动创建const mongoose = require("mon
2021-03-05 19:52:33
97
原创 我的前端自学 node.js基础(二)
（一）服务器端基础概念1 .URLURL的组成：传输协议://服务器IP或域名:端口/资源所在位置标识http://astro.sina.com.cn/focus/leo/http:超文本传输协议，提供了一种发布和接收HTML页面的方法2 .本机域名localhost 127.0.0.1（二）创建web服务器创建web服务器要用到系统模块http，使用系统模块http下面的createServer方法，返回一个服务器对象，为服务器对象绑定事件处理，对请求做出响应，最后监听服务器端口
2021-03-02 00:36:11
122
1
原创 我的前端自学 ES6
（一）ES6中的新增语法1 . letlet关键字是ES6中新增的用于声明变量的关键字，用来代替 var①使用let关键字声明的变量具有块级作用域（一对大括号{}产生的作用域，块级作用域中的变量只能在同一个作用域内访问）if (true) { let a = 0; let b = 0; if (true) { console.log(a); // 0 } } console.log(b) // b is not defined②使用let声明的变量没有变量提升,必须先声
2021-02-23 15:21:47
88
原创 我的前端自学 正则表达式
（一）概述正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JS中，正则表达式也是对象。正则表达式通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。（二）正则表达式在javascript中的使用1 .创建正则表达式在JS中可以通过两种方式创建正则表达式①通过调用
2021-02-22 14:14:43
123
原创 我的前端自学之路 JavaScript面向对象
（一）概述1 .两大编程思想①面向过程POP面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步的实现，使用的时候再一个个调用。面向过程的性能比面向对象要高一些，适合和硬件联系比较紧密的东西，比如单片机。②面向对象OOP把事物分解成一个个的对象，然后由对象之间分工与合作。每一个对象都是功能中心，具有明确的分工。面向对象编程具有灵活，代码易复用，容易维护和开发的优点，更适合多人合作的大型软件项目。2 .面向对象的特性：①封装性②继承性③多态性（二）对象和类的关系1 .对象
2021-02-20 11:47:26
113
原创 我的前端自学 jQuery基础（二）
（一）jQuery事件1 .jQuery事件注册①单事件注册，单事件注册无法注册给未来动态创建的元素element.事件名(function(){})2 .jQuery事件处理①on 绑定事件语法：element.on(events, [selector], fn);events:事件类型，一个或多个用逗号分隔的事件字符串，如"click"，“mouseenter”selector：事件绑定元素的子元素选择器fn： 回调函数// 事件结果不一致$(".demo").on({ m
2021-02-05 17:29:25
71
原创 我的前端自学 jQuery基础（一）
（一）概述jQuery是快速、简洁的JavaScript库（library），是一个封装好的特定的集合（方法和函数），就是为了快速方便的操作DOM。（二）jQuery入口函数①等待页面DOM加载完毕再执行JS，传统写法$(document).ready(function() { JQueryCode })②更为简洁的写法,相当于原生JS中的DOMContentLoaded$(function() { JQueryCode })（三）jQuery顶级对象 $1 . $ 其实是JQuery的
2021-01-31 13:08:19
198
7
原创 2021-01-27 本地存储
（一）概述随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。（二）本地存储的特性1 .数据存储在用户浏览器中2 .设置、读取方便，设置刷新页面不丢失数据3 .容量较大，sessionStorage约5M，localStorage约20M4 .只能存储字符串可以将对象JSON.stringify编码后存储（三）1 .window.sessionStorage特性：①生命周期为关闭浏览
2021-01-27 21:32:09
112
原创 2021/01/27 JS高级 移动端网页特效
（一）触屏事件1 .常用触屏touch事件①touchstart:当手指触摸到一个元素时触发②touchmove:当一个元素被拖动时触发③touchend:当手指离开被触摸的元素时触发2 .触摸事件对象TouchEventTouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）上的状态变化的事件，这类事件用于描述一个或者多个触点，使开发者可以检测触点的移动，触点的增加和减少等等。①常用触摸列表touches：正在触摸屏幕的所有手指的列表targetTouches：正在触摸当前DOM
2021-01-27 20:20:24
199
原创 2021/01/24 JS高级 PC端网页特效
（一）元素偏移量 offset系列offset概述：offset系列相关属性，可以动态的得到该元素的位置（偏移）、大小等。1 .可以获取元素距离带有定位父元素的位置。返回的数值不带单位2 .获得元素自身的大小（宽度、高度）。返回的数值不带单位3 .offset 和 style 的区别...
2021-01-24 23:23:46
96
原创 2021/01/14 JS初级 WebApis（二）
浏览器对象模型 BOM（一）BOM概述BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window.BOM由一系列的对象构成，并且每个对象都提供了一系列的方法和属性。BOM的构成：①window对象是浏览器的顶级对象，它具有双重角色。1 .它是JS访问浏览器的一个接口2 .它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法（二）BOM对象常见的事件①窗口加载事件： loadwindow.onload(window.ad
2021-01-14 19:16:02
91
原创 2021/01/12 JS初级 WebApis（一）
文档对象模型 DOM文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些接口，我们可以改变页面的内容、结构和样式。（一）获取元素①getElementById(id); 参数id是大小写敏感的字符串获取带有指定ID的元素对象。var IdName = document.getElementById('IdValue');②getElementsByTagName()获取带有指定标签名的对象的集合。以伪数组的形式来存储var Tag
2021-01-12 20:16:06
133
原创 2021/01/08 JS基础 ECMASCRIPT（三）
（一）对象对象可以分为两种：一种是“自定义对象”；另外一种是“内置对象”。自定义对象，指的是需要我们自己定义的对象，跟“自定义函数”是一样的道理；内置对象，指的是不需要我们自己定义（即系统已经定义好的）、可以直接使用的对象，跟“内置函数”也是一样的道理。① 字符串对象：String首先注意一点，字符串所有的方法都不会改变字符串自身，操作完成后会返回一个新字符串。1 .获取字符串的长度（前面用过很多次了）string.length;length应用:利用字符串对象获取一串数字的长度functi
2021-01-09 12:01:44
136
原创 2021/01/06 JS基础 ECMASCRIPT（二）
（一）数组1 .数组的含义：数组就是一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任意类型的元素，数组是将一组数据存储在单个变量名下的优雅方式。2 .数组的创建方式：通过new关键字来创建数组，var arr = new Array();//创建一个空数组var array = new Array(1, 2, 3, 4);//创建一个有初始元素的数组通过字面量来创建数组，var arr = [];//创建一个空数组var array = [1, true, '字符串', 4]
2021-01-06 20:47:55
104
原创 2021/01/04 JS基础 ECMASCRIPT（一）
浏览器的组成部分渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，以及老版本的webkitJS引擎：也叫JS解释器，用来读取网页中的JS代码，对其处理后再运行，比如chrome的V8JS的组成部分1 .ECMAscript，JS基础指的就是这部分，它规定了JS的编程语法和基础核心2 .DOM，文档对象模型，是W3C组织推荐的扩展编程语言的标准编程接口3 .BOM，浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构JS书写方式：1 .行内式
2021-01-04 20:49:58
256
原创 我的前端自学元旦第一天：响应式开发、bootstrap
响应式开发的原理：同一张页面，使用媒体查询，针对不同宽度的设备（PC、Pad、移动端）进行布局和样式的设置，从而达到适配不同设备的目的。响应式开发中的设备类型划分：（比较常用分法，视实际情况）超小屏幕：设置宽度为100%小屏幕： 设置宽度为750px中等屏幕：设置宽度为970px大屏幕： 设置宽度为1170px响应式布局容器响应式需要一个父级来做布局容器，配合子级元素来实现布局效果。就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的布局方式和大小。布局容
2021-01-01 22:26:28
100
原创 我的前端自学之路2020/12/31 rem适配布局
rem单位：rem（root rem）是一个相对单位，类似于em，em是父元素字体大小，不同的是rem是基于html元素的字体大小。比如根元素（html）设置字体大小font-size=12px，非根元素设置width： 2rem；则表示非根元素宽度为24px。rem的优点就是可以通过修改页面根元素的文字大小来整体控制页面元素的大小。媒体查询：媒体查询（media query）使用@media查询，可以针对不同的媒体类型，定义不同的样式。针对不同的屏幕尺寸，设置不同的样式，在浏览器重置大小的过程中，
2020-12-31 17:52:36
314
原创 我的前端自学之路2020/12/30移动端
移动WEB开发目前国内的移动端浏览器基本是根据webkit修改来的内核，所以兼容移动端的主流浏览器，处理webkit内核即可。常见移动端屏幕尺寸以及dpr视口viewport就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。理想视口：idea viewport为了使网站在移动端有最理想的浏览和阅读宽度而设定，需要手动填写meta视口标签来通知浏览器操作，mata视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽。
2020-12-30 18:52:55
133
原创 我的前端自学之路2020/12/29C3动画
CSS3 2D变形 transform元素移动：translate1 .定义2D转换中的移动，沿着X轴和Y轴移动元素2 .translate最大的优点，不会影响到其他元素的位置3 .translate中的百分比是相对于元素自身大小来说的4 .对行内标签没有效果section { transform: translate(10px, 20px);}section { transform: translate(50%， 50%);}section { transform: transl
2020-12-29 21:00:55
155
原创 我的前端自学之路2020/12/28
H5新增的多媒体标签：音频 audio<!-- 兼容 --><audio controls="controls" autoplay="autoplay" loop="loop"> <source src="./xxx/xxx.mp3" type="audio/mpeg" /> <source src="./xxx/xxx.ogg" type="audio/ogg" /> 此浏览器不支持音频</audio>显示控件：controls
2020-12-28 14:29:43
88
原创 我的前端自学之路2020/12/27
作业做了6天了，基本上接近尾声，接着学后面的课程。过渡（CSS3）transition是CSS3中具有颠覆性的特征之一，我们可以在不使用flash动画或者JS的情况下，当元素从一种样式变化为另一种样式时，为元素添加效果。过渡：是从一个状态渐渐的过渡到另一种状态。它可以让页面更具动感，IE9以下版本不支持，但是不影响整体布局。我们经常和hover一起搭配使用。语法格式：transiton: 要过渡的属性 花费时间 运动曲线 何时开始;通常情况下，为了方便，要过渡的属性通常写做all时间，单
2020-12-27 20:34:47
95
原创 我的前端自学之路2020/12/21
作业写了两天了，只写了个首页，还没写完(￣▽￣)"，单纯学知识点的时候感觉挺简单的 ，实际上手做起来真的有种无从下手的感觉，今天写写这两天遇到的问题。1.结构，由于还没有学交互，所以就不知道结构怎么才能方便之后写交互，暂时就怎么能拼出样子来怎么写了ε=ε=ε=(￣▽￣)2.类名…起类名真是个麻烦事啊，这时候是真后悔自己当初没有好好学英语了，为了不至于写拼音，只能常备百度翻译。3.还是结构，对相关性理解的不透彻，写着写着就开始扣细节了，比如登录和注册，根据相关性应该放在同一个父元素li里包含两个a就可以
2020-12-21 16:41:04
77
原创 我的前端自学之路2020/12/19
CSS精灵技术目的：为了有效减少服务器接收和发送请求的次数，提高页面加载速度精灵图（sprite）其实是将网页中的一些背景图片整合到一张透明背景的大图中，当网页元素需要不同位置的小图时，再通过背景图片的位移属性精确定位到小图的位置。1.精灵图在使用时，位置和大小必须测量准确。2.精灵图在移动时，x轴和y轴的值，基本上都是负的。CSS滑动门技术目的：为了使各种形状的背景能够自适应元素中文本内容的多少，背景图片能够自动根据内容的多少实现拉伸和紧缩。结构：a标签包含span标签（整个导航栏都是可以点
2020-12-19 15:41:08
89
4
原创 我的前端自学之路2020/12/18
CSS书写顺序遵循以下顺序：1.布局定位属性：display/position/float/clear/visibility/overflow(display第一个写，毕竟关系到布局模式)2.自身属性： width/height/margin/padding/border/background3.文本属性： color/font/text-decoration/text-align/vertical-align/white-space/break-word4.其他属性： content/curso
2020-12-18 15:36:00
78
2
原创 我的前端自学之路2020/12/17
背景位置：background-position1.当两个值都是预定义方位名词时：水平靠左，垂直居中：backgroung-position：left center；（两个值的位置不影响效果）水平居中，垂直靠上：background-position：center top；（页面超大背景图的写法，适配不同分辨率）其他位置同理。2. 当两个值都是具体位置时：background-position: 10px 50px；第一个值为X轴，第二个值为Y轴，两个值的位置直接影响最终结果3.当两个值
2020-12-17 23:38:56
92
原创 我的前端自学之路2020/12/16
一. 列表标签无序列表 ul>li有序列表 ol>li自定义列表 ol>dt+dd二. 表单 input、label、textarea一个完整的表单通常由三部分组成，表单控件（元素）、提示信息和表单域forminput:<input type="text" value="" name="" />name属性：提交后台时，用于区分表单value 属性：默认文本值，一般用placeholdertype属性： text 文本password 密码ra
2020-12-16 21:29:16
115
原创 我的前端自学之路2020/12/15
2020/12/15 第一天HTML部分（超文本标记语言）一.网页中web标准的三层组成结构： 用于对网页元素进行整理的分类，主要为HTML表现： 用于修改网页元素的颜色、大小、样式等外观样式，主要指CSS行为： 网页模型的定义和交互，主要为javascript二.HTML基本骨架结构<html> <head> <meta /> <title><title /> </head> <body>
2020-12-15 20:53:13
117
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人