jwllwj_2018-CSDN博客

原创 HTML5的使用及基本注意说明相关笔记（二）

1.使用HTML5来DIY彩虹播放器◆html5新增的语义化标签，多媒体盒子标签 figure，专门用来放视频标签、音频标签、图片标签等，<figure><figcaption>视频</figcaption></figure>◆document.querySelector("button:nth-child()3")，是可以获取到元素的，html5新...

2018-07-02 13:56:53 441132

原创 CSS3的使用及基本注意说明相关笔记（四）

1.使用CSS3来DIY图片i无缝轮播效果：图片大小：126*86<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用css3动画制作自动无缝轮播图</title> <sty

2018-07-02 12:19:48 159958 1

原创 CSS3的使用及基本注意说明相关笔记（三）

1.每一个方向上的边框形状并不是矩形的，其实是三角形或梯形的，配合圆角边框可以制作美丽花瓣<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>边框的实际形状（制作美丽花瓣）</title> &

2018-07-02 00:53:03 119153 1

1.css3圆角边框样式 border-radius◆border-radius表示盒子四个角(左上角、右上角、右下角、左下角)的弧度，border-radius:60px 60px 60px 60px;，如果圆角弧度四个值都相同，那个可以简写，border-radius:60px;（其实赋值的方式和margin与padding类似，都是shun时针赋值，赋一个值表示全方向，赋两个值表示左上角和右...

2018-07-01 23:30:46 161470

原创 CSS3的使用及基本注意说明相关笔记（一）

1.CSS3◆浏览器支持程度差，需要添加私有前缀，移动端支持优于pc端，因为移动端的浏览器都是最新版本的，css3也在不断改进中，应用的相对广泛。◆实际工作中写网页要使用渐进增强原则：低版本的浏览器可以正常访问页面，高版本的浏览器访问页面用户体验更好。◆实际工作中要考虑用户群体，遵照产品的方案，听技术的上司（最新的技术大多意味着兼容性不是很好）的安排。2.css2中的选择器◆div {} 标签选择...

2018-07-01 14:16:42 161741

原创 HTML5的使用及基本注意说明相关笔记（一）

1 网页开发方式上的两个层次：◆HTML4.1 ◇结构：html4.0 ◇样式：css css2 ◇行为：js◆HTML5 ◇结构：html5 ◇样式：css3 ◇行为：js API 有所增强如地理定位 web存储拖拽重力感应硬件访问等2.HTML5◆HTML5狭义的概念上就是HTML4的升级版本，HTML5广义上的概念上就是代表着浏览器技术发展的的一个阶段，也就是 html5+css3...

2018-07-01 12:51:15 390

原创 JQuery使用及基础原理解析相关笔记（三）

1.jQuery的核心–所有版本：https://code.jquery.com/jquery/2.jQuery属性操作：◆设置属性：当前节点.attr(属性名,属性值);◆获取属性：当前节点.attr(属性名);◆移除属性：当前节点.removeAttr(属性名);◆设置属性：当前节点.prop(属性名,属性值);◆获取属性：当前节点.prop(属性名);◆移除属性：当前节点.removePro...

2018-07-01 11:41:20 250

原创 JQuery使用及基础原理解析相关笔记（二）

1.jquery操作css样式◆设置样式： $(element).css({"width":"100px","height":"100px"});◆设置样式： $(element).css({"width":100,"height":100});◆ 设置样式：$(element).css("backgound-color","#f00");◆ 设置样

2018-07-01 10:01:57 228

原创 JQuery使用及基础原理解析相关笔记（一）

1.jquery◆很强大，但是很臃肿，需要自己封装一个jquery，要用到jqery中哪些方法，就把原来jquery中的方法拿出来。◆jquery有两大特点：链式编程、隐式迭代（遍历）。2.原生js的入口函数与jquery的入口函数◆原生js的入口函数：window.onload = function () {}是页面文档和页面资源都加载完毕之后开始执行函数里面的代码，document.onrea...

2018-06-28 21:06:45 7147

