前端
文章平均质量分 52
前段开发的一些知识点,主要包括html、css和JavaScript的一些小技巧和知识点的整理
输出是最好的学习
这个作者很懒,什么都没留下…
展开
-
JSON的那些事儿(你真的了解JSON吗)
前言差不多一周没有写博客,这篇博客的内容是自己前几天就看的了,按照道理应该几天前就分享出来,不过最近因为准备期末考试的原因,也耽误了,今天趁着周六,难得的睡到8点多起床,在这里总结一些这篇文章,迎接这个愉快而充实的周末。什么是JSON我们来看看MDN怎么说的 JSON对象包含用于解析 JavaScript Object Notation (JSON) 的方法,并将值转换为 JSON。原创 2017-12-09 11:41:51 · 1159 阅读 · 0 评论 -
JavaScript如何获取样式(行间)
前言:又接触了一些不知道的知识,真开心。下面的样式都只适用于行间样式!!!下面的样式都只适用于行间样式!!!下面的样式都只适用于行间样式!!!1、cssText关于这个属性,大家应该都很属性。<div class="box" style="color: red;font-size: 34px;"> welcome</div><script> window.onload = fun原创 2017-11-21 00:40:59 · 1296 阅读 · 0 评论 -
DOM扩展的那些事儿
前言:关于DOM的扩展,之前自己也接触了一些,但是没有系统的去看,这次有机会系统的学习JavaScript,所以就把这些知识好好的总结一下。1、选择符的扩展在没有扩展之前,我们在进行元素选择之前,使用最广泛的就是document.getElementById()但是在扩展以后,我们在进行元素选择的时候方便了很多,关于选择符一共扩展了三个方法document.querySelector()docum原创 2017-11-13 22:23:43 · 183 阅读 · 0 评论 -
JavaScript中的文档碎片DocumentFragment
前言:时隔两年又一次接触到文档碎片,还记得当时blue老师讲文档碎片的时候,自己仍然是记忆犹新。学习了这个知识点以后,从来没有用过,这次在看书的时候看到这个东西了,想着还是来总结一下吧,说不定后面在哪个项目都用到了(主要原因是以前写网站都没有考虑到性能优化,现在还是的考虑一下这个问题啦)文档碎片是什么东西如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常1原创 2017-11-12 23:28:05 · 677 阅读 · 0 评论 -
DOM节点的增加,删除,修改,查找
前言:最近开始晚睡了,不知道为什么睡不太着,有时候有一些莫名的压力感,有时候又有一些莫名的兴奋感。今天看完了《下一个倒下的会不会是华为》,对于华为的整个企业的文化和发展都有一个全新的认识,但是让自己感悟更加深刻地则是华为的狼性文化,垫子文化。还是步入正题吧…1、每一个节点都有nodeType属性,表面节点的类型。我们通过nodeType的具体值来判断具体是什么节点。此外每个节点也都有nodeN原创 2017-11-02 01:04:26 · 6538 阅读 · 0 评论 -
不使用后台,直接使用JavaScript实现检索功能
在看BOM的时候,发现一个很有意思的方法find。碰巧最近一个公司让我做一个东西,他想要搜索功能,但是页面却全部都是静态的。哈哈,发现这个真是太好了,赶快来分享一波<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>welcome</title> <style> div {原创 2017-10-29 00:30:49 · 2304 阅读 · 1 评论 -
超时调用和间歇调用
前言:之前一直在看JavaScript的高级程序设计,看了几百页的时候因为一些原因停了一段时间,现在接着看,发现有好多东西又忘记啦。想想主要是因为里面细节太多了,并且平时很多东西也并没有去使用,所以导致遗忘率很高。所以决定还是在每次收获了一个点以后,在这里记录一下,来加深自己的记忆。主要区别: 超时调用setTimeout,只执行一次,自动关闭。 间歇调用setIntervalout,一直执行,原创 2017-10-28 23:44:48 · 1084 阅读 · 0 评论 -
JavaScript如何将一个数字转化为2进制
前言:记得自己在学习数据结构的时候,在进制进制转换的时候通过递归实现过,也通过堆栈实现过,但是在JavaScript中有一个非常方便的方法可以实现进制转换,下面分享一下堆栈的写法以及JavaScript中最方法的写法 堆栈实现方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Documen原创 2017-09-13 23:50:56 · 5026 阅读 · 0 评论 -
JavaScript中数组的那些方法
前言:最近一直在看JavaScript高级程序设计,可谓是经典中的经典,虽然看的还不多,但是收获已经不少。对于自己之前了解不够的,在这里记录一下,以便加深自己的印象,如果能够帮到其他人那当然是更好了1、堆栈方法 对于堆栈,只要是了解过数据结构的人都很清楚,这里就不介绍具体底层怎么实现的,后面在总结数据结构的时候会对其介绍。对于堆栈,最简单的理解就是后进先出,可以想象为在一个直接和乒乓球直径一样大的原创 2017-09-11 22:54:14 · 385 阅读 · 1 评论 -
JavaScript的label语句
前言:什么?JavaScript还有label语句?这不是HTML中的标签吗?下面进行简单的介绍 首先先来复习一下for循环中的break和continue continue是退出变量为j的循环一次(也就是退出当前循环一次),然后继续执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Do原创 2017-09-10 22:34:43 · 519 阅读 · 0 评论 -
overflow的那些事儿
前言:关于这个,自己平时用的比较少。本来想着总结一些scroll的,但是发现把这个总结完了就已经挺多了,就单独当做一篇文章发了吧1、实现上下滚动,左右不滚动第一种方式.div1 { height: 200px; width: 100px; border: 1px solid red; overflow: auto;}第二种方式.div1 { height:原创 2017-11-25 01:07:25 · 377 阅读 · 0 评论 -
那些不常见却适用的CSS属性(三)
前言:接着上次没有总结完的不常见却适用的CSS属性18、resize 自己之前也接触过这个属性,只是自己之前一直只是使用none,这里知道了原来还有vertical, horizontal,以及both属性。在使用这个属性的时候一定要和overflow配合使用,才可以达到效果,代码如下<!DOCTYPE html><html lang="en"><head> <meta charset原创 2017-11-14 23:14:11 · 224 阅读 · 0 评论 -
用css和JavaScript分别实现水平垂直居中
前言:在看张鑫旭老师的博客的时候,发现了这个好东西,自己来总结一下,加深自己的印象张老师的博客原文:小tip: margin:auto实现绝对定位元素的水平垂直居中1、利用绝对定位实现水平垂直居中html lang="en">head> meta charset="UTF-8"> title>welcometitle> style>原创 2017-11-11 09:58:12 · 851 阅读 · 0 评论 -
用CSS3实现响应式的瀑布流
前言:虽然瀑布流在现在不是很流行了,自己之前通过JavaScript和css3都实现过。这次做项目的时候又遇到了这个问题,就重新整理了一下,并把代码放出来分享一下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .wate原创 2017-11-09 11:24:46 · 8828 阅读 · 2 评论 -
翻页折叠的那些事儿
前言:前几天写了一个使用border实现翻页折叠的东西,现在碰巧需要使用了。但是有一个问题就是,希望在折叠以后,在角落出现文字,方便点击,所以自己又折腾了一番,发现之前总结的linear-gradient。折腾了一番,终于实现了自己想要的效果,分享一波因为之前自己写过一个详细的介绍,所以这里只是换一个方式实现,如果有人觉得看起来不是很明白,可以看看下面我写的两个博客 1.线性渐变linear-gr原创 2017-11-03 16:57:13 · 361 阅读 · 0 评论 -
那些不常见却适用的CSS属性(二)
前言:这篇博客接着上一篇博客,如果你对这一篇博客感兴趣,那么建议你也去看看上一篇。13、content,与 :before 及 :after 伪元素配合使用,来插入生成内容。可以选择的属性值为 normal,什么都没有 attr(attribute),选择元素的属性值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-原创 2017-10-28 08:26:33 · 403 阅读 · 0 评论 -
那些不常见却适用的CSS属性(一)
前言:今天看到一个大佬的博客,发现使用了一个counter-reset属性,这是什么?怎么从来都没见过。于是赶快去W3C,发现自己好多属性都很不熟悉。今天在这里总结一下1、backface-visibility。元素不面向屏幕的时候是否可见(进行rotateY(180deg)以后),可以选择的值有两个hidden和visible,默认值为visible。 使用该属性实现翻转效果(复制代码直接可以运原创 2017-10-27 15:53:30 · 714 阅读 · 0 评论 -
border的那些事儿,使用border实现翻页折叠
前言:今天上课的时候老师提到了border的四个边其实是四个梯形。其实这个在之前的时候自己在使用input的时候,出现输入内容位置变动的时候就发现了,所以没有太在意。但是突然同桌对我说,使用border可以实现翻页折叠的效果。这个就马上引起我的兴趣,下课以后马上搜索,发现的确是可以很轻松的使用,在这里进行简单的分享1、设border的那些事儿我们平时在使用的border的时候,很多情况都是下面这样b原创 2017-10-27 10:28:46 · 509 阅读 · 0 评论 -
输入内容后input控件的位置改变
写了挺久的前端代码,不知道为什么之前没有遇到这个问题。既然遇到了,那么就在这里总结一下经验,遇到这个问题,是我在做一个搜索框的时候。并且最奇怪的是我输入英文和数字,控件位置不改变,但是只要输入汉字,那么位置就改变。由于这一点,我打消了用JavaScript来解决的想法,因为输入的代价太大,并且仔细想想肯定css可以解决这个问题的,下面是我解决的代码。input{ border:1px sol原创 2017-09-29 12:25:51 · 4249 阅读 · 0 评论 -
响应式布局之min-width,max-width
min-width表面这个div的最小宽度,而max-width限制这个div的最大宽度。因为我们将三个div都设置浮动,并且设置其最大的宽度,另外所以当容器的宽度不能够满足div宽度的时候,就会换行到下一行,从而实现响应式布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>响应式布局</ti原创 2017-09-10 17:48:17 · 4776 阅读 · 0 评论 -
响应式布局之媒介查询和百分比
百分比<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>响应式布局</title> <style type="text/css"> .container{ width: 600px; margin:0 auto;原创 2017-09-06 16:18:05 · 1079 阅读 · 0 评论 -
CSS选择器总结
前言:CSS中的选择器比较多,但是平时自己在书写代码的时候使用的并不多,这里对其进行简单的总结常见选择器p { color: #ccc;}p a { font-size: .8rem;}#content { margin: 0 auto;}.header { height: 200px;}a:link { color: blue;}a:vi原创 2017-09-06 14:25:45 · 289 阅读 · 0 评论 -
CSS书写规范以及命名规则
前言:很早就想些这篇文章了,但是自己一直懒,拖到现在才来总结CSS书写顺序1.位置属性 position top right z-index display float clear2.大小属性 width height padding margin3.文字属性 font-size line-height lette原创 2017-09-06 01:31:11 · 419 阅读 · 0 评论 -
vue-router的那些事儿
前言:最近的一个项目使用了vue-router。遇到几个坑,总结一下1、二级路由页面在刷新的时候出现空白,控制台报bundle.js404错误 解决方法 在index.html引入bundle.js的时候使用根相对路径,也就是下面这样<script type="text/javascript" src="/dist/bundle.js"></script>2、地址栏中出现#号,让人看起来很不爽,原创 2017-11-04 10:42:16 · 245 阅读 · 0 评论 -
非父子组件的数据传递
复制代码可以直接查看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script> <styl原创 2017-09-05 23:24:06 · 602 阅读 · 0 评论 -
Vue学习笔记十二
过滤器基本过滤器<div id="app"> {{msg | filterA | filterB}}</div><script type="text/javascript">var app = new Vue({ el: "#app", data: { msg: "xiaod" }, filters: { filterA:原创 2017-09-05 20:23:49 · 174 阅读 · 0 评论 -
Vue学习笔记十一
Render函数&JSX正常注册组件,注意这里的顺序,需要先全局注册,再实例化。<div id="app"> <anchored-heading :level="1">Hello world!</anchored-heading></div><script type="text/x-template" id="anchored-heading-template"><h1 v-if="l原创 2017-09-05 19:23:42 · 243 阅读 · 0 评论 -
Vue学习笔记九
Vue的过渡效果先来一个例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg.com/vue"></script> <style type="te原创 2017-09-05 17:17:44 · 200 阅读 · 0 评论 -
Vue学习笔记八
子组件向父组件传值,利用自定义事件div id="app"> p>{{total}}p> //定义一个事件increment,定义一个方法getResult,increment事件触发时,执行getResult方法 child @increment="getResult">child> child @increment="ge原创 2017-09-05 23:32:21 · 164 阅读 · 0 评论 -
Vue学习笔记七
使用prop向子组件传递数据div id="app"> child v-for="item in items" name="item.name">child> div> script type="text/javascript"> var child = { props:['name'], temp原创 2017-09-05 09:56:55 · 252 阅读 · 0 评论 -
Vue学习笔记六
组件注册全局注册<div id="app"> <list></list> </div> <script type="text/javascript"> Vue.component('list',{ template:"<div><h2>xiaoD</h2><p>welcome</p></div>" })原创 2017-09-04 23:27:38 · 130 阅读 · 0 评论 -
Vue学习笔记五
v-modelv-model在双向绑定的时候会忽视value,checked,selected特征的初始值。 v-model可以绑定的控件有textarea,checked,radio,select。其他控件不能够通过v-model双向绑定 对于多个复选框,我们可以通过绑定一个数组的形式实现<div id="app"> <input type="checkbox" value="原创 2017-09-04 23:04:49 · 170 阅读 · 0 评论 -
Vue学习笔记三
v-for中就地复用原则当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。 解决方法: 建议尽可能使用 v-for 来提供 key ,除非 DOM 内容遍历起来非常简单,或者你是有意识的要依赖于默认行为以原创 2017-09-04 20:56:56 · 705 阅读 · 0 评论 -
Vue学习笔记二
观察者在数据变化响应,执行异步操作或者开销比较大的时候,我们可以采用watch绑定class数组方法一:<div id="app"> <div v-bind:class="classObject">hello xiaoD</div> </div> <script type="text/javascript"> var app = new Vue({原创 2017-09-04 18:58:30 · 191 阅读 · 0 评论 -
Vue学习笔记一
v-once当name修改的时候,不会改变,只绑定一次,并且会影响到span节点中所有的数据绑定<span v-once>姓名:{{name}}</span>这里讲rawHTML解析为HTML代码,主要使用在后台编辑文章发布的时候v-html<span v-html="rawHTML"></span>数据绑定时,也可以计算,但是必须是单个表达式,对于if语句采用三元表达式例如通过后台获取图片名称<原创 2017-09-04 16:40:24 · 262 阅读 · 0 评论 -
webSocket的那些事儿
如果你想创建一个应用,浏览器与服务器需要正式的对话,那你可能使用XMLHttpRequest对象,使用xmlHttpRequest对象在很多时候是没有问题的,但同样也有很多情况不合适。首先,XMLHttpRequest不适合快速的来回发送多条消息。其次没有办法将一次调用与下一次调用联系起来,每次网页发送请求,服务器都要确定请求来自何方。在这种情况下,要想把一系列请求关联起来,服务器代码会变得非常的原创 2017-08-15 10:01:01 · 186 阅读 · 0 评论 -
与web服务器通信的XMLHttpRequest
实现网页与web服务器直接对话的关键是XMLHttpRequest。XMLHttpRequest非常适合从服务器上获取数据,下面是一些地方主要的用途1.保存在服务器上面的数据2.通过服务器完成复杂的计算3.从其他服务器获取数据(这里主要是通过XMLHttpRequest请求,让自己的服务器从其他服务器上获取数据)主要采用php作为后台语言编写,test.php的代码如下:<?p原创 2017-07-18 16:02:29 · 690 阅读 · 0 评论 -
HTML5中了不起的离线应用
离线应用的一个基本技术就是缓存,也就是下载网页在本地计算机保存,当计算机不能够上网的时候,仍然可以访问。要创建一个离线应用,我们主要有两步操作。第一创建描述文件;第二,修改网页,引用描述文件创建描述文件(test.appcache)通过代码说明:CACHE MANIFEST#pagesindex.htmlindex2.html#style & scripts#styl原创 2017-08-14 19:06:25 · 270 阅读 · 0 评论 -
高大上的浏览器数据引擎IndexDB
直接上代码,相关的说明都在注释中了 Document #links,#linkDetails{ margin-top: 100px; width: 400px; height: 300px; border:1px solid red; float:left; } .linkButton{ color:red; cursor: pointer;原创 2017-07-18 12:16:24 · 1338 阅读 · 0 评论 -
使用本地图片文件的拖拽
在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上代码 Document #dropBox{ width: 300px; height: 300px; border:1px solid red; font-size: 40px; text-align: center; background: lightyellow原创 2017-07-18 12:02:38 · 470 阅读 · 0 评论