发表于

所选插件列表

最近需要在微信端实现数字化签名的功能，Google后得到下列几款数字化签名插件。
1.willowsystems - jSignature（Fork from brinley - jSignature）
2.brinley - jSignature
3.signature_pad
4.jQuery UI Signature

选型

兼容性

如上几个插件都是基于Html5的Canvas实现，而Canvas已经被各大主流浏览器支持，对于其他不支持Canvas的浏览器，
可以使用Google的Explorer Canvas项目获得支持。

依赖性

除了signature_pad，其他几个插件都依赖于jquery。jQuery UI Signature在此基础上还依赖于jQuery UI.

可定制化

签名版背景，签名线颜色等几个插件都支持。
对于图片的输入输出都支持data uri格式。其中jQuery UI Signature支持SVG, jSignature在支持SVG的基础上还支持base30等其他格式。

可用性

这点是看哪款插件的效果更接近于真正的签名板。
在这一点上，signature_pad可以根据用户手触或是鼠标点击签名板的时间长短划出不同宽度的线而完全胜出。

综上所述，这次准备基于signature_pad实现签名板功能。

发表于

背景知识：
众所周知，DOM事件分为三个阶段：

捕获 阶段：在事件对象到达事件目标之前，事件对象必须从window经过目标的祖先节点传播到事件目标。 这个阶段被我们称之为捕获阶段。在这个阶段注册的事件监听器在事件到达其目标前必须先处理事件。

目标 阶段：事件对象到达其事件目标。 这个阶段被我们称为目标阶段。一旦事件对象到达事件目标，该阶段的事件监听器就要对它进行处理。如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播。

冒泡 阶段： 事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到window。这个阶段被称之为冒泡阶段。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。

在DOM事件执行的过程中，以下几个函数会被经常用到：
1.event.stopPropagation
阻止当前事件的进一步冒泡行为

2.event.stopImmediatePropagation
阻止当前事件的进一步冒泡行为并阻止当前事件所在元素上的所有相同事件处理函数的继续执行
注：绑定在元素上的事件的执行顺序与绑定顺序相同

3.event.preventDefault
取消当前事件的默认动作，譬如点击单选框(radioButton)后的调用此函数可以取消单选框选中动作
注：并非所有的事件的默认动作都可以被取消，最典型的情况：event.cancelable设为false时，事件的默认动作不会被取消

发表于

今天给EM_TOOLS添加功能的时候遇到了通过attr函数无法取得type=file控件的files属性的问题。
简单了Google了一下，目前了解到的这两个函数的区别为attr取得的是html标签上能看到的属性，而prop取得的
是DOM的属性。

具体详细的测试和了解稍后补充。

发表于

1.换行

两个空格+回车
a
b

2.列表

无序列表

书写时：

* Red
* Blue
* Gary

生成后：

  • Red
  • Blue
  • Gary

有序列表

书写时：

1. Red
2. Blue
3. Orange

生成后：

  1. Red
  2. Blue
  3. Orange

3.分隔线

书写时：

***
*****

生成后：

4.链接

书写时：