原创 Javascript的正则表达式相关笔记（一）

1.正则表达式定义的方式有两种：内置对象定义法、字面量定义法◆数组使用字面量定义的方式是[]、对象使用字面量定义的方式是{}、正则使用字面量定义的方式是/abc/（/占位置不能为空/）var reg=new RegExp(/abc/);，通过new 关键字和构造函数来定义var reg=/abc/;，通过正则表达式字面量来定义◆<!DOCTYPE html><html lan...

2018-06-28 20:12:40 566

原创 Javascript使用三大家族和事件来DIY动画效果相关笔记（六）

1.图片轮播之旋转木马◆原理：将每张图片的样式都存到一个数组中，每一张图片的样式有多个，所以那个数组里面的元素都是对象，通过制作的缓速框架，移动每一张图片对象，缓速改变图片的样式，缓速改变的样式都在数组元素的对象里，所以改变了数组中元素的位置，就让图片轮播起来，并且还是以旋转木马的方式，通过将第一个元素shift然后push达到顺时针旋转，通过将最后一个元素pop然后unshift达到逆时针旋转。...

2018-06-28 18:08:02 824

原创 Javascript使用三大家族和事件来DIY动画效果相关笔记（五）

1.client家族◆box.clientWidth：表示盒子的宽度加padding◆box.clientHeight：表示盒子的高度加padding◆box.clientTop:表示盒子上边的border大小◆box.clientLeft:表示盒子左边的border大小◆<!DOCTYPE html><html lang="en"><head> &...

2018-06-28 17:33:19 11058

原创 Javascript使用三大家族和事件来DIY动画效果相关笔记（四）

1.图片轮播基础之缓速轮播◆使用封装的缓慢速动画来DIY滑动轮播图，也就是鼠标移动到123456这些数字上后，图片以缓慢速滑动的方式进行切换。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用封装的缓速动画制作滑动轮播图&

2018-06-28 16:24:27 74609 1

原创 Javascript使用三大家族和事件来DIY动画效果相关笔记（三）

1.scroll家族◆scrollWidth表示元素的内容宽度加上padding，不包括border和margin，scrollHeight表示元素的内容高度和padding，当内容小于盒子定义的高度时scrollHeight就是盒子定义的高度加上padding，主要是以元素内容的高度和padding来决定大小的，注意在IE7及以下scrollHeight只有元素的内容的高度和padding来决定...

2018-06-26 15:24:34 251

原创 Javascript使用三大家族和事件来DIY动画效果相关笔记（二）

1.offset家族补充◆offset取值返回时一个number类型的数值，但是它不会返回带小数的整数，内部做了四舍五入的处理，如style.left=9.4px，offsetLeft获取到的值是9，然而style.left=9.5px，offsetLeft获取到的值是10。2.缓速动画与匀速动画的原理◆匀速动画的原理：this.style.left=this.offsetLeft+步长（也就是每...

2018-06-26 14:51:14 360

原创 Javascript使用三大家族和事件来DIY动画效果相关笔记（一）

1.offset家族◆offsetWidth和offsetHeight表示盒子真实的宽度高度，这个真实的宽度包括四周的边框、四周的padding、及定义的宽度高度或内容撑开的高度和宽度，可以用来检测盒子实际的大小，属性也是只读不可写的，返回的是不带单位的数值，返回值为number类型。◆offsetLeft和offsetTop表示当前盒子在定位后距离定位了的父容器的左偏移与上偏移，该属性是只读的...

2018-06-25 23:20:04 159

原创 Javascript常用API及事件原理相关笔记（一）

1.定义Date日期对象的四种方式及对日期对象进行操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Date日期对象的定义方式</title></head>&am

2018-06-25 22:37:05 188

原创 Javascript操作BOM的API及小技巧相关笔记（一）

1.DOM操作表格，很少见到使用的场景，但不代表没有一点用处。◆创建表格：var table=document.createElement("table");◆在表格中插入行:var tr=table.insertRow(0);表示在表格的第一行之前插入一行，table.insertRow(1);表示在表格的第二行之前插入一行，如果你table.insertRow(5);然后你前面的一行不存在，那...

