Web
该专栏内容不固定,收录交杂的内容
前端杂货铺
软件工程本 for QTU,校级奖学金 & 科技创新奖学金获得者。第十三届蓝桥杯-Web应用开发-山东省二等奖。 CSDN前端领域优质创作者,阿里云社区专家博主。目前效力于中国工业软件事业!
展开
-
Vue —— 条件语句 & 循环语句
Vue 的条件语句——v-if、v-show。及其区别!原创 2022-03-19 11:18:00 · 3365 阅读 · 0 评论 -
Vue —— 项目实战总结(二)
文章目录1. 重写 push 和 replace 方法2. Home 模块组件拆分3. 三级联动组件完成4. 完成其余的静态组件5. POSTMAN 测试接口1. 重写 push 和 replace 方法编程式路由跳转到当前路由(参数不变),多次执行会抛出NavigationDuplicated的警告错误。答:路由跳转有两种形式,声明式导航、编程式导航为什么编程式导航进行路由跳转的时候,就会有这种警告错答:vue-router 引入了 promise通过下面的代码,可以解决原创 2022-05-31 20:37:08 · 375 阅读 · 0 评论 -
Vue —— 计算属性 & 监听属性
一、计算属性计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。使用计算属性反转字符串 <div id='app'> <p>原始字符串 {{msg}}</p> <p>计算后的字符串 {{reverseMsg}}</p> </div> var vm = new Vue({ el: '#app', data:{原创 2022-03-19 15:59:27 · 1025 阅读 · 0 评论 -
Vue —— 样式绑定
一、class 属性绑定class 与 style 是 HTML 元素的属性,用于设置元素的样式,可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。为 v-bind:class 设置一个对象,从而动态的切换 class .active{ width:100px; height: 100px; background-color:原创 2022-03-19 17:49:56 · 2486 阅读 · 0 评论 -
Vue —— 计算属性 setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter 。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-.原创 2022-04-02 15:11:50 · 1072 阅读 · 0 评论 -
Vue —— 项目实战总结(一)
文章目录1. 创建项目2. 目录内容3. 路由的配置4. 路由的跳转5. 路由的元信息6. 路由传参7. 路由传参的面试题1. 创建项目win + r,输入 cmd,打开终端输入代码:cd desktop,定位到桌面vue create xxx (xxx 为项目名)2. 目录内容node_modules:放置项目依赖的地方public:一般放置一些公用的静态资源,打包上线的时候,public 文件夹里面资源原封不动打包到 dist 文件夹里面。src:程序员源代码文件夹(1)原创 2022-05-30 19:57:04 · 1885 阅读 · 1 评论 -
Vue —— 模板语法
vue 的模板语法。精炼且详细!原创 2022-03-19 10:48:46 · 487 阅读 · 0 评论 -
Vue —— Axios 发送请求(常用格式)
Axios 发送请求的常用格式原创 2022-04-04 15:15:48 · 5034 阅读 · 5 评论 -
Vue —— 事件处理器 & 表单
一、事件处理器事件监听可以使用 v-on 指令 <div id='app'> <button @click="counter += 1">增加1</button> <p>按钮被点击了{{counter}}次</p> </div> var vm = new Vue({ el: '#app', data: { counter: 0原创 2022-03-20 14:48:15 · 829 阅读 · 0 评论 -
DOM ------ 重点核心总结
DOM重点内容 文档:整个页面 元素:页面中所有的标签 节点:页面中所有的内容 创建: document.write innerHTML createElement 增: appendChild insertBefore 删: removeChild 改:原创 2022-02-10 11:19:39 · 293 阅读 · 0 评论 -
DOM ------ 仿淘宝搜索栏
仿淘宝搜索栏完成效果如下:默认获取焦点改文本后改文本后获取焦点//css代码 input { color: #999; }//html代码 <input type="text" value="手机">//js代码 // 1.获取元素 var text = document.querySelector('input') // 2.注册事件 获得事件焦点 onfocus te原创 2022-01-20 20:17:05 · 454 阅读 · 0 评论 -
DOM ------ 表单的全选和取消全选
表单的全选和取消全选1.点击全选按钮, 所有选项都被选中2.再次点击全选按钮, 所有选项都不被选中3.当有一个选项没有被选中时, 全选按钮即不勾选 //css代码 table { width: 200px; margin: 100px auto; text-align: center; border-collapse: collapse; font-size: 14px;原创 2022-02-08 11:36:46 · 457 阅读 · 0 评论 -
DOM ------ 删除节点
删除节点:node.removeChild(child) //html代码 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> //js代码 // 1.获取元素 var ul = document.querySelecto原创 2022-02-09 19:02:54 · 1836 阅读 · 0 评论 -
BOM ------ 缓动效果
缓动效果原理思路:让盒子每次移动的距离慢慢变小 速度就会慢下来核心算法: (目标值 - 现在的位置) / 10 做为每次移动的距离步长停止的条件是:让当前盒子位置等于目标位置就停止定时器缓动效果代码实现点击按钮, 粉色盒子先快后慢移动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible原创 2022-02-20 15:17:08 · 242 阅读 · 0 评论 -
BOM ------ scroll 系列
scroll 系列element.scrollTop: 返回被卷去的上册距离,返回数值不带单位element.scrollLeft: 返回被卷去的左侧距离, 返回数值不带单位element.scrollHeight: 返回自身实际的高度, 不含边框, 返回数值不带单位element.scrollWidth: 返回自身实际的宽度, 不含边框, 返回数值不带单位实例<!DOCTYPE html><html lang="en"><head> <原创 2022-02-20 11:38:42 · 319 阅读 · 0 评论 -
DOM ------ H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值兼容性获取:(1) element.getAttribute('data-index')(2) H5新增 element.dataset.index 或者 element.dataset['index'] //html代码 <div getTime = '20' data-index = '2' data-list-name='tom'></div> //js代码 var div = document.qu原创 2022-02-09 09:51:57 · 220 阅读 · 0 评论 -
DOM ------ input框查询的放大效果
当没有内容输入时原创 2022-02-10 21:15:18 · 399 阅读 · 0 评论 -
BOM ------ Window 常见事件
load 事件load 等页面内容全部加载完毕, 包含页面dom元素 图片 flash css 等DOMContentLoaded 是DOM 加载完毕 不包含图片 flash css 等就可以执行 加载速度比load 更快一些 //页面先弹出 HELLO, 之后点击按钮弹出 BOM window.addEventListener('load', function() { var btn = document.querySelector('button')原创 2022-02-15 11:57:01 · 450 阅读 · 0 评论 -
DOM ------ 仿淘宝关闭二维码
仿淘宝关闭二维码完成效果如下: //css代码 .box{ position: relative; width: 74px; height: 88px; border: 1px solid #ccc; margin: 100px auto; font-size: 12px; text-align: center;原创 2022-01-20 19:41:47 · 432 阅读 · 0 评论 -
DOM ------ 百度换肤
百度换肤:点击某个图片,设置该图片为背景图。 //css代码 * { margin: 0; padding: 0; } body { background: url(../Picture/图片1.png) no-repeat center top; } li { list-style: none; } .ba原创 2022-02-08 10:27:24 · 1029 阅读 · 0 评论 -
DOM ------ 仿京东显示隐藏密码
仿京东显示隐藏密码完成效果如下: //css代码 .box { position: relative; //大盒子 相对定位 width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 370px; height: 30px; border:0; //inp原创 2022-01-20 18:06:31 · 575 阅读 · 0 评论 -
DOM ------ 鼠标滑过表格的行变色效果
表格行变色: 鼠标滑到该行, 该行改变颜色 //css代码 table { width: 800px; margin: 100px auto; text-align: center; border-collapse: collapse; /* 合并边框模型 */ font-size: 14px; } thead tr{ h原创 2022-02-08 10:52:13 · 651 阅读 · 0 评论 -
BOM ------ client 系列
client 系列client 事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的坐标。 客户区指的是当前窗口。clientWidth<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp原创 2022-02-20 11:14:58 · 287 阅读 · 0 评论 -
DOM ------ 子节点第一个元素和最后一个元素
对于ol标签下有li标签常用写法(返回子元素):子节点第一个元素: ol.children[0]子节点最后一个元素: ol.children[ol.children.length - 1]不常用写法(返回文本/元素节点):第一个子节点: ol.firstChild最后一个子节点: ol.lastChild不常用写法(返回子元素IE9+):子节点第一个元素 ol.firstElementChild子节点最后一个元素: ol.lastElementChild //html代码 <原创 2022-02-09 10:40:43 · 653 阅读 · 0 评论 -
DOM ------ 操作元素
关于事件~事件三要素 : 事件源 事件类型 事件处理程序事件源: 事件被触发的对象 即按钮事件类型: 鼠标点击事件 (onclick)事件处理程序: 通过函数赋值的方式执行步骤: 获取事件源 注册事件 添加事件处理程序获取事件源: var btn = document.getElementById(‘btn’)注册事件: btn.onclick添加事件处理程序: function() { alert(‘点秋香’) }点击按钮 弹出内容分析: 1.创建按钮 2.获取到按钮 3.给按钮绑定原创 2022-01-20 17:26:00 · 518 阅读 · 0 评论 -
BOM ------ animate缓动动画效果
缓动动画效果实例鼠标经过前鼠标经过后<!DOCTYPE html><html lang="en"><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">原创 2022-02-20 15:23:47 · 321 阅读 · 0 评论 -
DOM ------ 简易留言功能
功能分析:1.当没有内容输入时, 弹窗提示2.可在文本框输入内容, 发布显示到网页上3.新发布的内容在最上面4.可以对发布的内容进行删除操作输入为空时:输入内容并发布 //html代码 <textarea placeholder="留言内容..."></textarea> <button>发布</button> <ul> <li>留言板</li> <原创 2022-02-09 19:14:10 · 427 阅读 · 0 评论 -
DOM ------ 动态生成表格
动态创建表格1.数组中准备好数据2.往tbody里创建行3.往行里创建单元格4.增加删除操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic原创 2022-02-10 11:18:03 · 397 阅读 · 0 评论 -
BOM ------ mouseenter 和 mouseover 的区别
mouseenter & mouseover 的区别mouseover 鼠标经过自身盒子会触发 经过子盒子还会触发(会冒泡)mouseenter只会经过自身盒子触发(不会冒泡)实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-02-20 11:43:39 · 335 阅读 · 0 评论 -
DOM ------ 下拉菜单
效果: 鼠标滑过呈现二级菜单思路: 利用nodeType值为1 获取标签元素 //html代码 <ul class='nav'> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> <原创 2022-02-09 11:11:52 · 252 阅读 · 0 评论 -
DOM ------ tab栏切换
tab栏切换: 设计tab栏 点击相应板块显示相应信息 //css代码 *{ margin: 0; padding: 0; } body{ display: block; } .tab_list li{ float: left; height: 39px; line-height: 39px;原创 2022-02-08 12:11:28 · 287 阅读 · 0 评论 -
BOM ------ 定时器
定时器 setTimeout (只执行一次)setTimeout(调用函数, 延时时间)页面中可能有多个定时器 可以给定时器添加标识符(名字) function callback(){ alert('bong~') } var time1 = setTimeout(callback,1000) //1s后调用 var time2 = setTimeout(callback,3000) //3s后调用2秒后自动关闭广告利用定时器, 两秒后在原创 2022-02-18 15:33:39 · 441 阅读 · 0 评论 -
DOM ------ 获取元素
根据 ID 值获取 : document.getElementById()ID值获取最常用! <div id="demo"></div> //js代码 var demo = document.getElementById("demo")根据 标签名 获取 : document.getElementsByTagName() <ul> <li>Hello1</li> <li>Hello2.原创 2022-01-20 16:32:15 · 294 阅读 · 0 评论 -
BOM ------ offset 实例
获取鼠标????在盒子的坐标首先得到鼠标在页面中的坐标(e.pageX, e.pageY)其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)用鼠标距离页面的坐标减去盒子在页面中的距离, 得到鼠标在盒子内的坐标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa原创 2022-02-19 17:54:15 · 184 阅读 · 0 评论 -
BOM ------ offset 和 style的区别
offset 和 style的区别offsetoffset可以得到任意样式表中的样式值offset获得的数值是没有单位的offsetWidth包含padding+border+widthoffsetWidth是只读属性,不能获取不能赋值stylestyle只能得到行内样式表中的样式值style.width获得的是带有单位的字符串style.width获得不包含padding和border的值style.width是可读写属性,可以获取也可以赋值注:想要获取元素大小位置,用off原创 2022-02-19 17:43:40 · 425 阅读 · 0 评论 -
DOM ------ 节点
节点概述 : 节点至少拥有nodeType(节点类型) nodeName(节点名称) nodeValue(节点值)这三个基本属性元素节点 : nodeType 为 1, HTML 标签元素 元素节点主要提供了对元素标签名 子节点及属性的访问属性节点 : nodeType 为 2, 一般是元素节点的属性文本节点 : nodeType 为 3 ,(文本节点包含文字 空格 换行) DOM中用于呈现文本的部分 //html代码 <div class="box"> <sp原创 2022-02-09 10:00:49 · 170 阅读 · 0 评论 -
DOM ------ 克隆节点
克隆节点:node.cloneNode() //html代码 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> //js代码 // 复制节点 node.cloneNode() var ul = document.querySelector('ul') /原创 2022-02-09 19:31:42 · 697 阅读 · 0 评论 -
BOM ------ history对象
history对象: 与浏览器历史记录进行交互, 该对象包含用户(在浏览器窗口中)访问过的 URLback(): 后退功能forword(): 前进功能go(参数): 前进后退功能 参数是1前进一个页面, -1后退一个页面index.html //html代码 <a href="list.html">点击去往列表</a> <button>前进</button> //js代码 var btn = document.quer原创 2022-02-19 17:22:13 · 288 阅读 · 0 评论 -
DOM ------ 事件 的那些事儿
注册事件传统注册事件:on-开头, 如onclick监听注册事件: addEventListener() //传统方法 btn.onclick = function() { console.log('传统方法') } //监听注册事件 IE9+ btn.addEventListener('click', function(){ console.log('监听注册方法') }) //IE9- btn.attachEvent('onclick', function(){ cons原创 2022-02-10 16:42:12 · 353 阅读 · 0 评论 -
DOM ------ 仿密码框提示语
仿密码框提示语完成效果如下:默认失去焦点三位失去焦点正确格式//css代码 div { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 12px; color: #999; } .wrong {原创 2022-01-20 20:43:02 · 405 阅读 · 0 评论