![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
重学前端
文章平均质量分 72
时小浅
折腾数据.折腾代码.折腾规约.折腾架构.折腾需求.折腾服务.生命不息.折腾不止.
展开
-
Vue 路由
什么是路由路由是负责将进入的浏览器请求映射到特定的 组件 代码中。 即决定了由谁(组件)去响应客户端请求。路由入门1.<div id="app">2.<router-link to="/product">公司产品</router-link>3.<router-link to="/about">关于我们</router-link>4.<hr/>5.<router-view>...原创 2021-08-04 09:24:35 · 83 阅读 · 0 评论 -
Vue 组件
组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 js 特性进行了扩展的原生 HTML 元素。总结:组件是用来完成特点功能的一个自定义的HTML标签例如:<body><mytag></mytag></body>注意: mytag就是一个组件,...原创 2021-08-04 09:16:58 · 309 阅读 · 0 评论 -
Vue 计算属性
计算属性是一种特殊的属性.用法和methods一样,里面写函数,函数必须有一个唯一的返回值。语法1 使用计算属性{{计算属性的方法名字}}2 定义计算属性对应的方法var app = new Vue({el: "#app",data: {message: "it"},computed:{计算属性的方法名字: function(){return 处理结果.}}});优点...原创 2021-08-03 09:09:04 · 145 阅读 · 0 评论 -
Vue 过滤器
过滤器就是数据在页面上输出之前对其进一步进行格式化.语法1. 语法:1.1 在视图页面中使用过滤a. {{表达式|过滤器1|过滤器2}}b. <标签 v-bind:属性名字="表达式|过滤器1|过滤器2"></标签>简写形式:<标签 :属性名字="表达式|过滤器1|过滤器2"></标签>1.2 在Vue实例中定义过滤器var app = new ...原创 2021-08-03 09:01:30 · 148 阅读 · 0 评论 -
Vue 事件
1语法:1.1 使用v-on指令注册事件<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>1.2 简写方式<标签 @事件句柄="表达式或者事件处理函数"></标签>2. 注意事项:事件处理函数作为事件句柄的值不需要调用.<div id="app"><h1>结果</h1>{{num}}<h1>...原创 2021-08-03 08:57:38 · 300 阅读 · 0 评论 -
Vue指令
指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.常见的指令v-text=“表达式” 设置标签中的文本v-html=“表达式” 设置标签中的htmlv-if=“表达式” 判断条件v-for=“表达式” 循环v-model=“表达式” 数据双向绑定v-on=“表达式” 注册事件指令作用1.作用: 当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。2.一个标签元素上可以出现多个指令属性3.指令只能够出现在Vue对象...原创 2021-08-02 22:19:45 · 165 阅读 · 0 评论 -
VueJS表达式
表达式是Vue中视图模板的一种语法结构. 将数据绑定(输出)到HTML中表达式语法VueJS表达式写在双大括号内:{{ expression }}。VueJS表达式把数据绑定到 HTML。VueJS将在表达式书写的位置"输出"数据。VueJS表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。简单表达式在{{ }}中可以进行简单的运算<div原创 2021-08-02 21:41:46 · 829 阅读 · 0 评论 -
Vue 基础入门
Vue是什么Vue(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue只关注视图层。Vue通过新的属性(自定义)和{{表达式}}扩展了 HTML。Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue学习起来非常简单。<!doctype html><html> &l...原创 2021-07-30 10:11:42 · 306 阅读 · 0 评论 -
jQuery 自定义动画animate()
用于创建自定义动画的函数animate(params,[duration],[easing],[callback])这个函数的关键在于制定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如height、top或opacity)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left。而每个属性的值表示这个样式属性到多少是动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是hide、show、t原创 2021-07-29 21:56:33 · 938 阅读 · 0 评论 -
jQuery 动画
显示隐藏匹配元素Show()这个就是'show( speed, [callback] )'。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。例如:显示所有段落,$("p").show()show(speed,[callback])以优雅的动画显示匹配的元素,并且在显示完成后可选择返回一个回调函。可根据指定的速度动态改变每个匹配元素高度、宽度和不透明度。例如:用缓慢的动画.原创 2021-07-29 21:47:08 · 120 阅读 · 0 评论 -
jQuery 表单事件和表单样式
表单有2个基本组成部分表单域:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器端的方法。表单元素:包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。表单按钮:包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上或者取消传送,还可以用来控制其他定义了处理脚本的处理工作。单行文本框应用文本框是表单域中最基本的元素,基于文本框的应用有很多。设置添加和失去焦点事件:$(funciton(){$(":input").focus(func.原创 2021-07-29 21:36:27 · 236 阅读 · 0 评论 -
jQuery 事件
文档和窗口加载事件DOM加载完毕后执行的事件特别注意:DOM加载完毕并不代表其关联文件加载完毕。例如:<img src=”https://www.baidu.com/img/2016_8_14female_better_47932c92937c2b1c84bfbb1c28bb2193.gif” />DOM加载完毕仅仅是这个标签节点字符串加载完毕,但是这个节点的属性对应的资源可能还没加载完毕,即:src属性对应的:https://www.baidu.com/img/2原创 2021-07-29 21:28:09 · 80 阅读 · 0 评论 -
jQuery 定位和偏移操作
offset()方法offset()方法用于获取元素相对当前窗体的偏移量。其返回对象包括两个属性:top和left。方法如下:$(selector).offset()var offset= $("p").offset();var left=offset.left;var top=offset.top;该示例用于获得元素p的偏移量。offset()只对可见元素有效。position()方法position()方法用于获取元素与最近的个position样式属性设置为r.原创 2021-07-29 15:59:18 · 561 阅读 · 0 评论 -
jQuery each()
1.对象和数组遍历 $.each(object, [callback])$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n );});2.元素集合遍历 $(ele).each(callback)$(“ul li”).each(function(index,item){ alert( "index" + index + ": " + item );});...原创 2021-07-29 15:54:34 · 64 阅读 · 0 评论 -
jQuery DOM操作
jQuery中DOM基本操作jQuery中的DOM操作主要对包括:建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习jQueryDOM操作。【查】查找结点查找节点非常容易,使用选择器就能轻松完成各种查找工作。就是利用我们前面学习的选择器来查找节点的。例:查找元素节点p返回p内的文本内容。$("p").text();例:查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"); //.原创 2021-07-29 15:52:13 · 1368 阅读 · 0 评论 -
jQuery 选择器
根据标签的属性id,class的值或者是标签的名字查找文档元素的功能称之为选择器。选择器是jquery的根基,在jquery中,对事件的处理,遍历DOM,ajax操作等都依赖于选择器,熟练使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。为什么要使用选择器通过Javascript改变html中元素效果之前首先要找到元素,采用jQuery选择器寻找元素简单快捷.原生javascript代码:document.ge原创 2021-07-28 22:20:39 · 125 阅读 · 0 评论 -
jQuery 基础
官方介绍:jQuery is a fast, small, and feature-rich JavaScript library.jQuery是一个开源的产品,任何人都可以自由的使用,jQuery强调的理念是写的少,做的多(write less, do more),其独特的选择器、链式DOM操作方式、事件绑定机制、出色的浏览器兼容性、封装完善的Ajax都是其它JavaScript库望尘莫及的,是继prototype之后又一个优秀的Javascript框架 (框架指已经封装好的,据有一定结构和功...原创 2021-07-28 21:50:27 · 156 阅读 · 0 评论 -
JavaScript 实现音乐播放器
效果HTML代码<!--播放器--><div id="player"> <!--播放控件--> <div id="playerControl"> <div class="playerImg"> <img src="../images/demo3/1.jpg" alt="" width="150" height="150"> <..原创 2021-07-28 10:52:15 · 2754 阅读 · 3 评论 -
JavaScript Event对象
event对象:也就是“事件对象”: 代表一个网页上的事件发生时的相关信息。具体比如:鼠标的位置,按键的键值/键名,事件发生在谁身上(就是所谓的事件源)。事件对象的组成注意:event对象在FF浏览器中,必须在事件调用函数的位置传如函数中事件的实例按钮改变点击数----练习事件源瞄准---鼠标坐标(鼠标事件)事件注册与捕获往元素上添加事件的三种方式直接在元素标签上添加事件句柄在元素标签的DOM对象上添加事件句柄属性事件注...原创 2021-07-28 10:48:44 · 154 阅读 · 0 评论 -
JavaScript 事件
什么是事件与事件处理函数事件:是用户与计算机交互的方法。比如:单击、鼠标放上、双击等,当然有的事件是由对象发出,比如onload事件;事件处理函数:就是JS中,当事件发生时,去调用函数。在事件前加“on”,比如:onclick、ondblclick(双击事件)、onchange(改变事件)事件例子:HTML 事件的例子:当用户点击鼠标时当网页已加载时 onload(文档加载完毕)当网页被卸载时 onbeforeunload(文档即将从浏览器中卸载)当图片已加载时当鼠标移动原创 2021-07-28 09:57:58 · 162 阅读 · 0 评论 -
JavaScript HTML DOM Node对象
HTML文档中的每一个成员都是一个节点对象,节点对象具有自己的属性和方法。找到HTML节点和Body节点document.documentElement -> html标签可返回存在于 XML 以及 HTML 文档中的文档根节点document.body ->body标签对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。如果我们要对页面上添加显示元素,一般来说会使用这种方式我们要注意的区别:document.documentEl..原创 2021-07-28 09:50:20 · 151 阅读 · 0 评论 -
JavaScript BOM其他对象
screen对象 availWidth 显示器屏幕可用宽度,除任务栏外 availHeight 显示器屏幕可用高度,除任务栏外 Width 实际宽 Height 实际高 location对象对象存储了当前显示的文档的地址,包括完整的URL地址以及组成URL地址的各个部分。其中各个属性被重新赋值后,浏览器将自动刷新,载入新的URL地址原创 2021-07-27 15:27:03 · 67 阅读 · 0 评论 -
JavaScript Window对象
Window对象是BOM与DOM的顶层对象,表示浏览器窗口或者网页中的框架。Window对象是脚本中的全局对象,可以在任何地方调用,脚本中任何对象的使用最终都要追溯到对window对象的访问,所以在使用window对象的各种属性和方法时,window前缀可以省略。访问window对象或子对象属性和方法,要按照层次关系,使用“.”运算符将它们连接起来。window.alert(); 简写方式 alert();window.document.write();原创 2021-07-27 15:10:51 · 134 阅读 · 0 评论 -
JavaScript DOM和BOM
JavaScript组成JavaScript和ECMAScript通常都被人们用来表达相同的含义,但JavaScript的含义却比ECMA-262中规定的要多得多。一个运行在的JavaScript实现应该由下列三个不同的部分组成:1、核心( ECMAScript):JavaScript语言的核心,包含基本语法、数据类型、关键字...2、文档对象模型( DOM):提供访问和操作网页内容的方法和接口;可操作HTML中的标签内容、样式、结构;document.write(“你好”),输出内容至原创 2021-07-27 14:38:59 · 137 阅读 · 0 评论 -
JavaScript Date对象
Date 对象用于处理日期和时间。创建Date对象1.new Date()2.new Date(dateVal)3.new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]]):创建date代表指定当前系统时间字符串的格式:短日期可以使用“/”或“-”作为日期分隔符,但是必须用月/日/年的格式来表示,例如"7/20/96"。小时、分钟、和秒钟之间用冒号分隔,尽管不是这三项都需要指明。"10:"、"10:11".原创 2021-07-26 22:19:55 · 111 阅读 · 0 评论 -
JavaScript Math对象
JavaScript自身定义了很多数学运算的方法被定义在Math对象中. Math自身就是一个对象无需创建直接使用自身中的方法和属性Math的属性PIPI属性代表圆周率Math.abs(x)返回数x的绝对值。Math.ceil(x)对一个数x进行上舍入Math.floor(x)对一个数x进行下舍入Math.max(x)返回指定数中带有较大的值的那个数。…表示可以传递无限个参数Math.min(x,y)返回指定数中带...原创 2021-07-26 22:02:59 · 178 阅读 · 0 评论 -
JavaScript 对象
什么是对象1.在现实世界中,任何(实体/所有的东西)都可叫对象,比如“人”可看作一个对象。“人”具有姓名、性别、年龄、身高、体重等特征,“人”可以吃饭、可以开车、可以运动等动作(具有这些功能)。一个杯子就是一个对象,杯子有什么特征:形状、用途、花纹。。。 杯子:装水;圆、喝水、无 功能:装水。2.简单的讲,对象就是一组属性与方法的集合,比如:“人”的属性(特征)有身高、体重,“人”的功能有吃饭、开车、睡觉等。3.对象是一种复合数据类型,或者称为引用类型。基本数据类型只能用于描述原创 2021-07-26 21:53:16 · 99 阅读 · 0 评论 -
JavaScript 数组
数组是一组数据有序排列的集合。将一组数据按一定顺序组织为一个组合,并对这个组合命名,这样便构成了数组。数组元素:组成数组的每一个数据称为数组的一个数组元素。数组索引:每一个数组元素对应一个整数值,称为数组元素索引,或者数组元素下标。元素索引为非负整数,由0开始依次增加,即第一个元素索引为0,依次为1,2等。数组元素的访问:对数组中各个元素,使用数组名加上以方括号”[ ]”括起来的元素索引进行访问。元素索引为元素在数组中的位置序号。数组的长度:数组元素的个数称为数组的长度。数组是复合数原创 2021-07-26 21:30:42 · 451 阅读 · 3 评论 -
JavaScript 函数 变量的作用域
函数:函数其实就是对一段代码进行封装,被封装的代码总是完成某项功能,函数不会主动的运行,需要在程序中手动的调用函数(比如:用户点击的时候),并且可以多次调用这个函数;函数的定义为什么要使用函数呢?因为函数可以封装一个功能,该功能可以被多次使用从而达到代码重复使用.函数是代码封装和代码复用的体现.最简单的定义语法方式一:函数声明,必须指定函数名function函数的名字(){//功能代码}通过函数的名字调用执行,如果先多次执行,那么就多次调用:函数的名字...原创 2021-07-26 21:09:48 · 179 阅读 · 0 评论 -
【重学前端】CSS常用命名
头部:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink原创 2021-07-21 09:22:56 · 150 阅读 · 0 评论 -
【重学前端】CSS常见事项
1)ul 标签在 Mozilla 中默认是有 padding 值的,而在 IE 中只有 margin 值。 2)同一个的 class 选择符可以在一个文档中重复出现,而 id 选择符却只能出现一次;对一个标签同时使用 class和 id 进行 CSS 定义,如果定义有重复,id 选择符做的定义有效。 3)如果一组要嵌套的标签之间需要些间距的话,那就外面标签的 padding 属性,而不要去定义位于里面的标签的 margin 4)li 标签前面的图标推荐使用 background-image 而.原创 2021-07-21 09:19:11 · 48 阅读 · 0 评论 -
【重学前端】常用CSS样式
CSS制作三角符号<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"/> <title>标题</title> <style type="text/css"> h3{width:200px;background:#ccc;overflow:hidden;} h3 span{ width:0;height:0;overflo原创 2021-07-21 09:17:57 · 60 阅读 · 0 评论 -
【重学前端】CSS hack
CSS hack由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!CSS hack的原理由于不同的浏览器和浏览器各版本对CSS的支持及解析结...原创 2021-07-21 09:15:17 · 333 阅读 · 0 评论 -
【重学前端】CSS 图像拼合技术
图片精灵css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。主要用于网页中的小图标。如京东右侧浮动导航优势:减少http iis请求数 提升了网站性能 减少图片文件数目缺点:1.开发过程比较繁琐2.需要测量计算每一个背景单元的精确位置,进行定位3.后期新加或删除图标比较麻烦怎么使用图片精灵准备工作HTML:.原创 2021-07-21 09:01:02 · 466 阅读 · 1 评论 -
【重学前端】CSS 定位 position
1)广义的“定位”:要将某个元素放到某个位置的时候,这个动作可以称为定位操作,可以使用任何CSS规则来实现,这就是泛指的一个网页排版中的定位操作,使用传统的表格排版时,同样存在定位的问题。2)狭义的“定位”:在CSS中有一个非常重要的属性position,这个单词翻译为中文也是定位的意思。然而要使用CSS进行定位操作并不仅仅通过这个属性来实现。position作用: 设置或检索对象的定位方式。语法: position :static| absolute | fixed| relative原创 2021-07-21 08:55:34 · 152 阅读 · 0 评论 -
【重学前端】CSS 浮动 float
概念float是css样式中的定位属性,用于设置标签对象(如:<div>标签盒子、<p>标签、<li>标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。浮动的框可以向左或向右移动,直到它的外边缘碰到父级盒子(父容器)或另一个浮动框(子元素)的边框为止。只要设置了浮动,就将盒子脱离了文本流。由于浮动框不在文本流中,所以文本流中的其它元素,表现出就像浮动框不存在一样,自动上移,占原创 2021-07-21 08:46:31 · 328 阅读 · 0 评论 -
【重学前端】CSS 盒子模型
“盒子”与“模型”的概念网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), 这些都是CSS盒子具备属性。这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。特点:每个盒子都有:边界、边框、填充、内容四个属性;并且每个盒子都有尺寸。每...原创 2021-07-20 09:03:57 · 289 阅读 · 1 评论 -
【重学前端】CSS 背景 Background
background-color 背景颜色作用: 设置或检索对象的背景颜色。语法: background-color :transparent| color参数:transparent : 背景色透明color : 指定颜色。示例:p { background-color: red; }background-image 背景图片作用: 设置或检索对象的背景图像。语法: background-image :none| url (url)参数:none : 无原创 2021-07-19 23:11:23 · 438 阅读 · 0 评论 -
【重学前端】CSS 文本属性Text
letter-spacing字间距作用: 检索或设置对象中的文字之间的间隔。语法: letter-spacing :normal|length示例:<html> <head> ….. <style type="text/css"> div { letter-spacing:6px; } </style> </head> ……</html>word-spacing 词间距(英文)作用..原创 2021-07-19 22:56:18 · 233 阅读 · 0 评论 -
【重学前端】CSS 字体属性 Font
font-family 字体名称作用: 设置或检索用于对象中文本的字体名称序列。语法: font-family :name示例:p{ font-family: 微软雅黑; }p{ font-family: "arial block"; }p{ font-family: Courier, "arial block"; }p{ font-family: Courier, "arial block", 微软雅黑; }注:1)字体名称可以是英文也可以是中文。2)英文字体如果出来多个.原创 2021-07-19 22:44:35 · 708 阅读 · 1 评论