2018-06-25 17:46:57 368

原创 Javascript操作DOM的API及兼容性相关笔记（三）

1.数组的那些遍历方法forEach、map、filter、every、some，在IE678中不存在，dom对象的属性操作方法getAttribute、setAttribute、removeAttribute在IE678中也不存在，通过控制台打印的时候发现，返回的是一个Object类型的{}，也就是空对象。◆js兼容性封装代码/** * 功能：根据id获取元素节点 * @param id ...

2018-06-25 16:32:04 181

原创 Javascript操作DOM的API及事件详解相关笔记（二）

1.事件三要素如唐僧念紧箍咒孙悟空就头疼◆事件源 --> 唐僧◆事件类型 -->念咒◆事件处理程序 --> 孙悟空头疼 2.在js中事件源指的是引发后续事件的标签，事件指的是 js已经定义好的可以直接使用的事件，事件驱动程序指的是对样式和html的操作(Dom操作)。3.获取事件源的四种方式★getElement前缀表示获取一个元素对象，getElements前缀表...

2018-06-25 16:17:26 212

原创 Javascript操作DOM的API详解及使用小技巧相关笔记（一）

1.DOM是由节点组成的，操作DOM实际上就是操作节点，DOM是html文档的模型抽象，数据是以树的形式在内存中排列的。2.获取节点或者访问节点的方式有两种，一是直接获取，二是通过访问关系来间接获取，也就是根据自己来找与自己有关系的节点如自己的兄弟节点、父亲节点、儿子节点等等，节点的访问关系是以属性形式存在的。◆找自己上一个兄弟节点 ◇当前节点.previousElementSibling，这个找...

2018-06-25 15:58:07 203

原创数组常用的API详解及使用小技巧相关笔记（一）

1.数组的栈和堆特性◆进栈 push() 可以一次性放多个参数，内部是使用遍历argument伪数组来存的，使用push方法是将数据存数组的最末项，存进去之后会返回当前数组的长度，出栈pop() 可以从数组的最末尾取出一个数组元素并且返回，但是也会把这个数组元素移除原数组。◆进队列 unshift() 可以一次性放多个参数，是将元素存到数组的最前面，存进去之后会返回数组的长度，出队列shift(...

2018-06-25 15:19:15 368

原创冒泡排序逐步详解相关笔记（一）

1.冒泡排序实际上是数组中相邻的两个元素互相比较，满足条件之后就会互换位置◆ 需要双重for循环◆比较的轮数默认是数组元素的个数减1◆每轮比较的次数默认是数组元素的个数减1◆满足了相邻的两个元素互相比较的条件之后，就会互换这两个元素的位置，从而达到大的值或最小的值不断的往前面放或者往后面放的目的◆随着每轮的比较，最大的或最小的会被放在最前面或最后面，那么就可以少比较几次，因为那几次没有意义，那...

2018-06-25 14:41:46 252

原创 Javascript中交换两个变量值的十种方法相关笔记（一）

交换两个变量的值十种方法：◆第1、6、7、8、10既可以交换简单数据类型也可以交换复杂数据类型的，基本可以确定是任何类型的值。◆第2，3，4，5，9只可以交换简单数据类型的，基本可以确定是数字类型的值。<script type="text/javascript"> //第1种使用第三方变量 { let a=10, b=20,temp=0; temp=a;//10 a=b...

2018-06-22 15:07:29 337

原创 NodeJS相关笔记（六）

1.网站的优化重点是思想◆压缩能够压缩的，减少网络流量◆合并的尽量合并，减少网络请求◆可以使用其它大平台的CDN节点，如请求angular.js文件等等，请求别人的，那么就能够减少网络请求和网络流量。◆少用js去遍历对象或者写for循环，for循环同步代码会阻塞线程。◆能提前运算好的就提前运算好，使用枚举法。◆响应式图片，图片压缩，根据你屏幕的大小显示指定大小的图片。◆使用字体图标代替图片◆传智播...

2018-06-20 16:50:23 223

原创 NodeJS相关笔记（五）

1.服务器就是一台电脑，性能特别好的大电脑，服务多用linux，如centos、ubuntu2.应用服务器◆是作为服务器执行共享业务应用程序的底层系统软件3.web服务器◆web服务器是一种应用服务器，提供了web服务，对内提供web应用程序的的运行环境。◆如：Apache、Nginx、IIS、tomcat◆NodeJS没有web服务器，因为它本身就是web服务器，Nodejs就是一个面向网络而生...

2018-06-20 16:49:06 292

原创 NodeJS相关笔记（四）

1.io就是数据读写、数据流动◆输入输出◆文件操作的读写◆网络操作中的请求与响应◆◆2.事件驱动模型◆主线程会去执行node的代码，把js代码放入队列，形成一个事件环◆主线程会去把队列中的同步代码一个一个的取出来执行◆在同步代码执行的时候会检查有没有异步代码◆异步代码分为两种：1.异步非io，如setTimeOut()、setInterval()。2.异步io文件操作◆如果是异步非io，那么就会在...

2018-06-20 16:47:16 257

原创 NodeJS相关笔记（三）

1.mvc◆mvc原本是后端的，一个分层的概念，后来前端的技术偷换过去了，和后端有很大的区别，只是做了一个分层，angular是mvc模型的一个进化。2.mvvm模型◆后端的mvc，大多是靠controller，而前端的mvc大多是靠model和view，所以衍生出了mvvm，model、 view 、viewmodel（$scope，他的作用性远大于controller，把控制器层给遮住了）。2...

2018-06-20 16:45:23 194

原创 NodeJS相关笔记（二）

1.世界上最简单的事情就是放弃了，放弃是一件很简单的事情，不放弃是一个很困难的事情。2.node.js◆Nodejs是一门技术，javascript是一门语言。◆Nodejs基于V8的Javascript引擎，好处是不用去考虑兼容性的问题。◆Nodejs的特点是：异步非阻塞式IO模型、事件驱动机制、轻量高效的。◆Nodejs可以运行在Windows上也可以运行到Linux上。◆模块儿系统：【 ◇模...

2018-06-20 16:43:22 351

原创 NodeJS相关笔记（一）

1.前端与后端◆前端：做静态资源的◆后端：操控服务器的硬件的◆2.为什么学习node.js◆就业有市场◆有商业用途◆本身技术是有价值◆js开发◆使用node.js最好使用双数版本，单数版本不会长期维护，双数版本都会长期支持，所以安装node最好都安装双数版本，如4、6、8这样的。3.js引擎◆汽车引擎：转化的作用，就像汽油柴油等等经过转化之后变成动能◆js引擎：模板和数据转化为页面◆浏览器引擎：将...

2018-06-19 13:06:33 342

原创 SeaJS+RequireJS+模块儿化开发相关笔记（一）

1.网站越来越复杂，js代码，js文件也越来越多了，会遇到以下问题。【◆命名冲突问题，代码的可读性差，没办法完整的写到一块儿，团队协作开发，不同开发人员的变量和函数命名可能相同 ◇解决方案一：命名空间法，添加一个命名空间，把某一块儿代码放到一个命名空间里，命名空间法是通过约定的方式定义的，var calculator={ a:123, add:function(){}, substract:fu...

2018-06-19 13:06:09 319

原创一点点开发经验（三）

1.使用AngularJS◆引入脚本◆指定ng-app◆var Yike=angular.module('Yike',['ngRoute','Controllers']);◆按模块的思想开发，将类似功能程序进行归类，例如将所有的控制器归类成一个独立模块，将所有的指令归类成一个独立模块var MyCtrl=angular.module('Controllers',[]);//以一个独立文件形式存在M...

2018-06-19 13:05:59 299

原创 Git+gulp项目构建相关笔记（一）

1.抓包工具可以抓普通的http请求的数据，如果需要抓https就有些困难了，需要另外设置抓包工具的选型，要让抓包工具允许抓取https然后还要设置可解密，然后重启一下抓包工具就可以了，有些浏览器会检测到抓包工具的存在。2.gulp是一款负责项目构建工具◆Gulp是基于Nodejs开发的一个构建工具，借助gulp插件可以实现不同的构建任务，以其简洁的配置和卓越的性能成为目前主流的构建工具◆全局安装...

2018-06-19 13:05:44 693

原创 AngularJS+php+less相关笔记（四）

1.任何语言用原生的进行开发都会非常费劲，而是用框架进行开发则会非常快速。2.当你的文件夹中有一个bower.json文件，那么你就可以打开 git brsh ，然后输入 bower install，就会将bower.json中写的需要的依赖包全部给你装好，你也可以自己写一个bower.json文件，需要哪些依赖自己加，然后使用bower直接一次性下载，很方便。3.多人开发怎么办？协同开发，使用g...

2018-06-19 13:05:37 296

原创 AngularJS+npm+bower相关笔记（三）

0.AngularJS所有的代码版本信息都在https://code.angularjs.org/这个网站上，各种AngularJS的压缩版、非压缩版、独立模块儿（Angular插件）都有。1.JSONP是一种跨域的解决方案2.AngularJS自定义服务（每一个服务实际上在代码上呈现的就是一个模块儿）◆factory：【 ◇App.factory("showTime",['$filter',fu...

2018-06-19 13:05:30 344

原创 AngularJS+跨域相关笔记（二）

1.AngularJS作用域◆说明：每个控制器都会对应一个模型，也就是$scope对象，不同层级的控制器既代表一个作用域，通过使用$scope就能察觉到这个作用域。◆根作用域：一个AngularJS的应用（App）在启动时会自动创建一个跟作用域$rootScope,这个根作用域在整个应用范围（ng-app所在标签以内）都是可以被访问到的。◆子作用域：通过ng-controller指令可以创建一个子...

2018-06-19 13:05:19 269

原创 AngularJS+thinkphp相关笔记（一）

1.应用：一些功能的组合就是应用。2.jQuery是一个类库（一系列函数的集合），AngularJS是一个框架（一堆类库的集合）。3.AngularJS◆前端MVC框架/诸多类库的集合/以数据和逻辑为核心。◆其它前端框架：backbone/knockoutJS/vue/react框架。◆核心特性：模块儿化/双向数据绑定/语义化标签/依赖注入。◆◆◆◆4.前端要学的东西越来越多了，造轮子的人越来越多...

2018-06-19 13:05:13 566

原创 Git相关笔记（二）

1.git操作分支，是为了当一个人同时干多件事情互不干扰，子分支会继承父分支的所有提交历史。◆git branch：查看分支◆git branch 分支名称：创建分支◆git checkout 分支名称：切换分支◆git checkout -b 新分支名称：创建新分支并切换新分支◆git merge 被合并的分支名称：合并分支◆git branch -d 要删除的分支名称：删除分支◆git br...

2018-06-19 13:05:05 155

原创 Git相关笔记（一）

1.版本控制工具 Git◆◆◆◆2.shell（壳），通过鼠标或者命令语句来操作操作系统核心的一些功能◆图形界面shell：通过提供友好的可视化界面，调用相应应用程序，如windows系列操作系统，Linux系统上的图形化应用程序GNOME、KDE等。◆命令行shell：通过键盘输入特定命令的方式，调用相应的应用程序，如windows系统的cmd.exe、winWindows PowerShell...

2018-06-17 12:09:49 253

原创自己封装jquery相关笔记（四）

1.jQuery中的属性和样式操作◆addClass：给所有元素添加新的class◆removeClass：删除所有元素指定额class◆hasClass：判断所有元素有没有指定的class◆toggleClass：有则删除，没有则添加◆attr：设置或者获取元素的属性节点值◆prop：设置或者获取元素的属性值◆css：设置或者获取元素的样式◆val：获取或者设置元素的value属性2.属性节点与...

2018-06-17 12:09:42 186

空空如也

空空如也