笔记
关注
分享
扫一扫
Frank.Yi
广东工业大学计算机科学与技术大三 前端工程师
展开
-
css基本样式
块级元素行内元素block-level line-level块级元素包含块级和行内行内只能包括含文本行和行内块级元素div h p hrform ul dl oltable li dd dt dd dhinline-level`em strong span a br img button input label select textarea宽度只对块级元素有效，对...原创 2019-04-10 17:42:14 · 232 阅读 · 0 评论 -
jQuery事件
jQuery事件.on等价写法$().on('click',function(){})$().click(function(){})解绑事件$().on('click.hello',function(){})$().off('click.hello')事件代理$('.box ul').on('click', 'li', function(){})相当于原生js的d...原创 2019-05-07 11:55:19 · 235 阅读 · 0 评论 -
豆瓣电影
滚动scrollTop元素的scrollTop值是对元素顶部到其最顶部可见内容的距离的度量。获取数据的加锁问题设置一个全局变量isLoading,默认为flase在ajax获取里面判断isLoading是否为true,如果是则直接返回在判断完成后设置isLoading为true在ajax执行完成以后设置isLoading为falsecss3动画动画百分之0为0度百分之百为...原创 2019-05-12 20:33:28 · 576 阅读 · 0 评论 -
瀑布流与懒加载
图片懒加载图片都是一个loading的加载状态举例：瞬间，互联网要获取20张网络图片的请求，稍等片刻之后，并不是一开始就展示所有的图片，滚动哪里就加载几张图片图片懒加载的作用作用： 缓解网络压力，使得用户体验更好img缓存机制图片懒加载如何展现的呢，img指向一个图片，其它的img也只是加载加载这个图片，其它的图片片加载的时候，直接从缓存里面进行加载图片的懒加载的问题如何判断图片...原创 2019-05-25 22:30:34 · 1297 阅读 · 0 评论 -
HugerMusic静态页面
HugerMusic实现一款响应式大屏webappHungerMusic 布局思路需要做大屏幕的响应式，不能出现滚动条窗口的字体也会等比的出现百分比的缩小vh高度的百分之十，十分之一垂直高度可以用vh 水平可以加一下媒体查询HugerMusic 布局答疑用vw的话缝隙特别长，用vh用户的高度正好满屏静态页面filterfilter CSS属性将模糊或颜色偏移等图形效果...原创 2019-05-26 17:39:57 · 163 阅读 · 0 评论 -
面向对象、原型、原型链
面向对象、原型、原型链JS中的对象key:value 集合就是对象OOP(Object-oriented programming,面向对象编程)构造对象使用函数的自动化function createObj(nick, age){ var obj = { nick: nick, age: age, printName: function(){ ...原创 2019-06-05 21:02:52 · 237 阅读 · 0 评论 -
HugerMuicJS实现部分
#HugerMusic$(document)$(document)指的是当前文档，就是你当前看到的整个网页$.html()get the html contents of the first element in the set of matched elements or set the HTML contents of every matched elements### $.anim...原创 2019-06-03 16:48:06 · 180 阅读 · 0 评论 -
day4-DCampous
### 1.Uncaught TypeError: wrapper.draggable is not a function的时候出现问题![](https://upload-images.jianshu.io/upload_images/16991273-27fa651782de7961.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1...原创 2019-07-08 09:10:49 · 253 阅读 · 0 评论 -
leaflet图层组件
cmsAJAX获取数据的写法url写法实际ip地址link MDN属性说明 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcD...原创 2019-07-08 17:39:58 · 1241 阅读 · 0 评论 -
day1-DCampous
meta<meta http-equiv=“Content-type” content=“text-html”;charest=“utf-8">content-Type(显示字符集的设定)用法：<metahttp-equiv="content-Type"content="text/html;charset=gb2312”><meta http-equiv=...原创 2019-07-03 10:09:14 · 129 阅读 · 0 评论 -
day2-DCampous
dl是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。<html><body><h2>一个定义列表：</h2><dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器&l...原创 2019-07-04 10:25:53 · 162 阅读 · 0 评论 -
Day3-DCampous
开发笔记分屏 左边代码 右边页面进行调试点击目标网页直接查看源代码把需要的工具分类到Chrome上的另一个文件夹当js动画加载不出来的时候，可以尝试加载一个css动画$(document).ready(function)当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。jquery弹出层pirobox$().piroBox_ex...原创 2019-07-05 09:09:19 · 130 阅读 · 0 评论 -
当通过ajax加载的图片无法出现piroBox轮播
源代码$(document).ready(function () { $().piroBox_ext({ piro_speed: 700, bg_alpha: 0.5, piro_scroll: true });});$(document).ready()ready事件在DOM结构绘制完成之后就会执行，这样能确保就算有大量...原创 2019-07-05 15:43:35 · 385 阅读 · 0 评论 -
jQuery选择器
JQueryjquery.com什么是jQueryjQuery是一个快速，小巧，功能丰富的JavaScript库。 它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。 通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。为什么要使用jQueryDOM API难用存在兼容性问题功能太少，不...原创 2019-05-01 14:15:53 · 364 阅读 · 0 评论 -
动画队列
动画队列jQuery中的animate的自定义动画中，含有动画队列的感念。将所要执行的动画按一个个的排列成一队，并先后顺序的一个个的执行。### 范例代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <...原创 2019-05-06 09:41:59 · 736 阅读 · 0 评论 -
闭包
#闭包闭包的定义一个函数和它的词法作用域的结合词法作用域作用域链函数在执行的过程中，先从自己内部找变量如果找不到，再从创建当前函数所在的作用域去找，以此往上注意找的是变量的当前的状态闭包函数连同它作用域链上的要找的这个变量，共同构成闭包一般情况下使用闭包主要是为了封装数据暂存数据function car(){ var speed = 0 function ...原创 2019-04-29 22:00:02 · 191 阅读 · 0 评论 -
浏览器加载机制 & 白屏和FOUC演示
进阶：浏览器加载机制 & 白屏和FOUC演示网页是什么网页 = html+css+javascriptJavaScript: 操作网页内容，实现功能或效果JavaScript 发展历史ECMASCript和Javascript 前者是后着的核心语言ECMAScript举例来说ES4 ES5 ES6指的是什么浏览器的渲染机制服务器发送标签浏览器解析HTM...原创 2019-04-10 17:52:17 · 620 阅读 · 0 评论 -
定时器
setTimeout用法 & 任务队列异步函数节流定时器setTimeOutsetTimeout函数用来指定某个函数或某段代码在多少毫秒之后执行。function f(){ console.log(2);}setTimeout(f,1000);// 或者setTimeout(function (){console.log(2)},1000);在1000ms后...原创 2019-04-16 11:41:33 · 167 阅读 · 0 评论 -
Dom元素及其操作
Dom元素及其操作Document Object model(文件对象模型)document对象html文档都会变成document.headdocument.bodyreadyState返回当前文档状态loading：加载HTML代码阶段，尚未完成解析interactive：加载外部资源阶段complete：全部加载完成documnet.location//...原创 2019-04-16 20:43:09 · 620 阅读 · 0 评论 -
JS 对象
JS 对象对象由若干个键值对组成对象的获取对象company.namecompany[‘name’]### 新增对象属性company.addr = ‘杭州市’company[‘business’]=‘前端课程’for(var key in compay) {console.log(key)console.log(company[key])}## 详细介绍#...原创 2019-04-13 20:50:39 · 277 阅读 · 0 评论 -
ajax
ajax如何和后端交互form表单提交 范例submit 的时候会自动提交到action上这个方法非常老提交的时候页面会发生跳转，跳转到另一个页面上不知道后台如何回应这个方法，或者是直接不回应了ajaxasynchronous JavaScript and XMLajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心...原创 2019-04-22 09:56:36 · 171 阅读 · 0 评论 -
事件
事件事件流！imge什么是冒泡阶段，什么是捕获阶段链接imges事件处理程序HTML内联形式通过onclick选定元素JavaScript指定事件处理程序给每个元素设置自己的事件处理程序，将这些属性的值设置为一个函数<input id="btnClick" type="button" value="Click Here" /><script type...原创 2019-04-17 21:20:11 · 460 阅读 · 0 评论 -
music api
music apiaudioObject创建或者获取的audio对象，可通过以下两种方式得到<audio id="music" src="http://cloud.hunger-valley.com/music/玫瑰.mp3">你的浏览器不支持喔！</audio><script>var audioObject = document.querySelec...原创 2019-04-27 15:41:57 · 713 阅读 · 0 评论 -
跨域-同源策略
跨域同源策略（Same origin Policy）浏览器出于安全考虑，只允许与本域下的接口交互。不同源的客户脚本在没有明确授权的情况下，不能读写对方的资源发送的请求和当前所在的页面是同一个域下的话，是可以接受的域名，这是浏览器的安全策略同源指的是什么同协议： 如http/https同域名: http://baidu.com同端口：80端口修改host的作用127.0.0...原创 2019-04-28 22:01:46 · 1137 阅读 · 0 评论 -
3D登陆框实战汇总
3D登录框实战问题汇总fromactionaction属性规定了提交表单信息时，向何处发送表单数据，即是处理表单数据的目标地址。为什么使用i标签作为字体图标 标签显示斜体文本效果。用 元素做图标在语义上是不正确的（虽然看起来像 icon 的缩写）； 比 短，但 gzip 后差异很小，不过打字可以少按三个键；多数图标用的是空 元素，配合 ::before 伪元素实现，因为...原创 2019-04-19 17:36:06 · 214 阅读 · 0 评论 -
跨域的几种方法
CORS详解什么是CORSCORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：...原创 2019-04-29 10:06:31 · 235 阅读 · 0 评论 -
BOM 对象 & localStorage & cookie & session
BOM对象几个其他概念ESMAscriptES3ES5ES6学的是语法，es指的是es5，es6，es3不光可以放到浏览器里面运行，也可以放到单片机，node.js上运行和我们的浏览器不相关DOM 文档对象模型js换了个环境，放到浏览器上，和数组产生了一些关联，使用js操作浏览器之间的一些元素，domBOM指浏览器对象模型 用于描述这种对象与对象之间层间，指打开...原创 2019-04-20 09:11:53 · 354 阅读 · 0 评论 -
jQueryDom
jQuery Dom创建元素$('body').append($('<p>hello</p>'))html([string])这是一个读写两用的方法，用于获取/修改元素的innerHtmlQuestion以下 jQuery 方法有什么作用？如何使用？给出范例.append().prepend().before().after().remove()...原创 2019-05-05 10:22:13 · 239 阅读 · 0 评论 -
node-js
require(‘http’)底层由http模块进行底层的建立localhost127.0.1 请求的是本机的地址 请求的是本机的服务器响应头 和 响应体响应体是网页的源代码响应头是一些网页的其他设置端口号端口号不能被占用了Content-Typeres.setHeader(“Content-Type”,“text/html;charset=gbk”)text/html ...原创 2019-04-24 21:36:19 · 164 阅读 · 0 评论 -
React day1
Make an app with ReactBabelJavaScript PreprocessorBabel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。goo.gl/TT6zQ9qWhat is React and its purposeReact is a Javascript libraryReact’s ultimate purpose is ...原创 2019-07-12 11:44:27 · 287 阅读 · 0 评论