CherishLyf-CSDN博客

原创 Gulp 简易入门及API介绍

Gulp 是一个自动化工具，前端开发者可以用来处理搭建 web 服务器文件保存时自动重载浏览器使用预处理器 Sass、Less优化资源，比如压缩图片，JavaScript、压缩图片安装Gulp安装 node.js 之后，在全局方式下安装 gulp :npm install -g gulp创建 Gulp 项目首先创建一个文件夹，比如 project，在该文件下执行 npm init 指令：n

2016-02-18 17:45:00 596

转载基于jQuery的轮播图插件(新手练习)

到年末了，今天没事，自己写了一个轮播图的插件….(新手练习, 勿喷)可以添加标题，可以添加按钮…. 切换方式目前只写了一种渐隐渐现的方式…HTML 结构<div class="mySlide"> <ul class="slide-list"> <li><img src="img/news-img1.png" alt="" /></li> <li><img

2016-02-04 17:57:25 898

原创 call 和 apply 方法

每个函数都有两个非继承而来的方法：apply() 和 call() 方法。这两个方法的用途都是特定的作用域中调用函数，实际上等于设置函数体内的 this对象值。apply()方法接收两个参数：一个是在其中运行函数的作用域另一个是参数数组，可以是 Array实例，也可以是 arguments对象function sum(num1, num2){ return num1 + num2;

2016-01-15 15:08:18 412

原创 JavaScript设计模式 --- 方法的链式调用

方法的链式调用调用链的结构设计一个支持方法链式调用的 JavaScript库使用回调从支持链式调用的方法获取数据方法的链式调用链式调用其实只不过是一种语法招数，它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的。这种技术包含两部分：创建代码HTML元素的对象的工厂以及一批对这个HTML元素执行某些操作的方法调用链的结构$ 函数，它通常返回一个HTML元素或者一个HTML元素

2016-01-14 14:37:07 4311

原创 JavaScript设计模式 --- 单体模式

单体模式单体模式是javascript中最基本但最有用的模式之一。这种模式提供了一种将代码组织为一个逻辑单元的手段，这个逻辑单元中的代码可以通过单一的变量进行访问。通过确保单体对象只存在一个实例。单体的基本结构最简单的单体实际上就是一个字面量。它把一批有关联的方法和属性组织在一起：/* Basic Singleton */var Singleton = { attribute1

2016-01-07 23:32:01 1235

原创 JavaScript设计模式 --- 继承

继承为什么需要继承类式继承原型链继承下面将描述创建子类的各种技术以及他们的适用场合。为什么需要继承一般来说，在设计类的时候，我们希望减少重复性的代码，并且弱化对象间的耦合。使用继承符合前一个设计原则的需要。类式继承通过用函数来声明类、用关键字new来创建实例，下面是一个简单的类声明：/* Class Person */function Person(name){ this.name

2016-01-05 17:25:44 430

原创 JavaScript设计模式 --- 封装和信息隐藏

封装和信息隐藏信息隐藏原则封装与信息隐藏封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏。创建对象的基本模式JavaScript中创建对象的基本模式有3种：第一种门户大开型最简单的一种方式，但只提供公共成员。第二种使用下划线来表示方法和属性的私用性。第三种使用闭包来创建真正的私用成员，这些成员只能通过一些特权方法。以Book类为例，假设你接到一项任务，用来储存关于一

2016-01-04 16:38:52 505

原创 JavaScript设计模式 --- 接口

接口什么是接口接口实现了一个对象应该具有那些方法的手段。在JavaScript中模仿接口用注释模仿接口/* interface Composite { function add(child); function remove(child); function getChild(index); } interface FormItem { function sa

2016-01-04 11:37:39 478

转载 JavaScript 函数和变量声明的"提前"(hoist)行为

如果我们使用匿名函数var FUNCTION_NAME = function(){ /* FUNCTION_BODY */ ;}这种方式，编译后变量声明 FUNCTION_NAME 会被提前，但是他的赋值(也就是 FUNCTION_BODY)并不会提前。也就是说匿名函数只有在调用时才被初始化。如果我们使用function FUNCTION_NAME(){ /* FUNC

2015-12-01 09:43:01 1195

原创 CSS3 transform

TransformTransform字面意思就是变形，改变的意思。 Transform主要包括几种：旋转 rotate扭曲 skew缩放 scale移动 translate矩阵变形 matrix语法：transform : none | <transform-function> [<transform-function>] *也就是说transform : rotate | sca

2015-11-29 00:04:31 439

转载关于文字内容内容溢出用（...）表示

张鑫旭老师原文关于文字内容溢出用点点点(…)省略号表示一、css方法p{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}二、jQuery 限制字数的方法$(document).ready(function(){ // 限制文本字数 $("p").each(function(){\

2015-11-25 09:57:00 458

原创 Javascript高级程序设计第八章 --- DOM

节点层次Node类型nodeName 和 nodeValue节点关系操作节点其他方法Document类型文档的子节点查找元素Element 类型取得特性设置属性删除属性attribute属性DOM（文档对象模型）是针对HTML和XML文档的一个API。节点层次<html> <head> <title>Sample Page</title> <

2015-11-24 16:33:23 399

原创 Javascript高级程序设计第八章 --- BOM

window对象BOM的核心对象是window，它表示浏览器的一个实例。 window 既是JavaScript访问浏览器的对象的接口，又是Global对象。全局作用域在全局作用域中声明的变量、函数都会变成window对象的属性和方法。var age = 20function sayAge(){ alert(this.age);}alert(window.age); //

2015-11-24 10:59:21 443

原创 Javascript高级程序设计第七章 --- 函数表达式

定义函数的方式有两种：函数声明函数表达式函数声明的语法function funtionName(arg0, arg1, arg2){ // 函数体}关于函数声明，他有一个重要特征就是函数声明提升，就是在执行代码之前会读取函数声明。sayHi();function sayHi(){ alert("hi!");}函数表达式var functionName = function

2015-11-23 16:05:02 453

原创 Javascript高级程序设计第六章 --- 面向对象程序设计

面向对象程序设计创建对象工厂模式function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; re

2015-11-19 22:03:11 450

原创 CSS3 Gradient

CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)线性渐变在 Mozilla下的应用【语法】-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )参数有三个：第一个：表示线性渐变的方向，top 是从上到下、left是从左到右、left

2015-10-29 17:41:32 449

原创 CSS3动画功能 --- transition、transform、3D场景

transitiontransition: <过渡属性的名称> <过渡时间> <过渡模式> -webkit-transition: 谷歌浏览器和Safari浏览器 -moz-transition: 火狐浏览器 -o-transition: Opera浏览器【语法】-webkit-transition:color 1s;//或者-webkit-transition-property:color;

2015-10-27 14:48:18 1232

原创【读书笔记】HTML5程序设计 --- 第一章 HTML5 概述

HTML5 概述语义化标记元素名描述 header 标记头部区域的内容（用于整个页面或页面中的一块区域） footer 标记脚步区域的内容（用于整个页面或者页面的一块区域） section Web页面中的一块区域 article 独立的文章内容 aside 相关内容或者引文 nav 导航类辅助内容

2015-10-22 14:24:08 487

原创【读书笔记】HTML5移动Web开发指南 --- 移动Web界面样式

第6章移动Web界面样式CSS3选择器属性选择器完全匹配属性选择器包含匹配选择器首字符匹配选择器尾字符匹配选择器伪类选择器beforeafterfirst-childlast-childnth-child 和 nth-last-child阴影box-shadowtext-shadow背景background-sizebackground-clipbackgr

2015-10-21 15:58:55 541

转载如何将你的github仓库部署到github pages

注：此文章为转载，原文地址如何将你的github仓库部署到github pages第一步：新建一个github仓库”hello-ghpages”: 现在我们有了一个空的仓库，上面只有README.md和LICENCE文件，并且注意现在所在的分支是”master”。之所以强调这一点是因为接下来的步骤必须明确自己的github page在哪个分支下面，这个等会儿再介绍。第二步：点击页面右边一列的“Se

2015-09-23 16:03:27 1379

原创 JavaScript高级程序设计第五章 — 引用类型

JavaScript高级程序设计第五章引用类型Object类型Array类型转换方法join方法栈方法 push方法和 pop方法队列方法 shift方法和 push方法重排序方法 reverse方法和 sort方法操作方法 concat方法 sort方法和 splice方法JavaScript高级程序设计第五章 — 引用类型引用类型的值（对象）是引用类型

2015-09-18 22:30:31 496

原创锋利的Jquery【读书笔记】 -- 第五章 jQuery对表单表格的操作

锋利的Jquery读书笔记第五章 jQuery对表单表格的操作表单应用单行文本框应用多行文本框应用复选框应用下拉框的应用锋利的Jquery【读书笔记】 – 第五章 jQuery对表单表格的操作表单应用单行文本框应用当文本框获取焦点，它的颜色需要变化；当失去焦点，要恢复原来的样式。 CSS：.focus{ border: 1px solid #f00; backgrou

2015-09-17 13:17:26 616

原创锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画

锋利的Jquery【读书笔记】 – 第三章 jQuery中的DOM操作jQuery中的事件$(document).ready()方法可以多次使用；$(document).ready(function(){ //编写代码})也可以简写成：$(function(){ //编写代码})事件绑定bind()方法bind()

2015-09-14 16:23:32 848

原创锋利的Jquery【读书笔记】 -- 第三章 jQuery中的DOM操作

锋利的Jquery【读书笔记】 – 第三章 jQuery中的DOM操作jQuery中的DOM操作查找节点查找元素节点var $li = $("ul li:eq(1)"); //获取<ul>里第二个<li>节点var li_txt = $li.text(); //获取第2个<li>元素节点的文本内容alert(li_txt); //打印

2015-09-13 17:17:00 755

原创锋利的Jquery【读书笔记】 -- 第二章 jQuery选择器

第二章 jQuery选择器jQuery选择器jQuery选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素才生效。比如：<script> function demo(){ alert("JavaScript demo!"); } </script></head><body> <p onclick="demo()">点击我</p>

2015-09-12 23:29:46 484

原创锋利的Jquery【读书笔记】 -- 第一章

第一章jQuery中的对象jQuery中的对象是通过jQuery包装过的对象。 jQuery中无法使用DOM对象中的任何方法。 DOM对象也无法使用jQuery对象的方法。例如：$(#foo).html(); //获取ID为foo元素内的html代码。 .html()为jQuery对象的方法这段代码等同于document.getElementById("foo").

2015-09-12 22:04:52 472

转载解决CSS中float:left后需要clear:both清空的繁琐步骤

1.传统处理方式：1li {float:left;}/*这样，对固定宽度导航条来说，li不能自动居中*/ 　2.inline-block方式：　　12345678ul

2015-08-27 19:47:16 3150

原创 JavaScript高级程序设计第四章 — 变量、作用域和内存问题

JavaScript高级程序设计第四章变量作用域和内存问题基本类型和引用类型复制变量值基本类型值的复制引用类型值的复制传递参数执行环境及作用域延长作用域链声明变量查询标识符小结基本类型和引用类型的特点执行环境总结JavaScript高级程序设计第四章 — 变量、作用域和内存问题基本类型和引用类型ECMAScript变量可能包含两种类型的值：基本类型值和引用类型值。基

2015-08-18 16:59:42 589

原创 JavaScript高级程序设计第三章 --- 基本概念

JavaScript高级程序设计第三章基本概念语法区分大小写标识符注释关键字和保留字关键字保留字变量JavaScript高级程序设计第三章 — 基本概念语法区分大小写ECMAScript中的一切（变量、函数名和操作符）都区分大小写。比如：变量名test和变量Test分别表示不同的变量。标识符标识符：指变量、函数、属性的名字，或者函数的参数。一般采用驼峰式。例如：myC

2015-08-15 00:43:50 645

原创 JavaScript高级程序设计第二章 --- 在HTML中使用JavaScript

在HTML中使用 JavaScriptscript元素标签的位置延迟脚本嵌入代码与外部文件noscript元素小结在HTML中使用 JavaScript<script>元素使用<scritp>元素的方式有两种：直接在页面中嵌入Javascritpt<script type="text/javascript"> function sayHi(){ alert("

2015-08-14 21:11:26 525

原创 Javascript DOM编程艺术（第2版） -- 读书笔记（一）

Javascript DOM编程艺术（第2版） – 图片库制作结构层<!DOCTYPE html><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Image Gallery</title> <script type="text/j

2015-08-14 00:28:12 552

CherishLyf