可期！-CSDN博客

原创 DOM 方法以及 DOM的增删减改

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。一. DOM 方法这里讲解一些DOM的基本方法，叫你如何获取HTML标签：在document中有一个属性body，他保存的是body的引用var body = document.body;document.documentElement保存的是html根标签var html = document.document

2022-02-23 11:23:07 501

原创 DOM 键盘事件鼠标移动

一. 键盘事件要操作键盘事件就需要获取键盘按键的位置，点击后按键后触发，松开后结束事件。1. 这里我们使用关键词：onkeydown 键盘被按下被按下会一直触发onkeyup 键盘被松开只会触发一次这两个关键词往往会同时使用，有触发就有结束2.键盘事件一般都会绑定给一些获取焦点的对象或者是document下面我们来演示一下：document.onkeydown = function(event){ if(event.keyCode === 89 &&a

2022-02-22 23:08:52 576

原创 Vue 关于组件的嵌套,用实例讲解教你如何嵌套

Vue嵌套，关于嵌套就是将一个组件嵌套到另一个组件中，那么外部的组件就是父组件，内部的组件就是子组件，我们就可以通过父组件来控制子组件。将组件嵌套使用，方便开发者对组件的管理，及使用。那么在将组件的嵌套前我们先来讲一些关于使用组件的注意点：1.关于组件名：一个单词组成：第一种写法（首字母小写）：school 第二种写法（首字母大写）：School

2022-01-29 19:53:53 5564

原创 Vue 关于组件--创建--注册--使用

来到组件的学习，首先我们要了解什么是Vue组件。还不知道的同学可以先了解什么是组件在来学习组件的使用。我的总结：组件就是可复用的Vue实例。使用组件的三大步骤：首先第一步: 定义组件（创建组件）第二步：注册组件第三步：使用组件（写组件标签）第一步，定义组件，我们以school组件为例，创建school组件。const school = Vue.extend({ template:` <div> <h2

2022-01-26 13:42:49 1427

原创 css vw视口，响应式布局及媒体查询

一.vw视口在css中，存在视口 vw 表示视口宽度全名：（viewport width）-100vw = 一个视口宽度(一个设计图的宽度)-1vw = 一个视口1%宽度其中这个单位永远参照视口宽度计算，计算如下：100vw=设计图像素(750px) 1px = 100vw/750px = 0.133333333vw40px = 0.133333333*40 = 1px*40在设计中设计视图宽度一般是： 750px 或 1125px在这里还有一个值：rem1rem = 1个

2021-12-26 18:01:32 699

原创 JS基础语法【数组】的讲解

数组是 js 中最常用的数据类型之一，属于对象类型中的内置对象。一个数组类型的变量可以保存一批数据，且数据可以是任意数据类型。这里就为大家讲解数组的用法及如何创建。一. 创建数组其中包括两种方式：1.使用array 对象的方式2.直接使用 “[]” 的方式创建1.使用array 对象创建首先实例化array对象的方式创建数组是通过 new 关键字实现的。如下代码讲解用法：元素值类型为字符型var area = new Array(‘china’,‘chinese’,‘USA’);元素值

2021-12-26 17:39:48 451

原创练习 JavaScript 的嵌套循环实现 9*9乘法表

在制作表格之前我们需要找到表格的规律：1.首先9*9 乘法表是由9行9列的单元格组成；2.其次：乘法表的层数 = 表格的行数 = 每行的列数。分析完布局规律后，我们在找运算规律：1.其中被乘数的取值范围 ‘1~ 每行中的列数’之间；2.乘数的值是表格的行数；下面根据分析用代码实现：<script> for(var i=1;i < 10; i++){ for(var j=1; j<=i; j++){

2021-12-25 15:01:22 1203

原创 JavaScript 数据类型分类（基本数据类型及对象数据类型）

在JavaScript中支持多种数据类型，其中我们将他们分为两类，包括：基本数据类型和引用数据类型。其中：基本数据类型：boolean（布尔型）string （字符型）number（数值型）null（空型）undefined（未定义型）引用数据类型：object（对象）文章目录1.布尔型2.数值型3.字符型4.空型5.未定义型1.布尔型布尔型( Boolean)是 JavaScripl中较常用的数据类型之一，通常用于逻辑判断。它只有 true 和 false 两个值，表示事物的“

2021-12-24 10:14:21 2818

原创 JavaScript 对象讲解详细解释

对象：说到对象先为大家讲讲对象的用途：对象就是对项目，功能的划分管理。文章目录对象：1.window对象2.document对象3.String对象4.自定义对象1.window对象window 对象是 JavaScript 与浏览器之间交互的主要接入点，提供JavaScript 脚本的接口。其中：console 和 document 是window对象的属性，alert(), prompt() 是window对象方法。写法如下：window.console;window.documen

2021-12-23 13:06:59 417

原创 JavaScript 函数解释及用法

函数今天为大家讲解：1.函数的用途2、函数的返回值3.函数的参数4.自定义函数一. 函数的用途讲到函数，大家一定好奇函数的用途是什么，那么下面就为大家讲解函数的用途：当程序规模较大，不便于阅读或修改时，我们为了使代码模块化，组件化管理，就用到的函数，这样我们只需要调整一个个函数来完成，既减少重复代码，又使代码编写更有调理。例如: alert()函数。alert指的是函数名，小括号用于接收输入的参数二.函数的返回值函数执行后可以返回一个表示执行结果的值，如下示例：var name =

2021-12-22 12:52:16 593

原创 JavaScript 常用输出语句及数据与运算

若是今朝共淋雪，此生也算共白头JavaScript常用输出语句1. alert()2.console.log()3.document.write()数据运算常用输出语句利用输出语句可以输出一段代码的执行结果，在学习 JavaScript 的过程中会经常用到输出语句。因此，接下来为大家介绍3个常用的输出语句。1. alert()alert() 用于弹出一个警告框，确保用户可以看到某些信息。利用alert()可以很方便的输出一个结果，经常用来测试程序。2.console.log()console

2021-12-21 11:52:55 1117

原创 JavaScript引入方式及常用输出语句

没有准备好就不要开始，开始了就不要轻易放弃JavaScript语言有很多语法概念，如函数，事件，对象等；这些内容相对复杂,关联性强。一. JavaScript 引入方式在编写网页时使用JavaScript 语言，可以使用嵌入式，外链式，行内式这三种方式来引入JavaScript代码。1. 嵌入式嵌入式就是使用<script> 标签包裹代码，直接编写在HTML文件中。我们参照如下实例：<script>JavaScript 语句</script><s

2021-12-19 13:38:03 1169

原创 css 字体族详细讲解

慢慢是一个很好的词慢慢遇见慢慢成长慢慢喜欢慢慢温柔所以我们要一起慢慢来慢慢看世界慢慢变老字体族说到字体族就要为大家讲讲图标字体和文本的水平垂直对齐方式一.图标字体首先来讲解图标字体：1.本质是字体，但是我们可以改变其属性。2.就是将图片打包成字体导入网页，这样可以减少网页请求。3.具有矢量性，即使放大也可以清晰观看。4.是移动端设备必须的。了解了字体图标，下面来讲讲字体图标的使用方法：1.在使用图标时可以将图标直接设置为字体然后通过 font-face 的形式对字体

2021-12-17 19:08:20 352

原创 css 设置段落样式各种设置方式详细解释

我本来打算告诉你当你不在我身边的这段日子里我遇到的所有糟糕事但最后我只想告诉你我很想你设置段落样式今天我们详细讲讲设置段落样式的方式：网页的排版离不开对文字段落的设置，这里主要讲述常用的段落样式，包括文字对齐方式，段落首行缩进，首字下沉，行高，单词间距，字符间距和文本大小1.设置文字的对齐方式设置文字对齐方式需要使用 text-align 属性来实现效果。语法：text-align:left | right | center | justify参数：left “左对齐” ，right

2021-12-15 21:01:13 2200

原创 Vue指令关于---v-html_指令和 v-test_指令详解

要学会大大方方的表达爱意，爱不是冷冰冰，爱是炙热的，永远都是，笨蛋才会说反话，笨蛋才会把喜欢的人越推越远一.在讲解 v-test_指令和v-html_指令前我么先回顾一些基本指令： v-bind : 单项绑定解析表达式，可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组，对象，字符串 v-on : 绑定事件监听，可简写为@ v-if : 条件渲染（动态控制节点是否存在） v

2021-12-14 21:45:00 2066

原创 Vue 使用三种方式写过滤器

「喜欢是和优点谈恋爱，那么爱就是和缺点过日子啦」文章目录1.全局过滤器2.计算属性实现3.监测属性实现4.filters 局部过滤器1.全局过滤器这里是一个全局过滤器，可以在全局调用，其中参数value可以收取到属性得到的值然后通过slice（0,4）获取前四位，下面讲解分别使用计算属性监测属性 fliters局部过滤器实现。Vue.filter('mySlice',function(value){ return value.slice(0,4) })2.计算属性实

2021-12-13 22:15:47 856

原创使用ccs 制作雪碧图简单一看就懂

我不喜欢胖子，但她胖就没事今天我们来制作雪碧图（就是将很多小图标放在一张图片中）一.利用雪碧图有很多优点 :1.可以减小图片的总大小2.一次请求，可减小建立键连接的消耗在这里我们来做一个运动的小人就是将小人的多个动作放在一张图片上，然后利用css动画效果让其运动起来，就能呈现出小人再跑的效果，即也是雪碧图。1.html代码<body><div class="box1"></div></body>先创建一个容器，为了让效果更好，我们索性直

2021-12-12 20:03:54 767

原创 css 关于背景设置详细讲解一看就懂

这次我站在雾里连自己都看不清了，我不怪你，我只怪大雾四起，也不怪大雾四起，只怪你的爱意太浅，连大雾都要遮掩。设置背景背景是css中使用率很高，且非常重要的属性。无论是单元的纯色还是加载的背景图片，都能给整个页面带来丰富的视觉效果主要讲解：1.设置背景颜色2.设置背景图像3.设置背景重复一.设置背景颜色在css中，网页元素的背景颜色使用 background-color 属性来设置，属性值为某种颜色。颜色值的设置方法可以使用 RGB，颜色名称，rgba等。语法：background-colo

2021-12-11 12:46:18 1622

原创 Vue 收集表单数据详细解释

相信自己的直觉，顽固的人不喊累！今天来详细解释Vue 收集表单的数据，说到数据我们就想到要使用v-model ，双向数据绑定，技能收集用户输入数据，又能想页面传入数据那么我们下面就来做一个简单的表单介绍vue是如何收集数据的1.首先我们使用html编写一个简单的表单，有输入框，单选框，多选框，密码框，下拉框，文本框，以及按钮<form id="root" @submit.prevent='dome'> 账号:<input type="text" v-model.tr

2021-12-09 17:10:37 1349

原创 Vue 使用监视属性和计算属性实现列表过滤详细解释

任何一个人都无法达到你对他的全部预设，把美好的生活寄托在自己身上今天的任务是实现列表过滤Vue 使用两种方式实现列表过滤下面让我们一步一步完成任务：第一步：先编写html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m

2021-12-07 12:09:02 555

原创 Vue 的计算属性(computed)

今天有事努力的一天！！！如果事与愿违，那一定另有安排。积极生活，让我们的每一天都充满热情。上知识！在Vue中我们可以通过计算将已知的属性通过computed计算得到不存在是属性比如说我们在下面举一个例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge

2021-12-06 10:52:12 261

原创 Vue 基本列表 v-for 详细讲解以及key 的原理

vue基本列表（v-for）v-for 指令：1.用于展示列表数据2.语法：v-for=’(item,index) in/of xxx’ :key=‘yyy’3.可遍历：数组，对象，字符串，指定次数数组，对象，字符串，指定次数的遍历具体如下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa

2021-12-05 14:40:21 1903

原创【css盒子定位】position属性

今天是满满干货,话不多说上知识定位定位（position）的基本思想很简单，它允许用户定义元素框相对于其正常位置应该出现的位置，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素生成一个块级框，而不论该元素是什么类型。position属性可以选择4种不同类型的定位模式。position : static | relative | absolute | fixed其中参数哈尼如下：static：静态设定为默认值。为特殊定位，对象遵循HTML定位规则。relati

2021-12-03 22:18:08 551

原创 Vue.js 条件渲染（v-if v-else v-else-if v-show）

一. Vue条件渲染分享我的学习收获希望能够帮到大家今天为大家分享关于Vue的条件渲染（v-if v-else v-else-if v-show）下面我们来结合代码理解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta

2021-12-02 18:16:35 541

原创 Vue.js 事件绑定 class 和 style 的绑定

一.事件绑定1.绑定class样式字符串写法对象写法数组写法2.绑定style样式对象绑定法下面我们来一一介绍不同方法的使用方法及使用场景，大家可以先看代码中不同方法的使用，看不懂的小编也会在后面讲解的哦<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=

2021-12-01 17:25:08 1161

原创 css元素特殊性及元素分类，详细解释。

一.元素特殊性二.元素重要性三.元素分类今天来分别讲讲元素的特殊性，重要性以及元素的分类1.元素的特殊性特殊性描述了不同规则的相对权重，当多个规则应用到同一个元素时，权重越大的样式会优先显示.color{ color:yellow;}p{ color:blue; }应用此样式的结构代码：<div> <p class="color">这里文字显示红色</p></div>由此可见了类选择符的权重大于元素选择符。根据规范：通

2021-11-10 17:01:50 432

原创 css超链接的伪类和伪元素

超链接的伪类和伪元素利用超链接的伪类可以为超链接设置访问状态，给用户更带来更好的体验。当然还有适用于全局的伪类，例如鼠标移入，点击，以及获取焦点点击进去的状态。利用超链接的伪元素可以使操作页面内容，在指定位置添加内容，或修改指定位置的样式。使文章内容更加丰富，体验感更好。下面让我们一起来学习吧！1.超链接的伪类只适用于设置超链接的伪劣link;表示没访问过的链接（正常的链接）a:link { color:aqua; }visited表示

2021-10-01 10:45:48 1288

原创 css盒边框

一，边框常用的边框属性有7项：border-top,border-botton,border-left,border-right。其中border- width可以一次性设置所有的边框宽度，且需要按照(上右下左)的顺序。border-color设置边框颜色，可以按照上右下左的顺序设置四个边框的颜色。border-style(边框样式) ，border-style属性包括了多个边框样式的参数。none:无边框。dottoed:边框为点线dashed:边框为长短线solid:边框为实线do

2021-09-28 09:58:02 1538

原创 DIV+CSS 布局技术

一，DIV+CSS布局技术一，div布局页面的优点传统的html标签中，既有控制结构的标签，又有控制变现的标签，还有本意用于控制结构后来被滥用的标签。页面的整个结构标签与表现标签混合在一起div+css的页面布局不仅仅是设计方式的转变，而且是设计思想的转变，这样为网页设计带来很大的方便1.缩减页面代码，提高页面的浏览速度2.缩短了网站改版时间，设计者只要简单地修改css文件即可轻松改版网页3.字体控制和排版控制，使我们能更好的控制页面布局4.表现和内容分离，减少网页无效的可能5.方便搜索引擎

2021-09-27 13:57:48 664

原创 CSS 与 HTML文档的结合方法

CSS 与 HTML文档的结合方法css控制网页内容显示格式的方式是通过许多定义的样式属性（乳字号，段落控制等）实现的，并将多个样式属性定义为一组可供调用的选择符。选择符就是某个样式的名称，称之为选择符的原因是，当HTML文档中某元素要使用该样式时，需利用该名称来选择样式想让浏览器显示出样式就需要让浏览器识别调用。这里介绍4种页面中插入样式表的方法：定义内部样式表，定义行内样式表，链入外部样式表环绕导入外部样式表。1.定义内部样式表内部样式表是指吧样式表到页面的head区内，这些定义的样式就应用到页

2021-09-26 22:46:37 792

原创 css属性单位

css的属性单位样式表是由属性和属性值组成的，有些属性值会用到单位。在css中属性值的单位与html中的有所不同一.长度，百分比单位使用css进行排版时，尝尝会在属性值后面加上长度或者百分比的单位1.长度单位长度有相对长度到位和绝对长度单位两种类型。相对长度单位是指以该属性的单位值为基础来完成目前的设置。绝对长度单位将不会随着显示设备的不同而改变。也就是说属性值使用绝对长度单位时，不论在那种设备上，显示效果都是一样。设置属性时，大多数仅能使用正数，只有少数属性可使用正，负数。若属性值设置为负

2021-09-26 13:22:13 324

原创 css 选择符介绍

一，css选择符分类css选择符分为很多类，包括：类型选择符，class选择符，id选择符，通用选择符，分组选择符，包含选择符，元素指定选择符，子对象选择符，属性选择符，下面我们来一一讲解1.类型选择符类型选择符是指以文档对象模型（DOM）作为选择符，即选择某个HTML标签为对象，设置其样式规则。类型选择符就是元素本身，定义直接使用元素名称格式：body{css代码}2.类选择符使用类选择符可以吧相同的标签定义为不同的样式。吐过你希望同一种标签在不同的地方使用不同的样式，就可以先定义两个类在应

2021-09-24 11:35:45 3930

原创 css简介

css的基概述css样式表，用于增强控制网页样式并将样式信息与网页内容的一种标记性语言，用于美化网页。可通过css控制html样式，是网页更加美观。css不仅可以使用在html中，还可以使用在xml和javascript目前几乎所有网页都是用css，css已成为网页设计不可缺少的编辑软件，强大的css加上你独特的设计风格，会给用户不一样的体验css命名规范必须由英文字母，数字或‘_’组成，必须由字母开头，不能为纯数字。我们需要用有意义的单词或者缩写组合来命名选择符,做到见其名知其意，这样可以节省我

2021-09-23 20:05:04 196

空空如也

空空如也