jquery 实时监听输入框值变化:oninput & onpropertychange

效果如下图,输入文字后,动态更新已输入的文字长度

QQ20160805-0@2x

 

代码如下

 

gulp详细入门教程

简介:

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。

1

本示例以gulp-less为例(将less编译成css的gulp插件)展示gulp的常规用法,只要我们学会使用一个gulp插件后,其他插件就差看看其帮助文档了。让我们一起来学习gulp吧! ^_^

gulp常用地址:

gulp官方网址:http://gulpjs.com

gulp插件地址:http://gulpjs.com/plugins

gulp 官方API:https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 中文API:http://www.ydcss.com/archives/424

目录:

在学习前,先谈谈大致使用gulp的步骤,给读者以初步的认识。首先当然是安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置文件gulpfile.js并写好配置信息(定义gulp任务),最后通过命令提示符运行gulp任务即可。

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

1、安装nodejs

1.1、说明:gulp是基于nodejs,理所当然需要安装nodejs;

1.2、安装:打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。然后像安装QQ一样安装它就可以了(安装路径随意)。

2、使用命令行(如果你熟悉命令行,可以直接跳到第3步

2.1、说明:什么是命令行?命令行在OSX是终端(Terminal),在windows是命令提示符(Command Prompt);

2.2、注:之后操作都是在windows系统下;

2.3、简单介绍gulp在使用过程中常用命令,打开命令提示符执行下列命令(打开方式:window + r 输入cmd回车):

node -v查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。PS:未能出现版本号,请尝试注销电脑重试;

npm -v查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器,那它有什么用呢?稍后解释

cd定位到目录,用法:cd + 路径 ;

dir列出文件列表;

cls清空命令提示符窗口内容。

3、npm介绍

3.1、说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);

3.2、使用npm安装插件:命令提示符执行npm install <name> [-g] [--save-dev]

3.2.1、<name>:node插件名称。例:npm install gulp-less --save-dev

3.2.2、-g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;  非全局安装:将会安装在当前定位目录;  全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;

3.2.3、--save:将保存配置信息至package.json(package.json是nodejs项目配置文件);

3.2.4、-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;

3.2.5、为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可(命令提示符执行npm install,则会根据package.json下载所有需要的包)。

3.4、使用npm卸载插件:npm uninstall <name> [-g] [--save-dev]  PS:不要直接删除本地插件包

3.5、使用npm更新插件:npm update <name> [-g] [--save-dev]

3.5.1、更新全部插件:npm update [--save-dev]

3.6、查看npm帮助:npm help

3.7、当前目录已安装插件:npm list

PS:npm安装插件过程:从http://registry.npmjs.org下载对应的插件包(该网站服务器位于国外,所以经常下载缓慢或出现异常),解决办法往下看↓↓↓↓↓↓。

4、选装cnpm

4.1、说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。32个!来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

4.2、官方网址:http://npm.taobao.org

4.3、安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org;  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。

5、全局安装gulp

5.1、说明:全局安装gulp目的是为了通过她执行gulp任务;

5.2、安装:命令提示符执行cnpm install gulp -g

5.3、查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。

6、新建package.json文件

6.1、说明:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;

6.2、它是这样一个json文件(注意:json文件内是不能写注释的,复制下列内容请删除注释)

6.3、当然我们可以手动新建这个配置文件,但是作为一名有志青年,我们应该使用更为效率的方法:命令提示符执行cnpm init

6.4、查看package.json帮助文档,命令提示符执行cnpm help package.json

特别注意:package.json是一个普通json文件,所以不能添加任何注释。参看 http://www.zhihu.com/question/23004511

7、本地安装gulp插件

7.1、安装:定位目录命令后提示符执行cnpm install --save-dev

7.2、本示例以gulp-less为例(编译less文件),命令提示符执行cnpm install gulp-less --save-dev

7.3、将会安装在node_modules的gulp-less目录下,该目录下有一个gulp-less的使用帮助文档README.md;

7.4、为了能正常使用,我们还得本地安装gulp:cnpm install gulp --save-dev

PS:细心的你可能会发现,我们全局安装了gulp,项目也安装了gulp,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。

8、新建gulpfile.js文件(重要)

8.1、说明:gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)。

8.2、它大概是这样一个js文件(更多插件配置请查看这里):

8.3、该示例文件请下载查看

9、运行gulp

9.1、说明:命令提示符执行gulp 任务名称

9.2、编译less:命令提示符执行gulp testLess

9.3、当执行gulp defaultgulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。

10、使用webstorm运行gulp任务