This is a [Link Example](#) Link.

生成后：
This is a Link Example Link.

5.强调

书写时：

*QD*
**QD**
_QD_
__QD__

生成后：
QD
QD
QD
QD

6.代码

书写时：

名称为``function getObject(){}``的函数

生成后：
名称为function getObject(){}的函数

发表于

背景

最近被问到好几次JQuery的选择器，原本想选择器想用的时候上网搜一下就好。
后来想想，自己学习技术的时候不够系统，是与他人进行技术方面的沟通时无法顺畅的沟通的主要原因之一。
古人说：亡羊补牢为时未晚。想到就做，就从现在开始系统的学习吧～加油～～～

文章中也会掺杂一些学习过程中遇到的知识点，目的也是为了能够举一反三扩充自己的知识点

学习时参考的文章列表如下：

jQuery入门笔记之（一）选择器引擎

常规选择器

简单选择器

id选择器

$("#nodeid")

元素选择器

$("div")

类选择器

$(".className")

进阶选择器

群组选择器

群组选择器通过,把复数个选择器给连接起来获取对应的节点

$("#nodeid, div, .className")

后代选择器

获取指定的后代对象

$("ul li a")
等价的JQuery函数find

通配选择器

获取所有DOM对象

$("*")

高级选择器

子选择器

取得当前直接子代元素

$("ul > li")
等价的JQuery函数children

PS:

后代选择器和子选择器的区别是
后代选择器选择的是属于当前父节点的所有子代元素（例如：儿子，孙子，从孙子）
而子选择器选择的是儿子元素。

相邻元素选择器

选择的是

  1. 与 + 前元素同级
  2. 与 + 前元素相临

  3. 位于 + 前元素之后

    $(“li + a”)

兄弟选择器

选择的是

  1. 与 + 前元素同级

  2. 位于 + 前元素之后

    $(“li ~ a”)

PS:

CSS中不存在，JQuery独有的选择器函数
prev(与相邻元素选择器是一对儿)
    1.与当前元素同级
    2.与当前元素相临
    3.位于当前元素之前
    4.仅选择一个
    
1
$("#nodeid").prev("p")


prevAll(与兄弟选择器是一对儿)
    1. 与当前元素同级
    2. 位于当前前元素之前
    $("#nodeid").prevAll("p")
prevUntil
    1.与当前元素同级
    2.位于当前元素之前
    3.在当前元素和指定元素之间
    $("#nodeid").prevUntil("div")
nextUntil
    1.与当前元素同级
    2.位于当前元素之后
    3.在当前元素和指定元素之间
    $("#nodeid").nextUntil("div")
siblings
    1.prevAll + nextAll
    **注意在同级中选择器可以命中两个指定节点时，此两个节点都会被选中**
    $("#nodeid").siblings()

属性选择器

$("input[type]")          选取拥有type属性值的input节点
$("input[type='text']")   选取type属性值为text的input节点
$("input[type^='date']")  选取type属性值为date开头的input节点
$("input[type$='e']")     选取type属性值为e结尾的input节点
$("input[type|='en']")    选取type属性值为en或以en-开头的input节点
$("input[type!='text']")  选取不具有type属性值或type属性值不等于text的input节点
$("input[type~='text']")  选取type属性值等于text或text在一个以空格分割的列表中的input节点
$("input[type*='e']")     选取type属性值包含``e``的input节点
$("input[data-widget][type='text']") 选取具有data-widget属性并且type属性值为text的input节点

过滤选择器

基本过滤器

$("input[type='text']:first")              选取指定元素中的第一个
$("input[type='text']:last")               选取指定元素中的最后一个
$("input:not(selector)")                   选取指定元素中selector没有命中的元素
$("div:odd")                               选取指定元素集合中序列号是奇数的元素(从0开始)
$("div:even")                              选取指定元素集合中序列号是偶数的元素(从0开始)
$("div:eq(1)")                             选取指定元素集合中序列号是1的元素(从0开始)
$("div:gt(1)")                             选取指定元素集合中序列号大于1的元素(从0开始)
$("div:lt(1)")                             选取指定元素集合中序列号小于1的元素(从0开始)

内容过滤器

$("div:contains('N')")                     选取包含N文本内容的元素
$("div:empty")                             选取不包含任何子元素和文本的元素
$("div:has('p')")                          选取含有p的div,与:not是好基友
$("div:parent")                            选取含有子元素或文本的元素

jQuery也提供了几个和名称:parent相同的函数
$("div").parent(selector)                  选取div的直接父节点，selector用于过滤
$("div").parents(selector)                 选取div的所有父节点，selector用于过滤
$("div").parentsUntil(selector)            选取div与selector之间的节点

可见性过滤器

$(“div:hidden”) 选取隐藏元素

符合以下几种情况的元素会被选取
1.input type="hidden"
2.display:none
3.width和height设为0
4.以上2和3两种元素的子元素也会被选取
5.option元素
**补充：visibility=true和opacity=0的元素没有被选中的原因是因为元素虽然不可见，但是还在当前文档中占有位置

$(“div:visible”) 选取可见元素

符合以下情况的元素会被选取
1.width或height不为0的元素
2.visibility=true和opacity=0的元素
3.其他任何可见元素

子元素过滤器

:first-child 获取父元素的第一个子元素

此处有疑问，first, first-child, first-of-type有什么区别呢？
个人理解
li:first取得的是li选择器获得的集合中的第一个元素
li:first-child取得的是li选择器获得的集合中的元素为其父元素物理位置上的第一个子元素
li:first-of-type取得的是li选择器获得的集合中的元素为其父元素中物理位置上第一个**li**子元素

:last-child 获取父元素的最后一个子元素
:only-child 获取其父元素内只有自己一个子元素的元素
:nth-child 获取指定索引值的元素

参数是基于被过滤的元素的父元素节点的顺序。
另外参数支持公式(an + b), n为周期长度，b为偏移值。例如2n + 1位下标为2的倍数 + 1的元素。
譬如下面的情况使用li:nth-child(1)无法匹配到li节点，需要使用li:nth-child(2)才可以。

1
2
3
4
<ul>
    <p></p>
    <li></li>
</ul>


例：
:nth-child(1)                          索引值从1开始计算
:nth-child(odd)                        奇数
:nth-child(even)                       偶数

其他方法

jQuery 在选择器和过滤器上，还提供了一些常用的方法，方便开发时灵活使用。

方法名 描述
is(selector/jqueryObject/element/function) 传递选择器、DOM、jquery对象或是函数来匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，返回true
hasClass(className) 判断是否含有指定样式的元素
slice(start, end) 选择从start到end位置之前的元素(start<=index<end)，如果是负数，则从后开始
filter(selector/jqueryObject/element/function) 筛选元素集合中匹配表达式或通过传递函数测试的那些元素集合。
end() 获取当前元素的前一个状态的元素(同级或父级)，另一种说法是终止在当前链的最新过滤操作，并返回匹配的元素的以前状态.此函数个人认为是高级操作，需要对jquery有详细了解时再使用
contents() 获取某元素下面所有元素节点，包括文本节点，如果是iframe，则可以查找文本内容

表单选择器

常规选择器

正常可以通过

1
2
$("input").val();
$("input[type='password']").val();

来取得表单内指定控件的值
PS:val和html等函数默认取得第一个元素的值

表单选择器

说白了就是提供简写的方式对form表单内的元素进行选择

方法名 描述
:input 选取所有 input、textarea、select 和 button元素
:text 选择所有单行文本框，即 type=text
:password 选择所有密码框，即 type=password
:radio 选择所有单选框，即 type=radio
:checkbox 选择所有复选框，即 type=checkbox
:submit 选取所有提交按钮，即 type=submit
:reset 选取所有重置按钮，即 type=reset
:image 选取所有图像按钮，即 type=image
:button 选择所有普通按钮，即 button 元素
:file 选择所有文件按钮，即 type=file

表单过滤器

方法名 描述
:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素，单选和复选字段
:selected 选取所有被选中的元素，下拉列表

发表于

这是我第一个使用Markdown形式来书写的Blog.

大分类

中分类

小分类

1
这个是highlight么？

发表于

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment