+ 前端
文章平均质量分 57
前端
youaresherlock
江湖人称狗哥!
展开
-
HTML分割线效果
HTML分割线效果 本文转载自:http://blog.csdn.net/alex8046/article/details/51917069一、普通1、<HR> 2、<HR align=center width=300 color=#987cb9 SIZE=1> align 线条位置(可选left、right、center);width 线条长度;color 颜...转载 2018-11-09 20:26:38 · 7101 阅读 · 1 评论 -
css层的定位position、absolute、relative层叠加的五条叠加法则
css层的定位position、absolute、relative层叠加的五条叠加法则from http://www.cnblogs.com/joe235/archive/2011/03/03/1970006.htmlcss层的定位position、absolute、relative层叠加的五条叠加法则貌似很多同学对为什么这个div在上层,那个div在下层、无论如何设置z-index都...转载 2019-01-12 10:00:12 · 486 阅读 · 0 评论 -
javascript与html5实战
建议阅读人群: 前端学过html5、css、javascript的开发者经过一些实战,各位程序员就可以开始学习一些框架了,如jquery、boostrap、vue.js、angular、react等等。源代码图片等地址: 轮播图项目资源参考文档:MSDN IconFont分享一个小模块的实战,是轮播图的实现。效果整体布局样式:主菜单内容:流程图:代码部...原创 2019-01-13 18:25:43 · 417 阅读 · 1 评论 -
JavaScript简明教程三
适合有其他语言编程经验的人快速入门JS(全部阅读大概需要一个小时)视频教程及ppt代码地址github5. javascript DOM文档地址: MDN DOM1. DOM基础1. DOM基本查找方法(1) document.getElementById()语法:document.getElementById(“id”)功能: 返回对拥有指定ID的第一个对象的引用返...原创 2019-01-08 15:33:09 · 482 阅读 · 3 评论 -
jquery链式语法
虽然jquery已经被淘汰了,但是我想通过快速学习jquery了解其优点和缺点,一方面锻炼自己的学习能力,一方面对其设计哲学和设计理念进行探索.面对前端框架快速变化的时代背景下,我们还是沉下心好好分析内部的工作方式吧,而不仅仅在于表象链式语法:因为 jQuery 库的缘故,链式语法在前端界变得非常流行。实际上这是一种非常容易实现的模式。基本上,你只需要让每个函数返回 ‘this’,这样其他函...原创 2019-01-19 21:42:14 · 1262 阅读 · 0 评论 -
JS函数创建三种方式及JS创建对象三种方式
javaScript 函数创建的三种方式方式一:函数定义function 函数名( 参数列表 ) {函数体}//最基本的函数声明function voidFun(){ alert("我是方式一定义的无参函数");}// 函数调用(调用时的调用代码写在函数体前后都可以)voidFun();方式二:函数表达式,又叫函数字面量var 函数名 = function(参数列表...原创 2019-02-17 11:18:47 · 385 阅读 · 0 评论 -
js里的事件委托
1. 什么是事件委托事件:我们的点击(onclick), 鼠标经过/离开(onmouseover/onmouseout), 键盘摁下/松开(onkeypress/onkeyup)等行为就是一个个的事件。委托:虽然是周末,我依然在上班,但我有个快递今天会到,我就让在家休假的女朋友帮我取了这个快递。这个过程称之为“委托”(本来该由我去做的事情我加到了别人-女朋友身上)。事件委托:...原创 2019-02-17 19:51:03 · 318 阅读 · 0 评论 -
javascript:使用call或者apply扩充作用域
apply() 和 call()这两个方法,我们不止是用来做参数传递的,我们可以改变this,也就是让方法本身和方法中使用的this对象无耦合。eg1: &lt;script&gt; this.name = "name inwindow"; function methods1() { console.log("下方打印的是作用于下的name属性") c原创 2019-02-23 12:08:35 · 204 阅读 · 0 评论 -
瀑布流布局(原生js,jQuery实现)
项目地址: 瀑布流布局实战1. 瀑布流式布局简介什么是瀑布流布局一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格应用领域电商导购 想去网、蘑菇街、美丽说、好享说…兴趣图谱分享 花瓣网、知美网…细分垂直领域 针对...原创 2019-03-04 23:55:07 · 585 阅读 · 0 评论 -
jQuery插件概述及实践
jQuery插件机制jQuery主要有两种使用方法:1.在jQuery集合对象上面调用方法2. 直接调用jQuery方法扩展:扩展jQuery对象上的方法: jQuery.fn.extend()扩展jQuery工具方法: jQuery.extend()如何寻找自己需要的插件:http://plugins.jquery.com/https://www.npmjs.com...原创 2019-02-26 22:10:16 · 282 阅读 · 0 评论 -
websocket简明教程(nodejs-websocket库、socket.io库实现Web聊天室)
源码地址: github建议阅读时间: 1 hour在学习websocket中,查阅了大量的中英文资料,这里将成果分享给大家原创 2019-03-15 23:15:01 · 6313 阅读 · 1 评论 -
http与websocket协议区别
相同点:都是基于TCP协议基础上,HTTP如此,websocket亦如此都是需要经过request,response阶段,其中websocket在发起请求的时候其实相当于借用了http的头部格式,区别就在于websocket请求头部有一个upgrade:websocket这样的字段(当然还有其他字段,但是这个字段最为关键)。如果请求失败,返回的错误编号都是相同的,例如:4...原创 2019-03-12 16:54:42 · 594 阅读 · 0 评论 -
一文读懂正则表达式
我们在开发中经常会用到正则表达式,比如匹配ip address、phone number、mac address、email等等。熟悉各种开发语言的中级程序员可能经常会要翻手册来用正则表达式原创 2019-03-31 00:06:31 · 560 阅读 · 0 评论 -
html5俄罗斯方块
游戏介绍: 实现简单的俄罗斯方块的游戏,调整整个网页布局.会用到html5/css3/js相关知识,适合前端初学者练手建议阅读时间: 1 hourgithub address: 源代码效果图:部分代码: 有需要自己github下载index.html<!DOCTYPE html><html lang="en"><head> ...原创 2019-03-23 23:07:49 · 1694 阅读 · 0 评论 -
一文读懂Emmet
Emmet语法建议阅读时间 15分钟什么是 Emmet 语法?简单来说,就是可以快速构建 HTML 结构的快捷语法。本人使用的是VSCode编辑器,安装插件是JavaScript (ES6) code snippets,支持Emmet语法,真的很方便1. 什么是Emmet参考文档:EmmetEmmet takes the snippets idea to a whole new...原创 2019-01-02 11:06:14 · 331 阅读 · 0 评论 -
javascript并行执行详解
参考文档: Timer1. js为什么是单线程的?javascript是单线程语言,单线程就是所执行的代码必须按照顺序,同一时间只能做一件事。作为浏览器脚本语言,JS的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JS脚本创建多个线程,但是子线程完全受主线程控制,且不得操作...原创 2019-01-04 18:10:13 · 5485 阅读 · 1 评论 -
HTML5视频及实战
最近在看HeadFirstHTML与CSS,虽然是小白书,但是我对于前端并没有系统的学习过,都是用到了再看,所以掌握的不是很好。因此想补充自己前端的知识。关于这本书的学习笔记我只写这一篇(接下来继续看HTML5及JS的相关知识)代码素材地址:https://github.com/youaresherlock/headfirstHtmlAndCSSHTML5 DOM 为 <au...原创 2018-11-09 20:44:00 · 850 阅读 · 0 评论 -
HTML 编码规范之布尔型属性
布尔属性: XHTML 规范要求为布尔型属性赋值,到了HTML5,一切化繁为简。HTML5 规范规定:元素的布尔型属性如果有值,就是 true,如果没有值,就是 false。因此,在声明布尔型属性时,不用赋值。 我们可以看到<input>标签当时单选框的时候(radio),可以直接用checked表示预先初始选中的按钮。当然也可以checked="everything...原创 2018-11-12 18:04:53 · 2385 阅读 · 0 评论 -
javascript事件机制
前言又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把我们今天来猜一猜,探讨探讨,javascript底层事件机制是如何实现的博客里面关于事件绑定与执行顺序一块理解有误,请看最新博客基础知识事件捕获/冒泡我们点击一个span,我可能就想点击一个span,事实上他是先点击document,然后点击事...转载 2018-11-19 13:41:02 · 248 阅读 · 0 评论 -
HTML5地理定位
在学习HeadFirstHtml5中,学到了地理定位,之前用过百度的地图SDK,是毕业设计Android APP的其中的一个小功能,这次我们用Google开放的API,使用JS来实现浏览器的地理定位。 定位原理:一般是GPS定位(4颗卫星,利用电磁波来定位), 或者基站三角定位(利用信号强度定位), 以及WIFI定位(你开了WIFI就能扫描到附近的WIFI,如果此时你开启了定...原创 2018-11-21 23:15:35 · 1038 阅读 · 0 评论 -
跨域请求
代码地址:https://github.com/youaresherlock/HeadFirstHtml5在阅读headfirsthtml5时,学习了同源策略以及JSONP。下面我简单介绍一下:浏览器的同源策略:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。它是由Netscape提出的一个著名的安全策略,现...原创 2018-11-23 20:10:03 · 406 阅读 · 0 评论 -
html5的本地存储及案例
在学习Head First HTML5 Programming一书中,学习到了html5的web存储,这里简单总结一下1.html中的存储形式(主流形式,userData之类的忽略):(1) cookie 是客户端用来存储数据的一种选项,它既可以在客户端设置也可以在服务端设置。cookie会跟随任意HTTP请求一起发送。是以键值对的方式来进行存储,主要作用是来进行http...原创 2018-11-19 16:33:05 · 1143 阅读 · 0 评论 -
AJAX请求和普通HTTP请求区别(postman分析)
两者本质区别:AJAX通XMLHttpRequest对象请求服务器服务器接受请求返数据实现刷新交互普通http请求通httpRequest象请求服务器接受请求返数据需要页面刷新AJAX请求头会多一个x-requested-with参数,值为XMLHttpRequest 下面我用postman模拟Ajax请求我本地服务器上的sales.json数据我们用Post方法,模拟表单输入...原创 2018-11-22 20:51:16 · 8935 阅读 · 0 评论 -
javascript的localStorage(Web Storage)小项目
我们下面举一个javascript localStorage练手的小项目,是headfirsthtml5中的一个例子,不过我将其进行美化。项目资源(源码,图片)地址:https://github.com/youaresherlock/HeadFirstHtml5/tree/master/chapter9做什么?我们通过下拉列表选择要生成的便利贴的Color,以及输入便利贴的Text文本...原创 2018-12-02 23:19:40 · 365 阅读 · 0 评论 -
JavaScript实现曼德勃罗(Mandelbrot)集合
运用知识: js线程、Mandelbrot 1. js线程 js线程简介:在HTML5中的线程是这样一种机制,它允许在Web程序中并发执行多个JS脚本,每一个脚本执行流都称为一个线程,彼此间相互独立,并且有浏览器中JS引擎负责管理。HTML5中的Web worker可以分为两种不同线程类型,一个是专用线程DedicatedWorker,一个是共享线程Shar...原创 2018-12-03 20:11:37 · 2263 阅读 · 0 评论 -
JavaScript简明教程一
特意给前端初学者用markdown做一个js简明教程,分享给大家视频教程及ppt代码地址https://github.com/youaresherlock/JavaScriptLearningNotes1. 初识javascript什么是javascriptjavascript是一种基于对象和事件驱动的客户端脚本语言,最初的设计是为了检验HTML表单输入的正确性,起源于Ne...原创 2018-12-16 13:18:01 · 603 阅读 · 0 评论 -
JavaScript中的NaN
可以参考文档 MDN什么是NaN全局属性 NaN 表示 Not-A-Number (非数值)的值。NaN 是一个全局对象的属性。NaN 属性的初始值就是 NaN,和 Number.NaN 的值一样。在 ES5 中, NaN 属性是一个不可配置(non-configurable),不可写(non-writable)的属性。但在 ES3 中,这个属性的值是可以被更改的,但是也应该避...原创 2018-12-18 18:15:33 · 1340 阅读 · 0 评论 -
JavaScript为什么是单线程的?
参考文档: JS注: javascript是单线程语言,单线程就是所执行的代码必须按照顺序,同一时间只能做一件事。作为浏览器脚本语言,JS的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JS脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有...原创 2019-01-03 18:23:05 · 1139 阅读 · 0 评论 -
JavaScript简明教程二
适合有其他语言编程经验的人快速入门JS(全部阅读大概需要一个小时)视频教程及ppt代码地址github2. JavaScript的流程控制语句1. js的分支语句1. if语句语法一:condition为true则执行 if(condition){ statement1; }语法二: if(condition){ s...原创 2018-12-30 12:10:30 · 436 阅读 · 0 评论 -
ajax全接触
在前端开发中,ajax请求是必需要掌握的基础支持,同时程序员也应该了解同源策略以及各种跨域方法,以便更好的应用于实际的开发工作中. 我们会介绍javascript实现ajax请求,以及jquery(不建议深入学习jquery,但是应该了解)实现ajax请求,另外介绍4种常见的跨域方式和实验代码(php简单服务端和html代码). 读者人群: 前端入门者,全栈开发者及编程爱好者(会java...原创 2019-04-24 23:21:19 · 312 阅读 · 0 评论