10.1、说明:使用webstorm可视化运行gulp任务;

10.2、使用方法:将项目导入webstorm,右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口,若出现”No task found”,选择右键”Reload tasks”,双击运行即可。

11、总结

11.1、安装nodejs;

11.2、新建package.json文件;

11.3、全局和本地安装gulp;

11.4、安装gulp插件;

11.5、新建gulpfile.js文件;

11.6、通过命令提示符运行gulp任务。

12、结束语

12.1、本文有任何错误,或有任何疑问,欢迎留言说明。

教程索引:

文章转载自:http://www.ydcss.com/archives/18,更多关于gulp的介绍请到作者博客查看。

bower简明入门教程

什么是bower

Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍。

1

准备工作

  1. 安装node环境:node.js
  2. 安装Git,bower从远程git仓库获取代码包:git简易指南

安装bower

使用npm,打开终端,输入:

其中-g命令表示全局安装

开始使用

使用help命令查看帮助

自定义包的安装目录

首先进入项目目录下,新建文件1.txt

然后命令行进入项目目录下,输入命令重命名该文件为.bowerrc

这个.bowerrc文件是自定义bower下载的代码包的目录,比如现在我的项目结构如下图:

那我的.bowerrc文件内容如下:

bower初始化

命令行进入项目目录中,输入命令如下:

会提示你输入一些基本信息,根据提示按回车或者空格即可,然后会生成一个bower.json文件,用来保存该项目的配置,如下:

包的安装

下面终于开始安装需要的包了!
比如我要安装一个jquery,输入如下命令:

然后bower就会从远程下载jquery最新版本到你的js/lib目录下
其中--save参数是保存配置到你的bower.json,你会发现bower.json文件已经多了一行:

包的信息

比如我们想要查找jquery都有哪些个版本,输入如下命令:

会看到jquerybower.json的信息,和可用的版本信息

可以看到jquery最新的兼容版版本为1.11.3

包的更新

上面安装的是最新版的高版本jquery,假如想要兼容低版本浏览器的呢?
已经查到兼容低版本浏览器的jquery版本为1.11.3,下面直接修改bower.json文件中的jquery版本号如下:

然后执行如下命令:

bower就会为你切换jquery的版本了

包的查找

还有一个很重要的功能,就是包的查找,比如我想要安装bootstrap的某个插件,但是记不住名字了,就可以直接在命令行输入:

bower就会列出包含字符串bootstrap的可用包了

包的卸载

卸载包可以使用uninstall 命令:

如果你是用的prezto或者oh-my-zsh,需要执行下面的命令

 

将console.log控制台信息在页面上打印出来

通过screenlog.js插件,我们不用打开浏览器的控制台,就可以在前台页面中看到这些调试信息,调试完毕直接移除这个插件即可,使用非常方便。

在页面中引入screenlog.min.js文件。然后通过下面的方法来初始化该插件。

在屏幕上显示的log信息。

1

 

github地址:https://github.com/chinchang/screenlog.js

微信发布官方样式库–Weui

为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI。

该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dialog (对话框)等网页常用的各式元素,并已在 GitHub 上开源。

111

开发者只需三步,就能在自己的网页上轻松实现按钮、浮层提示等功能:
1. 根据文档说明,下载 WeUI 库。
2. 在页面中引入 weui.min.css 文件。
3. 从官方 demo 中拷贝需要的功能组件代码到自己页面即可。

 

Demo 体验地址:WeUI演示

 

官方文档:http://mp.weixin.qq.com/wiki/2/ae9782fb42e47ad79eb7b361c2149d16.html

jQuery-File-Upload使用教程

最近的一个小项目中需要用到jquery上传图片,很早就知道了jquery-file-upload这个插件,不过一直没机会用到。

11

 

我的实现的功能就是点击按钮来上传图片并返回图片上传后的保存位置,并随着表单一起提交到后台。

jquery-file-upload API地址:https://github.com/blueimp/jQuery-File-Upload/wiki/API

官网:https://blueimp.github.io/jQuery-File-Upload/

 

首先需要引入必要的CSS和JS,这里不再多说

然后就是初始化

当然也可以带参数

当然也开始使用下面的方式设置参数

上面的是最基本的,更多用法看上面提供的文档吧。还是官方的说的全。

 

 

另外强烈推荐百度的一个:http://fex.baidu.com/webuploader/,可以试试,文档也很全。

jquery全选和反选checked,并解决checked失效问题

我的目的就是为了实现下面的全选效果,部分html代码,其他的就不在写了。

