Welcome to Logan's Blog!

博客主题访问地址：https://github.com/logan70/logan70.github.io

• JS 动画效果

  2017-10-17

  Logan

  Javascript

  JSAnimation
  • JS 速度动画

  JS 速度动画

  // 设置定时器，获取需要移动的元素
  var timer = null,
  	box = document.getElementById('box');
  function moveAnimation(target) {
  	// 函数开始清除定时器，防止定时器叠加
      clearInterval(timer);
      // 定义速度
      var speed = 0;
      // 根据当前位置与目标位置的大小关系来确定速度的正负值
      if (target > box.offsetLeft) {
          speed = 1;
      } else {
          speed = -1;
      }
      timer = setInterval(function(){
          if (box.offsetLeft == target) {
          	// 当运动到目标位置时清除定时器
              clearInterval(timer);
          } else {
          	// 设置位置的变化
              box.style.left = box.offsetLeft + speed + 'px';
          }
      },3)
  }
  

  阅读全文

  ---

• JavaScript和树

  2017-10-04

  Logan

  Javascript

  binary
  • 二叉树的概念
  • 二叉树的特点
  • 二叉树的五种基本形态

  二叉树的概念

  二叉树（Binary Tree）是n（n>=0）个结点的有限集合，该集合或者为空集（空二叉树），或者由一个根结点和两棵互不相交的、分别称为根结点的左子树和右子树的二叉树组成。

  

  二叉树的特点

  每个结点最多有两棵子树，所以二叉树中不存在度大于2的结点。二叉树中每一个节点都是一个对象，每一个数据节点都有三个指针，分别是指向父母、左孩子和右孩子的指针。每一个节点都是通过指针相互连接的。相连指针的关系都是父子关系。

  二叉树的五种基本形态

  • 空二叉树
  • 只有一个根结点
  • 根结点只有左子树
  • 根结点只有右子树
  • 根结点既有左子树又有右子树
  阅读全文

  ---

• Flexbox 布局

  2017-10-04

  Logan

  CSS

  flex
  • 属性
    • display（flex container）
    • flex-direction（flex container）

  属性

  display（flex container）

  display: other values | flex | inline-flex;
  

  flex-direction（flex container）

  这个主要用来创建主轴，从而定义了伸缩项目放置在伸缩容器的方向。

  flex-direction: row | row-reverse | column | column-reverse
  

  

  阅读全文

  ---

• Sublime Text 3 使用

  2017-09-26

  Logan

  Tools

  sublime
  • 常用快捷键
    • 隐藏/显示侧边栏
    • 查找替换
    • 选择下一个与游标所在单词相同的单词
    • 跳过当前选择，选择下一个与游标所在单词相同的单词
    • 选择所有与游标所在单词相同的单词
  • Goto Anything
  • 插件
    • Http Requester

  常用快捷键

  隐藏/显示侧边栏

  Ctrl+K+B

  查找替换

  Ctrl+H

  选择下一个与游标所在单词相同的单词

  Ctrl+D

  跳过当前选择，选择下一个与游标所在单词相同的单词

  Ctrl+K , Ctrl+D

  选择所有与游标所在单词相同的单词

  Alt+F3

  Goto Anything

  • 快捷键Ctrl+p打开

  功能

  • 功能1：快速查询文件（支持模糊匹配），如view/index.html表示查找view文件夹下的index.html
  • 功能2：符号功能@可以查询css中的选择器或js中的函数 如：@body 可以快速定位到当前文件的body标签

  插件

  Http Requester

  阅读全文

  ---

• JavaScript DOM 编程艺术 - 查漏补缺

  2017-09-26

  Logan

  Javascript

  Javascript
  • 实现 getELementsByClassName()
  • 获取元素的所有子元素
  • nodeType属性
  • nodeValue属性
  • 共享onload事件
  • createTextNode()方法
  • insertBefore()方法
  • 实现insertAfter()方法
  • 关于节点
  • Ajax
    • XMLHttpRequest 发送请求
    • readyState属性
    • XMLHttpRequest 取得的响应
    • XMLHttpRequest 处理响应

  实现 getELementsByClassName()

  function getElementsByClassName(node,classname) {
  	if(node.getElementsByClassName) {
  		//如果方法存在，则使用现有的方法
  		return node.getElementsByClassName(classname);
  	}else {
  		var results = new Array(),
  			elems = node.getElementsByTagName('*');
  		for(var i=0;i<elems.length;i++){
  			if(elems[i].className.indexOf(classname) != -1){
  				results.push(elems[i]);
  			}
  		}
  		return results;
  	}
  }
  

  获取元素的所有子元素

  element.childNodes

  element.childNodes[0] 等同于element.firstChild

  element.childNodes[element.childNodes.length-1] 等同于element.lastChild

  nodeType属性

  node.nodeType

  • 元素节点的nodeType属性值是1
  • 属性节点的nodeType属性值是2
  • 文本节点的nodeType属性值是3

  nodeValue属性

  // 改变元素内文本的内容
  var box = document.getElementById('box');
  box.childNodes[0].nodeValue = "hello world!";
  

  共享onload事件

  function addLoadEvent(func) {
  	var oldonload = window.onload;
  	if(typeof window.onload != 'function'){
  		window.onload = func;
  	} else {
  		window.onload = function() {
  			oldonload();
  			func();
  		}
  	}
  }
  

  createTextNode()方法

  var text = document.createTextNode('hello world');
  box.appendChild(text);
  

  insertBefore()方法

  在已有元素前插入一个新元素

  // 语法
  parent.insertBefore(newElement,targetElement);
  // 使用
  var newEle = document.createElement('p');
  var box document.getElementById('box');
  box.parentNode.insertBefore(newEle,box);
  

  实现insertAfter()方法

  重点是element.nextSibling

  function insertAfter(newElement,targetElement) {
  	var parent = targetElement.parentNode;
  	parent.insertBefore(newElement,targetElement.nextSibling);
  }
  

  关于节点

  firstChild, lastChild, nextSibling, previousSibling 都会将空格或者换行当做节点处理,使用需谨慎

  • firstElementChild ： 父元素的第一个元素节点
  • lastElementChild ： 父元素的最后一个元素节点
  • nextElementSibling ： 下一个元素节点
  • previousElementSibling ： 上一个元素节点
  • childElementCount ： 子元素节点数量

  Ajax

  XMLHttpRequest 发送请求

  open(method,url,saync)

  • method： 请求方式，get/post，不区分大小写。一般用大写
  • url： 请求地址（相对/绝对）
  • async： 异步/同步，true/false

  send(string)

  • GET方法时，不填或者填null，（实际没有主体，参数都拼在url中）
  • POST方法时，一定要填

  readyState属性

  • 0：请求未初始化，open还没有调用
  • 1：服务器连接已建立，open已调用
  • 2：请求已接收，接收到头信息了
  • 3：请求处理中，接收到响应主体了
  • 4：请求已完成，响应已就绪

  XMLHttpRequest 取得的响应

  • responseText：获得字符串形式的响应数据
  • responseXML：获得XML形式的响应数据
  • status和statusText：以数字和文本形式返回的HTTP状态码
  • getAllResponseHeader()：获取所有的响应报头
  • getResponseHeader(string)：查询响应中的某个字段的值

  XMLHttpRequest 处理响应

  通过onreadystatechange函数

  var request = new XMLHttpRequest();
  request.open('GET','get.php',true);
  request.onreadystatechange = function(){
  	if(request.readyState == 4  && request.status == 200){
  		console.log(request.responseText)
  	}
  }
  

  ##

  阅读全文

  ---

• Gulp入门

  2017-09-25

  Logan

  Tools

  gulp
  • 全局安装Gulp
  • 目录结构
  • 关于package.json

  安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

  全局安装Gulp

  $ npm install gulp -g

  目录结构

  └── src/ 源码目录 ├── build/ .html 组件 ├── sass/ .scss .sass 文件 ├── css/ .css 文件 ├── js/ .js 文件 └── img/ 图片 └── dist/ 输出目录 └── package.json └── gulpfile.js

  关于package.json

  可以在项目上使用 npm init 配置，推荐直接新建并写入初始内容：

  package.json

  {
  “name”: “gulp-build”,
  “version”: “1.0.0”,
  “description”: “Gulp.js”,
  “private”: true
  }

  对于完整的 package.json (比如别人的开源项目), 只需对整个项目执行 npm install 即可安装 package.json 文件中声明的所有插件模块。

  阅读全文

  ---