前端知识点
文章平均质量分 68
前端知识点
sam80000
这个作者很懒,什么都没留下…
展开
-
vue小demo- 简单实现选项卡
<!DOCTYPE html><html lang="zh-cn"><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-03-11 20:57:13 · 56 阅读 · 0 评论 -
node.js——express 极简web开发框架
express web开发框架一、简介二、操作命令三、express 方法1.use()2.Router() 创建路由路由协议的语义方法-提交方法3.body-parser模块4.利用 Express 托管静态文件四、rmvp 模型五、template engine 模板引擎1.art-template2.使用和配置3.在浏览器中使用art-template六、JWT一、简介基于 Node.js 平台,快速、开放、极简的 Web 开发框架。二、操作命令初始化项目,创建package.json 文件原创 2021-12-09 10:10:12 · 365 阅读 · 0 评论 -
Node.js 如何使用
学习路径引用https://www.bilibili.com/video/BV1QT4y1A7NR?p=1一、了解Node.jsNode.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.Node.js 是一个开源和跨平台的 JavaScript 运行时环境,运行在服务器端。可以解析js代码,没有浏览器安全级别的限制,提供了很多系统级别的API文件读写 File System进程的管理 process网原创 2021-11-27 12:15:39 · 2139 阅读 · 0 评论 -
浏览器渲染过程
一、学习路径https://www.bilibili.com/video/BV18f4y1H7Zu/?spm_id_from=333.788.recommend_more_video.-1二、浏览器渲染过程原创 2021-11-06 14:16:30 · 183 阅读 · 0 评论 -
Bootstrap框架
Bootstrap框架一、了解bootstrap二、containers三、Grid system一、了解bootstrap二、containers三、Grid system原创 2021-11-04 17:58:16 · 249 阅读 · 1 评论 -
jQuery实现banner图
<!DOCTYPE html><html lang="zh-cn"><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>原创 2021-10-25 17:14:10 · 434 阅读 · 0 评论 -
jquery 实现放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title原创 2021-10-25 11:53:22 · 225 阅读 · 0 评论 -
JQuery学习
一、了解一个快速、简洁的JavaScript框架。1.jQuery 的好处1.简化js的复杂操作2.不再需要关心兼容性3.提供大量实用方法2.jquery版本3.JQ设计思想 选择网页元素1.模拟css选择元素的写法css选择器的写法 在 $() 中都可以使用//#id 选择器 $("#div1").css("backgroundColor","red");//.class 选择器 $(".li1").css("backgroundColor","red");//原创 2021-10-21 17:54:49 · 269 阅读 · 0 评论 -
nodejs-gulp的使用
1.安装nodejs从官网下载,根据系统选择适合的安装包安装完成后,在系统菜单里,找到 Node.js command prompt 输入node -v查看当前nodejs版本信息拓展:npm NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,npm下载源是国外网站,会慢。可以用淘宝的cnpm,同样的东西允许用户从NPM服务器下载别人编写的第三方包到本地使用允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用允许用户将自己编写的包或命令行程序上原创 2021-09-24 15:56:31 · 525 阅读 · 0 评论 -
js-闭包-模块化开发
闭包特点函数嵌套函数内部函数使用外部函数的形参和变量被引用的形参和变量不会被垃圾回收机制回收 function aaa(num1) { var num2 = 20; function bbb() { alert(num1+''+num2); } return bbb; } var res = aaa(10); res();闭包的好处变量常驻内存当中避免全局变量被污染 避免生成全局变量可以声明原创 2021-09-10 17:13:45 · 310 阅读 · 0 评论 -
实现搜索框-跨域jsonp
需求实现搜索框实现思路1.编写好布局 2.实现输入框事件,有数据的话,通过添加script标签 src属性调用数据 3.编写回调函数,对获取的数据进行处理。代码<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2021-09-05 12:22:52 · 72 阅读 · 0 评论 -
事件委托-给新添加的列表添加绑定事件
事件委托的应用1.应用场景2.代码1.应用场景给新生成的列表添加绑定事件。添加完成后,新添加的删除和修改按钮没有功能。需要通过事件委托,根据事件冒泡原理,点击触发对象,事件冒泡到父节点,完成事件。2.代码将子节点的事件绑定到父节点,根据触发对象进行逻辑应用 //给新添加的删除和修改添加点击事件 oTb.onclick=function(ev){ var e=ev || window.event;原创 2021-09-04 14:31:45 · 220 阅读 · 0 评论 -
json入门
json基础一、了解json1.与XML相同之处2.与XML不同之处3.为什么使用json二、使用json对象1.-json.stringify() 将数据结构转换成json格式字符串2.-json.parse() 将json格式字符串转换成数据结构传输格式的应用:数据从前端传送到后端,需要先将前端的数据格式转换成字符串,传给后端再转换成数据格式。为什么转换成字符串?除了文本和二进制数据,其他的数据都无法传输,都要转成 json,即使是一个字符串,也要转 json 特有的结构,这样才可以被另一端使用了原创 2021-08-13 16:37:38 · 66 阅读 · 0 评论 -
Ajax入门知识
ajax一、认识ajax一、认识ajaxajax 是异步的JavaScript和xmlajax最大的有点就是在不重新加载整个页面的情况下,可以与服务器交换数据,并更新部分网页内容。xml 数据传输格式优点: 1.种类丰富 2.传输量非常大缺点:1.解析麻烦 2.不太适合轻量级数据json 数据传输格式......原创 2021-08-12 10:59:43 · 94 阅读 · 0 评论 -
JS 面向对象 实现选项卡
<!DOCTYPE html><html lang="zh-cn"><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>原创 2021-07-01 16:46:12 · 207 阅读 · 0 评论 -
正则表达式
正则表达式一、正则表达式概念二、创建正则表达式三、正则表达式的方法1.test()2.exec()四、字符串中使用正则,字符串的方法1.match()2.replace()3.split()一、正则表达式概念在javascript中属于rRegExp类二、创建正则表达式三、正则表达式的方法1.test()返回的是ture或false2.exec()返回的是匹配到的字符串数组,或者null四、字符串中使用正则,字符串的方法1.match()格式:字符串.match(正则);功能:原创 2021-04-26 17:29:07 · 68 阅读 · 0 评论 -
js随鼠标的位置显示提示框
随鼠标的位置显示提示框内容一、思路及知识点二、代码一、思路及知识点首先要做到鼠标放到那个标签,那个标签的显示出来。用DOM中事件对象属性,获取当前鼠标位置,然后将获得的位置插入到显示框内。二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-04-06 16:02:19 · 2368 阅读 · 0 评论 -
HTML和css
前端一、前端基础1. 页面组成2. 标签的作用3. 在Hbuilder中的快捷方式一、前端基础1. 页面组成2. 标签的作用<h1>标题标签</h1> h1-h6从大到小<p>段落标签,文字独占一行</p><b>文字加粗标签</b><i>斜体标签</i><hr > 一条水平线,是单标签<br> 换行,是单标签 原创 2020-11-19 10:31:43 · 343 阅读 · 0 评论 -
HTML5和css3
HTML5一、1. html5 与 xhtml的区别2. strong和b,em和i 的区别3.引用标签4. 嵌套页面 iframe一、1. html5 与 xhtml的区别1.DOCTYPE文档及编码 html5:<!DOCTYPE html> 比较简单 <meta charset="utf-8"> xhtml:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http原创 2020-11-19 10:33:52 · 457 阅读 · 0 评论 -
JavaScript
JavaScript一、了解javascript1. javascript组成2.javscript使用二、javascript语法1. 基础方法一、了解javascript1. javascript组成1.ECMAscript 2.DOM 文档 3. BOM 浏览器2.javscript使用1.一般写在body标签内,也可以用link引入。可以写多个script标签,标签执行的顺序自上而下。2.引入的script标签就不能在标签里面写javascript代码,无法执行到。二、javas原创 2021-02-15 19:26:11 · 426 阅读 · 0 评论 -
js制作显示时间
一、制作思路1.运用setInterval(显示时间函数,毫秒数)定时器方法,每隔一秒显示执行一次显示时间的方法。二、执行代码 <style type="text/css"> #div1{ width:600px; height: 100px; border: 1px black solid; text-align: center; font-size: 20px; margin:200px auto; padding-top: 50px;原创 2021-03-09 09:26:13 · 1033 阅读 · 0 评论 -
选择排序
选择排序1.选择排序思路2.选择排序图解3.JS代码1.选择排序思路如果是从小到大排序,选择一个数或者从第一个数开始,这个数和后面所有的数进行比较。如果这个数比后面的数大,那么将后面较小的这个数和他交换位置。交换完位置后,由这个较小的数,接着向后比,直到比较完,将会比较出第一轮里最小的那个数。内循环表示的是下标数。从这个开始,一直到最后。所以要注意,不需要减轮数。2.选择排序图解3.JS代码...原创 2021-02-23 11:16:48 · 87 阅读 · 0 评论 -
冒泡排序
冒泡排序1.冒泡排序的比较原理2.冒泡排序的循环次数3.图解4.JS代码个人理解有误还请指正。1.冒泡排序的比较原理有两次循环完成冒泡排序。比较方法是,第一轮第一次由第一个和第二个比较,第一轮第二次由第二个和第三个比较外面的循环,是整体比较几轮。里面的循环是前一个数和后一个数比较的次数。2.冒泡排序的循环次数外面的轮数是整体数字减一(length-1)。里面的循环是随着轮次增加比较的数字减少(length-(轮数+1))。外面循环的轮数是整体数字减一次,最后一次轮不用比较,最小的得出来了。里原创 2021-02-23 10:08:54 · 2059 阅读 · 0 评论 -
Postcss
Postcss一、了解Postcss1.安装2.对文件进行转换3.postcss配置文件二、postcss常用插件1.安装插件2. autoprefixer 浏览器前缀插件3.poscss-import 引入合并css4. cssnano 对css压缩5.postcss-cssnext6.stylelint 语言检测7.postcss-sprites 自动生成精灵图一、了解Postcss1.安装需要在node环境下运行。如何确定自己是否有node,可以在cmd下输入node -v输入命令安装p原创 2021-01-12 13:42:32 · 200 阅读 · 0 评论 -
Sass和Less(预处理器)
Sass和Less(预处理器)一、了解Sass和Less二、Sass和Less 语法2.1 注释2.2 语法一、了解Sass和LessSass 对自己的定位首先是一个预处理器。其最主要的竞争对手包括 LESS,一个基于 Node.js 的预处理器,因著名 CSS 框架 Bootstrap 的使用而声名鹊起。此外还有 Stylus ,一种对形式无所限制的 LESS 版本。它是一种无论你想怎么样使用,大都能顺利转换成 CSS 的程序语言。Sass和Less都属于预处理器。Less文件以.less结尾,Sa原创 2021-01-11 17:57:27 · 2634 阅读 · 0 评论 -
css3-grid制作骰子
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> /* 第一个骰子样式 */ .box{ width原创 2020-12-22 15:06:24 · 178 阅读 · 0 评论 -
CSS3-grid网格布局
grid网格布局一、grid网格布局一、grid网格布局原创 2020-12-22 15:04:32 · 235 阅读 · 0 评论 -
css3-flex实现自适应布局
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css">/* =============================原创 2020-12-13 21:23:04 · 486 阅读 · 1 评论 -
css3-flex制作骰子
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css">/* =============================原创 2020-12-13 21:22:12 · 246 阅读 · 0 评论 -
css-flex弹性盒模型布局
flex弹性盒模型布局一、了解flex二、flex-direction 弹性的方向三、flex-wrap 弹性换行一、了解flex当父容器display:flex时,子容器可以用margin居中,且子容器什么宽高都可以很好的自适应居中。flex给父容器加就可以,子容器不用加#box{width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;}#box1{width: 100px; h原创 2020-12-07 23:25:10 · 280 阅读 · 0 评论 -
css问题
元素宽度够,却被挤下去问题:在写搜索框和搜索框图标时,宽度够却图标却始终被挤下去。原因:当使用两个内联块元素时,代码中换行,会产生间距<div class="zl_search r"><input type="text" placeholder="请输入内容"/><button><i class="iconfont iconsuosou"></i></button></div>...原创 2020-12-04 12:09:34 · 183 阅读 · 0 评论 -
css3 实现边框加小三角
鼠标放入后显示边框有小三角(利用图片)构建思路:1.利用双伪类,实现放入鼠标同时添加图片的样式2.导入背景图片,添加图片宽高,调整放置的位置。需要给本标签添加定位position:relative,给本标签伪类的样式添加position:absolute.#projectList .projectList_btns li:hover::after{color: white; background: url(img/arrow.png) no-repeat; content: ""; position原创 2020-12-03 16:40:39 · 689 阅读 · 0 评论 -
css盒子阴影实现图片上浮阴影效果
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css">/* =============================原创 2020-11-27 16:25:54 · 728 阅读 · 0 评论 -
css渐变实现图片闪光
第一种:运用知识: transition 过渡构建思路:1.构建一个图片和一个盒子,盒子设置好背景颜色渐变。将他放置在图片的左侧,通过移动盒子,配合过度,实现照片闪光第二种:运用知识:animation 动画构建思路:1.构建一个图片和一个盒子,盒子设置好背景颜色渐变。2.将盒子放置在图片的左侧,设置背景图位置的变化,配合动画效果实现照片闪光<!DOCTYPE html><html> <head> <meta charset="utf原创 2020-11-27 11:33:46 · 416 阅读 · 0 评论 -
css 渐变实现进度条动画
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css">/* =============================原创 2020-11-26 15:42:24 · 952 阅读 · 0 评论