原来的jquery代码如下。这段代码是错误的,第三次点击全选的事后会出现checked失效问题。贴上代码供大家学习(注释掉的代码是错误的,会出现checked失效问题)

上面的代码就可以实现jquery全选和反选。

AngularJS学习笔记 — ng-app、ng-model、ng-repeat、ng-init

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的 根元素

ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。

 

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值

通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。

ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以:

  • 为应用程序数据提供类型验证(number、email、required)。
  • 为应用程序数据提供状态(invalid、dirty、touched、error)。
  • 为 HTML 元素提供 CSS 类。
  • 绑定 HTML 元素到 HTML 表单。

 

ng-repeat 指令

ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素

 

Python通过signal可传递的信号列表

Signal Description
SIGABRT 由调用abort函数产生,进程非正常退出
SIGALRM 用alarm函数设置的timer超时或setitimer函数设置的interval timer超时
SIGBUS 某种特定的硬件异常,通常由内存访问引起
SIGCANCEL 由Solaris Thread Library内部使用,通常不会使用
SIGCHLD 进程Terminate或Stop的时候,SIGCHLD会发送给它的父进程。缺省情况下该Signal会被忽略
SIGCONT 当被stop的进程恢复运行的时候,自动发送
SIGEMT 和实现相关的硬件异常
SIGFPE 数学相关的异常,如被0除,浮点溢出,等等
SIGFREEZE Solaris专用,Hiberate或者Suspended时候发送
SIGHUP 发送给具有Terminal的Controlling Process,当terminal被disconnect时候发送
SIGILL 非法指令异常
SIGINFO BSD signal。由Status Key产生,通常是CTRL+T。发送给所有Foreground Group的进程
SIGINT 由Interrupt Key产生,通常是CTRL+C或者DELETE。发送给所有ForeGround Group的进程
SIGIO 异步IO事件
SIGIOT 实现相关的硬件异常,一般对应SIGABRT
SIGKILL 无法处理和忽略。中止某个进程
SIGLWP 由Solaris Thread Libray内部使用
SIGPIPE 在reader中止之后写Pipe的时候发送
SIGPOLL 当某个事件发送给Pollable Device的时候发送
SIGPROF Setitimer指定的Profiling Interval Timer所产生
SIGPWR 和系统相关。和UPS相关。
SIGQUIT 输入Quit Key的时候(CTRL+\)发送给所有Foreground Group的进程
SIGSEGV 非法内存访问
SIGSTKFLT Linux专用,数学协处理器的栈异常
SIGSTOP 中止进程。无法处理和忽略。
SIGSYS 非法系统调用
SIGTERM 请求中止进程,kill命令缺省发送
SIGTHAW Solaris专用,从Suspend恢复时候发送
SIGTRAP 实现相关的硬件异常。一般是调试异常
SIGTSTP Suspend Key,一般是Ctrl+Z。发送给所有Foreground Group的进程
SIGTTIN 当Background Group的进程尝试读取Terminal的时候发送
SIGTTOU 当Background Group的进程尝试写Terminal的时候发送
SIGURG 当out-of-band data接收的时候可能发送
SIGUSR1 用户自定义signal 1
SIGUSR2 用户自定义signal 2
SIGVTALRM setitimer函数设置的Virtual Interval Timer超时的时候
SIGWAITING Solaris Thread Library内部实现专用
SIGWINCH 当Terminal的窗口大小改变的时候,发送给Foreground Group的所有进程
SIGXCPU 当CPU时间限制超时的时候
SIGXFSZ 进程超过文件大小限制
SIGXRES Solaris专用,进程超过资源限制的时候发送

jquery validation验证身份证号、护照、电话号码、email

先推荐一个基于bootstrap的jQuery validation插件:http://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/

jQuery validation添加验证规则

2

validata.html

validata.js

card.js

jQuery,代替toggle()绑定多个click事件方法

由于toggle()绑定多个click事件在1.9版本已经被移除了

jquery 1.x使用live方法,2.x使用on

给点击的按钮添加一个class名字用来判断是否已经点击过了

JS侧栏悬浮广告代码

效果图

20131129163754069

 

 

CSS

 

HTML/JS

幻灯插件jquery.KinSlideshow详细用法演示

兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。

1111

KinSlideshow默认设置效果代码:

*焦点图显示的标题为 img 中 alt 属性中的文字

 

javascript:

HTML:

jQuery获取图片宽度并放大到一定宽度

微博上可以见到,如果图片较大,点击图片的时候就会把图片放大。

当然,放大的最大宽度是有限制的,如果图片尺寸小于规定的最大宽度,就把图片放大为原始尺寸。反之,则放大为最大宽度。

代码