当前访客身份：游客 [
这个人不懒，但却是啥也没写
：详细的很 学习了 ！
：楼主分析的很精髓，学习到很多，珍藏了
：引用来自“骚年614”的评论 果然 很好用 不错 期...
：果然 很好用 不错 期待下一篇 ！
今日访问：0
昨日访问：1
本周访问：0
本月访问：17
所有访问：786
列表模式： |
统计: 0评/14阅/0赞
/*this function parses ampersand-separated name=value argument pairs from the query string of the URL. It stores the name=value pairs in properties of an object and returns that object. Use it like this:&&&&&&&&&&&&&&& var args = getArgs(); // parse args from URL&&&&&&&&&&& var q = args.q || &&;//Use argument, if defined, or a default value&&&&&&&&&&& var n = args.n ? parseInt(args.n) || 10;*/
function getArgs(){
&&& var args = new Object();
&&& var query = location.search.substring(1);//get query string
&&& var pairs = query.split(&&&);
&&& for(var i = 0; i & pairs. i++){
&&&&&&& var pos = pairs[i].indexOf(&=&);
&&&&&&& if (pos == -1)
&&&&&&& var argname = pairs[i].substring(0,pos);
&&&&&&& var value = pairs[i].substring(pos+1);
&&&&&&& value = decodeURIComponent(value);
&&&&&&& args[argname] =
发布于 2年前，
阅读(3) | 评论(0) |
投票(0) | 收藏(0)
带有实体名称的 ASCII 实体
quotation mark
apostrophe&
greater-than
HTML 支持的数学符号
square root
proportional to
simular to
approximately equal
almost equal
equivalent
less or equal
greater or equal
superset of
not subset of
subset or equal
superset or equal
circled plus
cirled times
perpendicular
dot operator
HTML 支持的希腊字母
theta symbol
upsilon symbol
HTML 支持的其他实体
capital ligature OE
small ligature oe
capital S with caron
small S with caron
capital Y with diaeres
f with hook
modifier letter circumflex accent
small tilde
thin space
zero width non-joiner
zero width joiner
left-to-right mark
right-to-left mark
left single quotation mark
right single quotation mark
single low-9 quotation mark
left double quotation mark
right double quotation mark
double low-9 quotation mark
double dagger
horizontal ellipsis
per mille&
single left angle quotation
single right angle quotation
left arrow
right arrow
down arrow
left right arrow
carriage return arrow
left ceiling
right ceiling
left floor
right floor
ISO 8859-1 符号实体
non-breaking space
inverted exclamation mark
broken vertical bar
spacing diaeresis
feminine ordinal indicator
angle quotation mark (left)
soft hyphen
registered trademark
spacing macron
plus-or-minus&
superscript 2
superscript 3
spacing acute
middle dot
spacing cedilla
superscript 1
masculine ordinal indicator
angle quotation mark (right)
fraction 1/4
fraction 1/2
fraction 3/4
inverted question mark
multiplication
ISO 8859-1 字符实体
capital a, grave accent
capital a, acute accent
capital a, circumflex accent
capital a, tilde
capital a, umlaut mark
capital a, ring
capital ae
capital c, cedilla
capital e, grave accent
capital e, acute accent
capital e, circumflex accent
capital e, umlaut mark
capital i, grave accent
capital i, acute accent
capital i, circumflex accent
capital i, umlaut mark
capital eth, Icelandic
capital n, tilde
capital o, grave accent
capital o, acute accent
capital o, circumflex accent
capital o, tilde
capital o, umlaut mark
capital o, slash
capital u, grave accent
capital u, acute accent
capital u, circumflex accent
capital u, umlaut mark
capital y, acute accent
capital THORN, Icelandic
small sharp s, German
small a, grave accent
small a, acute accent
small a, circumflex accent
small a, tilde
small a, umlaut mark
small a, ring
small c, cedilla
small e, grave accent
small e, acute accent
small e, circumflex accent
small e, umlaut mark
small i, grave accent
small i, acute accent
small i, circumflex accent
small i, umlaut mark
small eth, Icelandic
small n, tilde
small o, grave accent
small o, acute accent
small o, circumflex accent
small o, tilde
small o, umlaut mark
small o, slash
small u, grave accent
small u, acute accent
small u, circumflex accent
small u, umlaut mark
small y, acute accent
small thorn, Icelandic
small y, umlaut mark
发布于 2年前，
阅读(8) | 评论(0) |
投票(0) | 收藏(0)
Javascript语言的设计不够严谨，很多地方一不小心就会出错。
举例来说，请考虑以下情况。
现在，我们要判断一个全局对象myObj是否存在，如果不存在，就对它进行声明。用自然语言描述的算法如下：
if(myObj不存在){
　　　　声明myO
你可能会觉得，写出这段代码很容易。但是实际上，它涉及的语法问题，远比我们想象的复杂。指出，判断一个Javascript对象是否存在，有超过50种写法。只有对Javascript语言的实现细节非常清楚，才可能分得清它们的区别。
第一种写法
根据直觉，你可能觉得可以这样写：
if(!myObj) {
　　　　myObj = { };
但是，运行这段代码，浏览器会直接抛出ReferenceError错误，导致运行中断。请问错在哪里？
对了，if语句判断myObj是否为空时，这个变量还不存在，所以才会报错。改成下面这样，就能正确运行了。
if(!myObj) {
　　　　varmyObj = { };
为什么加了一个var以后，就不报错了？难道这种情况下，if语句做判断时，myObj就已经存在了吗？
要回答这个问题，就必须知道Javascript解释器的工作方式。Javascript语言是”先解析，后运行”，解析时就已经完成了变量声明，所以上面的代码实际等同于：
　　if(!myObj) {
　　　　varmyObj = { };
因此，if语句做判断时，myObj确实已经存在了，所以就不报错了。这就是var命令的”代码提升”（hoisting）作用。 Javascript解释器，只”提升”var命令定义的变量，对不使用var命令、直接赋值的变量不起作用，这就是为什么不加var会报错的原因。
第二种写法
除了var命令，还可以有另一种改写，也能得到正确的结果：
if(!window.myObj) {
　　　　myObj = { };
window是javascript的顶层对象，所有的全局变量都是它的属性。所以，判断myobj是否为空，等同于判断window对象是否有 myobj属性，这样就可以避免因为myObj没有定义而出现ReferenceError错误。不过，从代码的规范性考虑，最好还是对第二行加上 var：
if(!window.myObj) {
　　　　varmyObj = { };
或者写成这样：
if(!window.myObj) {
　　　　window.myObj = { };
第三种写法
上面这种写法的缺点在于，在某些运行环境中（比如V8、Rhino），window未必是顶层对象。所以，考虑改写成：
if(!this.myObj) {
　　　　this.myObj = { };
在全局变量的层面中，this关键字总是指向顶层变量，所以就可以独立于不同的运行环境。
第四种写法
但是，上面这样写可读性较差，而且this的指向是可变的，容易出错，所以进一步改写：
varglobal =
　　if(!global.myObj) {
　　　　global.myObj = { };
用自定义变量global表示顶层对象，就清楚多了。
第五种写法
还可以使用typeof运算符，判断myObj是否有定义。
if(typeofmyObj ==&undefined&) {
　　　　varmyObj = { };
这是目前使用最广泛的判断javascript对象是否存在的方法。
第六种写法
由于在已定义、但未赋值的情况下，myObj的值直接等于undefined，所以上面的写法可以简化：
if(myObj == undefined) {
　　　　varmyObj = { };
这里有两个地方需要注意，首先第二行的var关键字不能少，否则会出现ReferenceError错误，其次undefined不能加单引号或双引号，因为这里比较的是undefined这种数据类型，而不是”undefined”这个字符串。
第七种写法
上面的写法在”精确比较”（===）的情况下，依然成立：
if(myObj === undefined) {
　　　　varmyObj = { };
第八种写法
根据javascript的语言设计，undefined == null，所以比较myObj是否等于null，也能得到正确结果：
if(myObj ==null) {
　　　　varmyObj = { };
不过，虽然运行结果正确，但是从语义上看，这种判断方法是错的，应该避免。因为null指的是已经赋值为null的空对象，即这个对象实际上是有值 的，而undefined指的是不存在或没有赋值的对象。因此，这里只能使用”比较运算符”（==），如果这里使用”精确比较运算符”（===），就会出 错。
第九种写法
还可以使用in运算符，判断myObj是否为顶层对象的一个属性：
if(!('myObj'inwindow)) {
　　　　window.myObj = { };
第十种写法
最后，使用hasOwnProperty方法，判断myObj是否为顶层对象的一个属性：
if(!this.hasOwnProperty('myObj')) {
　　　　this.myObj = { };
1. 如果只判断对象是否存在，推荐使用第五种写法。
2. 如果除了对象是否存在，还要判断对象是否有null值，推荐使用第一种写法。
3. 除非特殊情况，所有变量都应该使用var命令声明。
4. 为了跨平台，建议避免使用window表示顶层对象。
5. 在Javascript语言中，null和undefined容易产生混淆。在可能同时涉及两者的情况下，建议使用”精确比较”运算符（===）。
发布于 2年前，
阅读(11) | 评论(0) |
投票(0) | 收藏(0)
cursor：pointer；为标准的用法
cursor：hand；用法ie only，firefox下不能渲染
发布于 2年前，
阅读(7) | 评论(0) |
投票(2) | 收藏(0)
《CSS禅意花园》
《JavaScript 权威指南》不知道多少版了6+
《Javascript DOM 编程艺术》
《Javascript 高级程序设计》
《JavaScript王者归来》
发布于 2年前，
阅读(6) | 评论(0) |
投票(1) | 收藏(0)
&概述 配合draggable插件，允许拖放到任何DOM元素内。 官方示例地址：
所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象 ui.draggable&– 表示当前被拖拽的元素的JQuery对象 ui.helper&– 表示当前被拖放的元素的JQuery对象 ui.position&– 表示当前被拖拽的相对坐标值对象{top,left} ui.offset&– 表示当前被拖拽的元素的绝对坐标值对象{top,left}
&参数（参数名 : 参数类型 : 默认值） accept :&Selector, Function : ‘*’ 仅允许符合适配器的元素激活拖放的事件。（如果是函数，则此函数会在页面上所有元素被调用，函数的返回值必须是布尔值。） 初始：$(‘.selector’).droppable({ accept: ‘.special’ }); 获取：var accept = $(‘.selector’).droppable(‘option’, ‘accept’); 设置：$(‘.selector’).droppable(‘option’, ‘accept’, ‘.special’);
activeClass :&String : false 如果设置值，则当有拖拽事件发生时，为页面上所有允许（accept）的元素添加此样式。 初始：$(‘.selector’).droppable({ activeClass: ‘ui-state-highlight’ }); 获取：var activeClass = $(‘.selector’).droppable(‘option’, ‘activeClass’); 设置：$(‘.selector’).droppable(‘option’, ‘activeClass’, ‘ui-state-highlight’);
addClasses :&Boolean : true 设置为false，可以阻止ui-droppable样式添加至可拖放的对象。（这样可以获取一定的性能优化） 初始：$(‘.selector’).droppable({ addClasses: false }); 获取：var addClasses = $(‘.selector’).droppable(‘option’, ‘addClasses’); 设置：$(‘.selector’).droppable(‘option’, ‘addClasses’, false);
greedy :&Boolean : false 是否防止嵌套的droppable事件被传播。 初始：$(‘.selector’).droppable({ greedy: true }); 获取：var greedy = $(‘.selector’).droppable(‘option’, ‘greedy’); 设置：$(‘.selector’).droppable(‘option’, ‘greedy’, true);
hoverClass :&String : false 当拖拽元素移至带有可拖放插件的元素上时，为元素添加指定的样式。 初始：$(‘.selector’).droppable({ hoverClass: ‘drophover’ }); 获取：var hoverClass = $(‘.selector’).droppable(‘option’, ‘hoverClass’); 设置：$(‘.selector’).droppable(‘option’, ‘hoverClass’, ‘drophover’);
scope :&String : ‘default’ 设置元素只允许具有相同scope值拖拽元素激活此拖放元素。 初始：$(‘.selector’).droppable({ scope: ‘tasks’ }); 获取：var scope = $(‘.selector’).droppable(‘option’, ‘scope’); 设置：$(‘.selector’).droppable(‘option’, ‘scope’, ‘tasks’);
tolerance :&String : ‘intersect’ 判断一个可拖拽元素被【放到】一个可拖放元素的判断模式。（可选值：’fit’, ‘intersect’, ‘pointer’, ‘touch’） fit：拖拽元素完全覆盖拖放元素 intersect：拖拽元素至少50%覆盖拖放元素 pointer：鼠标指针重叠在可拖放元素上 touch：只要有任何重叠即发生 初始：$(‘.selector’).droppable({ tolerance: ‘fit’ }); 获取：var tolerance = $(‘.selector’).droppable(‘option’, ‘tolerance’); 设置：$(‘.selector’).droppable(‘option’, ‘tolerance’, ‘fit’);
&事件 activate 当任何可拖拽元素开始拖拽动作时激活此事件。 初始：$(‘.selector’).droppable({ activate: function(event, ui) { … } }); 绑定：$(‘.selector’).bind(‘dropactivate’, function(event, ui) {& … });
deactivate 当任何可拖拽元素停止拖拽动作时激活此事件。 初始：$(‘.selector’).droppable({ deactivate: function(event, ui) { … } }); 绑定：$(‘.selector’).bind(‘dropdeactivate’, function(event, ui) { … });
over 当一个被允许（accept）的可拖拽元素移动并覆盖可拖放元素时激活。 初始：$(‘.selector’).droppable({ over: function(event, ui) { … } }); 绑定：$(‘.selector’).bind(‘dropover’, function(event, ui) { … });
out 当一个被允许（accept）的可拖拽元素移出可拖放元素时激活。 初始：$(‘.selector’).droppable({ out: function(event, ui) { … } }); 绑定：$(‘.selector’).bind(‘dropout’, function(event, ui) { … });
drop 当一个被允许（accept）的可拖拽元素移动并覆盖可拖放元素，松开鼠标时激活。 初始：$(‘.selector’).droppable({ drop: function(event, ui) { … } }); 绑定：$(‘.selector’).bind(‘drop’, function(event, ui) { … });
&方法 destory 从元素中移除拖拽功能。 用法：.droppable( ‘destroy’ )
disable 禁用元素的拖拽功能。 用法：.droppable( ‘disable’ )
enable 启用元素的拖拽功能。 用法：.droppable( ‘enable’ )
option 获取或设置元素的参数。 用法：.droppable( ‘option’ , optionName , [value] )
发布于 2年前，
阅读(92) | 评论(0) |
投票(1) | 收藏(0)
JQuery&UI&Draggable插件用来使选中的元素可以通过鼠标拖动.&&
Draggable的元素受影响css:&ui-draggable,&拖动过程中的css:&ui-draggable-dragging.&&
如果需要的不仅仅是拖,&而是一个完整的拖放功能,&请参阅JQuery&UI&的Droppable插件,&该插件提供了一个draggable放的目标.&&
所有的回调函数(start,&stop,&drag等事件)接受两个参数:&&&
event:&浏览器原生的事件&&
ui:&一个JQuery的ui对象,&其中有以下主要属性&&
&&&ui.helper:&正在拖动的元素的JQuery包装对象,&ui.helper.context可以获取到原生的DOM元素.&&
&&&ui.position:&ui.helper(也 就是我们要拖动的元素)相对于父元素(包含自己的元素,&如果是顶层,&对应body)的偏移,&值是一个对象{top,&left}----也就是可以 用ui.position.top获取到该元素与父元素的top当前偏移&&
&&&ui.offset:&与ui.position同意,&这里表示的是和浏览器内容区域左上边界的偏移(注意,&是内容区域,&而不是html的body区域.&&&html的body在默认情况下,&各种浏览器中都会相对offset有偏移的.)&&
addClasses:&&&
[类型]Boolean(布尔值)&&
[默认值]true&&
[产生影响]&&
&&&用 来设置是否给draggable元素通过ui-draggable样式才装饰它.&主要为了在通过.draggable()初始化很多(成百个)元素的时 候优化性能考虑,&但是,&这个选项的设置,&不会影响ui-draggable-dragging样式改变拖动过程样式.&&
&&&true表示ui-draggable样式被添加到该元素.&&
&&&false表示ui-draggable样式不被添加到该元素.&&
[代码示例]draggable其他选项的初始化,&获取属性值,&设置属性值部分除有特殊功能,&不再赘述,&仅粘贴代码.&&
&&&[初始化]&&
&&&$('.selector').draggable({&addClasses:&false&});&&
&&&将.selector选择器选中的元素渲染成为一个可拖动控件,&不为其添加ui-draggable样式&&
&&&[获取属性值]&&
&&&var&addClasses&=&$('#draggable').draggable('option',&'addClasses');&&
&&&获取.selector选择器选中的可拖动控件的addClasses选项的值.&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'addClasses',&false);&&
&&&将.selector选择器选中的可拖动控件的addClasses选项值设置为false.&&
appendTo:&&&
[类型]Element,&Selector(HTML元素对象或选择器)&&
[默认值]'parent'&父元素&&
[产生影响]&&
&&&用来指定控件在拖动过程中ui.helper的容器,&默认情况下,&ui.helper使用和初始定义的draggable相同的容器,&也就是其父元素.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&appendTo:&'body'&});&&
&&&[获取属性值]&&
&&&//getter&&
&&&var&appendTo&=&$('.selector').draggable('option',&'appendTo');&&
&&&[设置属性值]&&
&&&//setter&&
&&&$('.selector').draggable('option',&'appendTo',&'body');.&&
[类型]String,&Boolean(可取的值有'x',&'y',&false)&&
&&&'x':&只能水平拖动&&
&&&'y':&只能垂直拖动&&
&&&false:&既可以水平,&也可以垂直拖动.&&
[默认值]false,&不限制拖动的方向&&
[产生影响]&&
&&&约束拖动过程中的取向.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&axis:&'x'&});&&
&&&[获取属性值]&&
&&&var&axis&=&$('.selector').draggable('option',&'axis');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'axis',&'x');&&
cancel:&&&
[类型]选择器&&
[默认值]':input,&option'&&
[产生影响]&&
&&&通过选择器指定这类元素不能被渲染成draggable控件.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&cancel:&'button'&});&&
&&&[获取属性值]&&
&&&var&cancel&=&$('.selector').draggable('option',&'cancel');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'cancel',&'button');&&
connectToSortable:&此选项需要和sortable联合工作,&再议.&&
[类型]选择器&&
[默认值]':input,&option'&&
[产生影响]&&
&&&通过选择器指定这类元素不能被渲染成draggable控件.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&cancel:&'button'&});&&
&&&[获取属性值]&&
&&&var&cancel&=&$('.selector').draggable('option',&'cancel');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'cancel',&'button');&&
containment:&&&
[类型]选择器,&元素,&字符串,&数组.&&
&&&选择器:&只能在选择器约束的元素内拖动&&
&&&元素:&只能在给定的元素内拖动&&
&&&字符串:&&&
&&&&parent:&只能在父容器内拖动&&
&&&&document:&在当前html文档的document下可拖动,&超出浏览器窗口范围时,&自动出现滚动条&&
&&&&widow:&只能在当前浏览器窗口的内容区域拖动,&拖动超出当前窗口范围,&不会导致出现滚动条...&&
&&&数组:&[x1,&y1,&x2,&y2]以[开始水平坐标,&开始垂直坐标,&结束水平坐标,&结束垂直坐标]的方式划定一个区域,&只能在此区域内拖动.&这种方式指定时,&值是相对当前浏览器窗口内容区域左上角的偏移值.&&
&&&false:&不限制拖动的活动范围&&
[默认值]false&&
[产生影响]&&
&&&影响指定可拖动控件的活动区域.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&containment:&'parent'&});&&
&&&[获取属性值]&&
&&&var&containment&=&$('.selector').draggable('option',&'containment');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'containment',&'parent');&&
cursor:&&&
[类型]字符串.&&
[默认值]'auto'&&
[产生影响]&&
&&&影 响指定可拖动控件在拖动过程中的鼠标样式,&该样式设定之后,&需要控件的原始元素支持指定的cursor样式,&如果指定的值原始元素不支持,&则使用 原始元素默认的cursor样式.&比 如,&$('input[type=button]').draggable({&cursor:&'crosshair'&});&由于button不 支持crosshair这个鼠标样式,&所以,&会以默认形式显示.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&cursor:&'crosshair'&});&&
&&&[获取属性值]&&
&&&var&cursor&=&$('.selector').draggable('option',&'cursor');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'cursor',&'crosshair');&&
cursorAt:&&&
[类型]对象&&
&&&通过设置对象的top,&left,&right,&bottom的属性值中的一个或两个来确定位置.&&
[默认值]false&&
[产生影响]&&
&&&在 拖动控件的过程中,&鼠标在控件上显示的位置,&值为false(默认)时,&从哪里点击开始拖动,&鼠标位置就在哪里,&如果设置了,&就会在一个相对 控件自身左上角偏移位置处,&比 如:&$('.selector').draggable('option',&'cursorAt',&{left:&8,&top:&8});&那么 拖动过程中,&鼠标就会在自身的左上角向下向右各偏移8像素处.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&cursor:&'crosshair'&});&&
&&&[获取属性值]&&
&&&var&cursor&=&$('.selector').draggable('option',&'cursor');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'cursor',&'crosshair');&&
[类型]整数,&单位是毫秒&&
[默认值]0&&
[产生影响]&&
&&&可 拖动控件从鼠标左键按下开始,&到拖动效果产生的延时.&该选项可以被用来阻止一些不期望的点击带来的无效拖动.&具体效果是:&一次拖动,&从鼠标左键 按下,&到delay指定的时间,&如果鼠标左键还没有松开,&那么就认为这次拖动有效,&否则,&认为这次拖动无效.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&delay:&500&});&&
&&&[获取属性值]&&
&&&var&delay&=&$('.selector').draggable('option',&'delay');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'delay',&500);&&
distance:&&&
[类型]整数,&单位是像素&&
[默认值]1&&
[产生影响]&&
&&&可拖动控件从鼠标左键按下开始,&到拖动效果产生的时鼠标必须产生的位移.&该选项可以被用来阻止一些不期望的点击带来的无效拖动.&具体效果是:&一次拖动,&从鼠标左键按下,&只有当鼠标产生的位移达到distance指定的值时,&才认为是有效的拖动.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&distance:&30&});&&
&&&[获取属性值]&&
&&&var&distance&=&$('.selector').draggable('option',&'distance');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'distance',&30);&&
[类型]数组[x,&y],&x代表水平大小,&y代表垂直大小,&单位是像素&&
[默认值]false&&
[产生影响]&&
&&&可拖动控件拖动时采用grid的方式拖动,&也就是说拖动过程中的单位是guid选项指定的数组描述的格子那么大.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&grid:&[50,&20]&});&&
&&&[获取属性值]&&
&&&var&grid&=&$('.selector').draggable('option',&'grid');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'grid',&[50,&20]);&&
handle:&&&
[类型]选择器或元素&&
[默认值]false&&
[产生影响]&&
&&&指 定触发拖动的元素.&用法:&将一个id=window的div设置为可拖动控件,&设置它的handle是该div中的一个id=title的 span,&那么,&就只有在id=title的span上点击拖动才是有效的.&&&注意:&该元素一定要是可拖动控件的子元素.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&handle:&'h2'&});&&
&&&[获取属性值]&&
&&&var&handle&=&$('.selector').draggable('option',&'handle');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'handle',&'h2');&&
helper:&&&
[类型]字符串或函数&&
&&&字符串取值:&&
&&&&'original':&可拖动控件本身移动&&
&&&&'clone':&将可拖动控件自身克隆一个移动,&自身在原始位置不变&&
&&&函数则必须返回一个DOM元素:&以函数返回的DOM元素移动展现拖动的过程.&&
[默认值]'original'&&
[产生影响]&&
&&&拖动过程中帮助用户知道当前拖动位置的元素.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&helper:&'clone'&});&&
&&&[获取属性值]&&
&&&var&helper&=&$('.selector').draggable('option',&'helper');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'helper',&'clone');&&
iframeFix:&&&
[类型]布尔值或选择器,&选择器的选择结果需要是iframe元素&&
[默认值]false&&
[产生影响]&&
&&&阻止拖动过程中由于鼠标指针在iframe区域移动,&iframe对鼠标移动事件的默认响应.&&
&&&如果设置为true,&将会阻止拖动过程中当前页面上所有的iframe的mousemove事件,&如果设置一个选择器,&将会阻止指定的iframe的mousemove事件.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&iframeFix:&true&});&&
&&&[获取属性值]&&
&&&var&iframeFix&=&$('.selector').draggable('option',&'iframeFix');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'iframeFix',&true);&&
opacity:&&&
[类型]浮点数值&&
[默认值]false&&
[产生影响]&&
&&&拖动过程中helper(拖动时跟随鼠标移动的控件)的不透明度.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&opacity:&0.35&});&&
&&&[获取属性值]&&
&&&var&opacity&=&$('.selector').draggable('option',&'opacity');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'opacity',&0.35);&&
refreshPositions:&&&
[类型]Boolean&&
[默认值]false&&
[产生影响]&&
&&&如果设置为true,&所有的droppable位置会在每次mousemove事件中进行计算.&&&
&&&注意:&该选项主要用于解决高级动态页面展现问题.&慎用.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&refreshPositions:&true&});&&
&&&[获取属性值]&&
&&&var&refreshPositions&=&$('.selector').draggable('option',&'refreshPositions');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'refreshPositions',&true);&&
revert:&&&
[类型]Boolean,&字符串&&
[默认值]false&&
[产生影响]&&
&&&影响一次拖动之后是否回归到原始位置.&&
&&&true:&每次拖动停止之后,&元素自动回到原始位置&&
&&&'invalid':&除非是一个droppable并且被drop(放)成功了,&才不将元素返回到原始位置.&&
&&&'valid':&除invalid之外的其他情况.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&revert:&true&});&&
&&&[获取属性值]&&
&&&var&revert&=&$('.selector').draggable('option',&'revert');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'revert',&true);&&
revertDuration:&&&
[类型]整数&&
[默认值]500&&
[产生影响]&&
&&&revert(回归到原始位置)整个过程需要的时间,&单位是毫秒.&如果设置revert选项设置为false,&则忽略此属性.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&revertDuration:&1000&});&&
&&&[获取属性值]&&
&&&var&revertDuration&=&$('.selector').draggable('option',&'revertDuration');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'revertDuration',&1000);&&
[类型]字符串&&
[默认值]'default'&&
[产生影响]&&
&&&该 选项描述一个范围,&和droppable的同名选项结合使用,&droppable的accept选项用来设置可以接受的draggable控件,&同 时,&可接受的drggable控件受scope选项约束,&必须是同一个scope中的draggable和droppable才可以互相拖放.&&
&&&例如:&&
&&&$('#draggable_a').draggable({scope:&'a'});&&
&&&$('#draggable_b').draggable({scope:&'b'});&&
&&&$('#droppable_a').droppable({scope:&'a'});&&
&&&$('#droppable_b').droppable({scope:&'b'});&&
&&&droppable 控件的accept选项默认是'*',&看起来数draggable_a,&draggable_b可以自由的放入到droppable_a和 droppable_b中,&但是,&由于scope的约束,&draggable_a只能放入到droppable_a,&draggable_b只能 发乳到droppable_b中.&&
&&&注意:&这个选项就和变量的名称空间的意义类似.&默认值是'default',&说明如果不指定,&大家都还是有scope的,&名字是default而已.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&scope:&'tasks'&});&&
&&&[获取属性值]&&
&&&var&scope&=&$('.selector').draggable('option',&'scope');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'scope',&'tasks');&&
scroll:&&&
[类型]Boolean&&
[默认值]true&&
[产生影响]&&
&&&如果设置为true,&在拖动过程中超出可拖动控件容器的时候,&容器自动增加滚动条&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&scroll:&false&});&&
&&&[获取属性值]&&
&&&var&scope&=&$('.selector').draggable('option',&'scope');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'scroll',&false);&&
scrollSensitivity:&&&
[类型]整数值&&
[默认值]20&&
[产生影响]&&
&&&滚动条的敏感度.&&
&&&下面所属的鼠标指针是指在draggable控件移动过程中,&鼠标所处位置.&&
&&&鼠标指针和与draggable控件所在容器的边距离为多少的时候,&滚动条开始滚动.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&scrollSensitivity:&40&});&&
&&&[获取属性值]&&
&&&var&scrollSensitivity&=&$('.selector').draggable('option',&'scrollSensitivity');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'scrollSensitivity',&40);&&
scrollSpeed:&&&
[类型]整数值&&
[默认值]20&&
[产生影响]&&
&&&由于scrollSensitivity导致的滚动发生时,&滚动条一次滚动多少像素值.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&scrollSpeed:&40&});&&
&&&[获取属性值]&&
&&&var&scrollSpeed&=&$('.selector').draggable('option',&'scrollSpeed');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'scrollSpeed',&40);&&
[类型]Boolean,&选择器&&
[默认值]false&&
[产生影响]&&
&&&吸附功能,&设置为true等价与设置选择器.ui-draggable,&具体效果是在选择器指定的所有元素上,&当前的draggable控件都可以实现吸附功能,&吸附就是拖动过程中,&靠近但是还没有挨上目标组件是,&自动的将正在拖动的组件吸过去.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&snap:&true&});&&
&&&[获取属性值]&&
&&&var&snap&=&$('.selector').draggable('option',&'snap');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'snap',&true);&&
snapMode:&&&
[类型]字符串,&可选值如下&&
&&&'inner':&在指定的元素内部可以吸附&&
&&&'outer':&在指定元素外部可以吸附&&
&&&'both':&里面外面都可以吸附.&&
[默认值]'both'&&
[产生影响]&&
&&&设定吸附时候的模式.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&snapMode:&'outer'&});&&
&&&[获取属性值]&&
&&&var&snapMode&=&$('.selector').draggable('option',&'snapMode');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'snapMode',&'outer');&&
snapTolerance:&&&
[类型]整数&&
[默认值]20&&
[产生影响]&&
&&&设定离目标对象的边多少像素的时候,&进行吸附.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&snap:&true&});&&
&&&[获取属性值]&&
&&&var&snap&=&$('.selector').draggable('option',&'snap');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'snap',&true);&&
[类型]对象{group:&'.selector',&min:&50}&&
[默认值]false&&
[产生影响]&&
&&&一次初始化一组draggable控件的时候,&将其中的一些draggable控件以给定选择器选择,&作为一组,&这时,&这一组draggable控件就可以实现当前被拖动的始终在最前效果,&min用来指定这一组的z-index值的最小值.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&stack:&{&group:&'products',&min:&50&}&});&&
&&&[获取属性值]&&
&&&var&stack&=&$('.selector').draggable('option',&'stack');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'stack',&{&group:&'products',&min:&50&});&&
zIndex:&&&
[类型]整数&&
[默认值]false&&
[产生影响]&&
&&&拖动时的helper(跟随鼠标移动的控件)的z-index值.&z-index就是css中的层叠层数,&数值越大,&越在上层.&&
[代码示例]&&
&&&[初始化]&&
&&&$('.selector').draggable({&zIndex:&2700&});&&
&&&[获取属性值]&&
&&&var&zIndex&=&$('.selector').draggable('option',&'zIndex');&&
&&&[设置属性值]&&
&&&$('.selector').draggable('option',&'zIndex',&2700);&&
start:&拖动开始,&指鼠标按下,&开始移动.&&
[类型]dragstart&&
[回调函数接受的参数]&&
&&&event:&原生的浏览器事件.&&
&&&ui:&JQuery的ui对象&&
&&&this:&当前拖动的控件DOM对象&&
drag:&拖动过程中鼠标移动.&&
[类型]drag&&
[回调函数接受的参数]&&
&&&event:&原生的浏览器事件.&&
&&&ui:&JQuery的ui对象&&
&&&this:&当前拖动的控件DOM对象&&
stop:&拖动结束.&&
[类型]dragstop&&
[回调函数接受的参数]&&
&&&event:&原生的浏览器事件.&&
&&&ui:&JQuery的ui对象&&
&&&this:&当前拖动的控件DOM对象&&
[代码示例]&&
初始化时设置事件.&&
$('.selector').draggable({&&
&&&&&start:&function(event,&ui)&{&alert(this);&},&&&
&&&&&drag:&function(event,&ui)&{&alert(this);&},&&&
&&&&&stop:&function(event,&ui)&{&alert(this);&}&&
动态的绑定事件.&动态绑定时候,&使用的事件名就是事件的类型.&&
$(&.selector&).bind('dragstart',&function(event,&ui)&{&&
&&&alert(this);&&
$(&.selector&).bind('drag',&function(event,&ui)&{&&
&&&alert(this);&&
$(&.selector&).bind('dragstop',&function(event,&ui)&{&&
&&&alert(this);&&
destroy:&完全移除一个可拖动控件,&使其回退到该元素被初始化成可拖动控件之前的状态.&&
[代码示例]&&
&&&$(&.selector&).progressbar('destroy');&&
&&&将之前初始化的.selector指定的可拖动控件销毁,&使其返回初始化之前的状态.&&
disable:&将可拖动控件样式改变成为失效,&与enable对应.&&
enable:&将可拖动控件样式改变为允许,&与disable对应.&&
option:&获取或设置可拖动控件的选项,&第二个参数是选项名,&第三个参数是值.&如果不指定值,&就是获取,&指定值,&就是设置.&&
addClasses:&用来设置是否添加ui-draggable样式.&&
appendTo:&设置追加到什么地方&&
axis:&设置拖动的方向&&
cancel,&handle:&设置控制整个控件拖动动作的区域,&cancel指定区域不能拖动,&handle指定区域控制控件拖动.&&
connectToSortable:&需要和sortable集成.&&
containment:&设置控件可拖动范围&&
cursor,&cursorAt:&设置拖动过程中,&鼠标的样式及相对空间自身的位置.&&
delay,&distance:&设置拖动的延迟,&delay设置延迟时间,&distance设置延迟距离,&目的是防止误点击带来的不期望拖动.&&
grid:&设置拖动过程移动的单位(以小格的方式移动)&&
helper:&设置拖动过程中,&跟随鼠标移动的组件.&&
iframeFix:&解决拖动过程中与iframe层叠后的事件问题.&&
opacity:&拖动过程helper的不透明度.&&
refreshPositions:&设置后drop过程中,&鼠标每次移动都会计算位置.&&
revert,&revertDuration:&设置撤销移动相关.&&
scope:&设定draggable的域,&用来和droppable结合使用时确定可放入的目标.&&
scroll,&scrollSensitivity,&scrollSpeed:&设置拖动过程中带来的滚动条相关问题.&&
snap,&snapMode,&snapTolerance:&设置吸附的相关属性.&&
stack,&zIndex:&设置控件的层次.
发布于 2年前，
阅读(400) | 评论(0) |
投票(1) | 收藏(9)
JQuery UI是JQuery官方支持的WebUI 代码库，包含底层交互、动画、特效等API，并且封装了一些Web小部件（Widget）。同时，JQuery UI继承了jquery的插件支持，有大量的第三方插件可以丰富JQuery UI的功能。 JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。
首先要明确几个概念。 　　ource：拖拽源，要拖动的元素。 　　taerget：拖放目标，能够放入source的容器。 拖拽的动作分解如下： 　　1. drag start：在拖拽源(source)上按下鼠标并开始移动 　　2. drag move: 移动过程中 　　3. drag enter: &移动进入目标(target)容器 　　4. drag leave: 移出目标(target)容器 　　5. drop: 在目标(target)容器上释放鼠标 　　6. drag end: 结束 在html5之前，页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。
最简单的例子
最简单的拖拽是不改变元素所在的容器，而只改变其位置。例子如下：
&head&&/head&
&divid=&container&&
&divid=&dragsource&&
&p&拽我!&/p&
&/div&&!-- End container --&
&scripttype=&text/javascript&src=&js/jquery-1.7.min.js&&&/script&
&scripttype=&text/javascript&src=&js/jquery-ui-1.8.16.custom.min.js&&&/script&
$(function() {
$( &#dragsource& ).draggable();
拖动到另一个容器
更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上，增加一个div作为容器，并应用droppable函数：
&head&&/head&
&div id=&container&&
&div id=&dragsource&&
&p&拽我!&/p&
&/div&&!-- End container --&
&div id=&droppalbe&style=&width: 300height:300background-color:gray&&
&p&Drop here&/p&
&script type=&text/javascript&src=&js/jquery-1.7.min.js&&&/script&
&script type=&text/javascript&src=&js/jquery-ui-1.8.16.custom.min.js&&&/script&
$(function() {
$(&#dragsource&).draggable();
$(&#droppable&).droppable();
事件监听和回显（Feedback）
运行上一个例子，你可能会产生疑惑，真的放到目标容器上了吗？用户也会产生同样的疑惑。所以，可以监听拖动过程中发生的一些事件，并用可见的方式让用户知道。这就叫做回显（Feedback）。
对于源（source)，可以监听的事件包括：
　　create: 在source上应用draggable函数时触发 　　start：开始拖动时触发 　　drap：拖动过程中触发 　　stop：释放时触发 对于目标（target）,可以监听的事件包括： 　　create: 在target上应用droppable函数时触发 　　activate：如果当前拖动的source可以drop到本target，则触发 　　deactivate：如果可以drop到本target的拖拽停止，则触发 　　over：source被拖动到target上面 　　out：source被拖动离开target 　　drop：source被释放到target 事件处理函数都是通过draggable和droppable函数的参数传递，在这些事件处理函数中就可以进行Feedback。看一下实际的例子：
&div id=&dragsource&&
&p id=&targetMsg&&:-|&/p&
&div id=&droppable&style=&background-color:height:300&&
&p&Can drop! &/p&
&script type=&text/javascript&src=&js/jquery-1.7.min.js&&&/script&
&script type=&text/javascript&src=&js/jquery-ui-1.8.16.custom.min.js&&&/script&
$(function() {
$(&#dragsource&).draggable({
start:function(event,ui) {
$(this).find(&p&).html(&:-S&);
stop:function(event,ui){
$(this).find(&p&).html(&:-|&);
$(&#droppable&).droppable({
activate:function(event,ui) {
$(this).find(&p&).html(&Drop here !&);
over:function(event,ui) {
$(this).find(&p&).html(&Oh, Yeah!&);
out:function(event,ui) {
$(this).find(&p&).html(&Don't leave me!&);
drop:function( event, ui ) {
$(this).find(&p&).html(&I've got it!&);
前面的例子都是移动元素，另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。
helper可以指定为“original”, &clone&，其中&original&是默认值，即拖动自身，而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数，该函数返回一个自定义的DOM元素用于拖拽。 当不是拖动自身的时候，需要在target上指定drop事件函数，在该函数中将特定的元素添加到target容器上，否则drop的时候什么事情都不会发生。 简单复制的例子如下：
&head&&/head&
&div id=&dragsource&&
&p&拽我!&/p&
&div id=&container&style=&background-color:height:300&&
&/div&&!-- End container --&
&script type=&text/javascript&src=&js/jquery-1.7.min.js&&&/script&
&script type=&text/javascript&src=&js/jquery-ui-1.8.16.custom.min.js&&&/script&
$(function() {
$(&#dragsource&).draggable({
helper:&clone&
$(&#container&).droppable({
drop:function(event,ui){
$(this).append($(&&p style='position:left:&+
ui.offset.left+&;top:&+ui.offset.top+&'&clone&/p&&));
到目前位置，所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。
默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下：
&head&&/head&
&div id=&dragX&&
&p&－－&/p&
&div id=&dragY&&
&script type=&text/javascript&src=&js/jquery-1.7.min.js&&&/script&
&script type=&text/javascript&src=&js/jquery-ui-1.8.16.custom.min.js&&&/script&
$(function() {
$(&#dragX&).draggable({axis:&x&});
$(&#dragY&).draggable({axis:&y&});
除了方向之外，还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window，Array是指定一个矩形区域（regin）的四元数组： [x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制：
&head&&/head&
&div id=&container&style=&background-color:height:300&&
&div id=&draggable1&style=&background-color:height:20;width:100&&
&p&inparent&/p&
&div id=&draggable2&style=&background-color:height:20;width:100&&
&p&inregin&/p&
&script type=&text/javascript&src=&js/jquery-1.7.min.js&&&/script&
&script type=&text/javascript&src=&js/jquery-ui-1.8.16.custom.min.js&&&/script&
$(function() {
$(&#draggable1&).draggable({containment:&parent&});
$(&#draggable2&).draggable({containment: [20,20,300,200] });
还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素，使用grid参数指定吸附到网格，如下：
.draggable {background-color: width: 90 height: 80 padding: 5 float: margin: 0 10px 10px 0; font-size: .9 }
&div id=&container&style=&background-color:height:300&&
&div id=&draggable1&class=&draggable&&
&p&吸附到其他可拖拽元素&/p&
&div id=&draggable2&class=&draggable&&
&p&吸附到容器&/p&
&div id=&draggable3&class=&draggable&&
&p&吸附到网格(30x30)&/p&
&/div&&!--container--&
&script type=&text/javascript&src=&js/jquery-1.7.min.js&&&/script&
&script type=&text/javascript&src=&js/jquery-ui-1.8.16.custom.min.js&&&/script&
$(function() {
$(&#draggable1&).draggable({ snap:true});
$(&#draggable2&).draggable({ snap:&#container&});
$(&#draggable3&).draggable({grid: [30,30]});
拖动把手（handle）
默认是整个元素都可以拖动，也可以指定元素的某个子元素作为拖动的handle，如：
&div id=&draggable&&
&p&handle&/p&
$(&#draggable&).draggable({handle:&p&});
默认的droppable指定元素能够接受所有的drop， 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如： $(&.selector&).droppable({ accept: '.special' }) 表示只接受具有special 样式的元素。
增强用户体验
前面是实现拖拽的功能，JQueryUI还有一些参数可以增强用户体验。比如，cursor参数可以指定鼠标指针的形状，cursorAt指定鼠标指针在source的相对位置，revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下：
.draggable {background-color: width: 90 height: 80 padding: 5 float: margin: 0 10px 10px 0; font-size: .9 }
.droppable { width: 300 height: 300 background-color:red}
&div id=&draggable2&class=&draggable&&
&p&I revert when I'm not dropped&/p&
&div id=&droppable&class=&droppable&&
&p&Drop me here&/p&
&script type=&text/javascript&src=&js/jquery-1.7.min.js&&&/script&
&script type=&text/javascript&src=&js/jquery-ui-1.8.16.custom.min.js&&&/script&
$(function() {
$(&#draggable2&).draggable({ revert:&invalid&,cursor:&move&, cursorAt: { top: 56, left: 56 } });
$(&#droppable&).droppable({
activeClass:&ui-state-hover&,
hoverClass:&ui-state-active&,
drop:function( event, ui ) {
.addClass(&ui-state-highlight&)
.find(&p&)
.html(&Dropped!&);
JQuery UI提供了强大的拖拽功能和良好的用户体验，同时又非常容易使用。本文介绍了常用的各种用法。更多的参数还可以参考项目主页的&和 &。
转自：/holbrook/archive//2394111.html
发布于 2年前，
阅读(50) | 评论(0) |
投票(2) | 收藏(0)
String replace
string的replace方法我们经常用，替换string中的某些字符，语法像这样子
string.replace(subStr/reg,replaceStr/function)
第一个参数是要查找的字符串或者一个正则表达式，第二个参数是想替换成的字符串或一个方法，我们可以这么使用
&I'm Byron&.replace(&B&,&b&)// I'm byron
记过和我们想得一样，但是
&I'm a student, and you?&.replace(&n&,&N&);// I'm a studeNt, and you?
和我们预期的不一样，第二个‘n’没有被替换。字符串的 replace 方法如果第一个参数传入字符串，那么只有第一个匹配项会被替换。如果要替换全部匹配项，需要传入一个 RegExp 对象并指定其 global 属性。
&I'm a student, and you?&.replace(/n/g,&N&);// I'm a studeNt, aNd you?
这样才可以达到我们目的，关于string replace方法详细使用可以看看
我们可以这样构造一个Date对象
newDate()//Date {Fri Aug 02 :33 GMT+0800 (China Standard Time)}
newDate(milliseconds)&//Date {Fri Aug 02 :26 GMT+0800 (China Standard Time)}
newDate(&&)//Date {Fri Aug 02 :00 GMT+0800 (China Standard Time)}
newDate(year,month,day,hours,minutes,seconds,ms)
前三种方式没有什么问题，但第四种得到的结果回合我们预期的不一致
newDate()&//Date {Mon Sep 02 :00 GMT+0800 (China Standard Time)}
我们可以看到，传入的月份是08，返回的结果却是九月。这是因为Date对象的月份是从0开始计数的（天却不是），即0代表一月，1代表二月…11代表12月。在调用Date实例的getMonth方法时尤其要注意
vard =newDate();&&&&&&&// 日
alert(d.getMonth());&&&&&&&&&&&// 结果为4
Date.parse
Date.parse方法可以识别两种格式的字符串参数（标准的长日期格式，比如带星期的那种，也可以识别，不过不常用）：
1. “M/d/yyyy”: 美国的日期显示格式。如果年传入2位则作为 19xx 处理
2.”yyyy-MM-dd” 或 “yyyy/MM/dd”: 注意月和日都必须是两位
Date.parse 的返回结果不是一个Date对象，而是从午夜（GMT）到给定日期之间的毫秒数。可以用Date的构造函数将其转换为Date对象。
newDate(Date.parse(&8/2/2012&));&&&// 正确识别为日
newDate(Date.parse(&&));&&&// 正确识别为日
newDate(Date.parse(&&));&&&// 不能识别
for…in 遍历数组
for…in用来遍历一个对象中的成员（属性，方法），如果用来遍历数组的到的结果并不是预期中数组每项的值，方法神马的会被遍历出来
Array.prototype.contains =function(item) {
for(vari = 0; i &=this.length - 1; i++) {
if(this[i] == item)
returnthis[i];
varstaff = [&Staff A&,&Staff B&];
// Normal Enumeration: Only the 2 items are enumerated
for(vari = 0; i &= staff.length - 1; i++) {
varsingleStaff = staff[i];
alert(singleStaff);
// for...in Enumeration: the method &contains& are enumerated, too
for(varsingleStaffinstaff) {
alert(singleStaff);
事实上很多时候我们都会给数组加上其他属性。比如 jQuery 对象就是一个数组对象加上一些扩展方法；再比如 String.prototype.match 方法返回值就是一个数组（正则表达式及其子表达式的匹配项）加上 index 和 input 两个属性。
语法： parseInt(string, radix)
必需。要被解析的字符串。
可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。
当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
举例，如果 string（开头结尾空格自动省略） 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。
parseInt(&10&);&&&&&&&//返回 10
parseInt(&19&,10);&&&&&&&//返回 19 (10+9)
parseInt(&11&,2);&&&&&&&//返回 3 (2+1)
parseInt(&17&,8);&&&&&&&//返回 15 (8+7)
parseInt(&1f&,16);&&&&&&&//返回 31 (16+15)
parseInt(&010&);&&&&&&&//未定：返回 10 或 8
setTimeout/setInterval执行时机
setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。
JavaScript其实是运行在单线程的环境中的，这就意味着定时器仅仅是计划代码在未来的某个时间执行，而具体执行时机是不能保证的，因为页面的生命周期中，不同时间可能有其他代码在控制JavaScript进程。在页面下载完成后代码的运行、事件处理程序、Ajax回调函数都是使用同样的线程，实际上负责进行排序，指派某段程序在某个时间点运行的优先级。
我们可以可以把JavaScript想象成在时间线上运行。当页面载入的时候首先执行的是页面生命周期后面要用的方法和变量声明和数据处理，在这之后JavaScript进程将等待更多代码执行。当进程空闲的时候，下一段代码会被触发
除了主JavaScript进程外，还需要一个在进程下一次空闲时执行的代码队列。随着页面生命周期推移，代码会按照执行顺序添加入队列，例如当按 钮被按下的时候他的事件处理程序会被添加到队列中，并在下一个可能时间内执行。在接到某个Ajax响应时，回调函数的代码会被添加到队列。JavaScript中没有任何代码是立即执行的，但一旦进程空闲则尽快执行。定时器对队列的工作方式是当特定时间过去后将代码插入，这并不意味着它会马上执行，只能表示它尽快执行。
关于setTimeout/setInterval执行时机详细说明可以看看
console.log(a);//Error:a is not defined ,直接报错，下面语句没法执行，一下结果为注释该句后结果
console.log(b)//undefined
varb=&Test&;
console.log(b);//Test
很奇怪前两句变量a,b都没有声明，第一句却报错，第二句能够输出undefined？这是因为JavaScript 是解释型语言，但它并不是直接逐步执行的，JavaScript解析过程分为先后两个阶段，一个是预处理阶段，另外一个就是执行阶段。在预处理阶段 JavaScript解释器将完成把JavaScript脚本代码转换到字节码，然后第二阶段JavaScript解释器借助执行环境把字节码生成机械 码，并顺序执行。
也就说JavaScript值执行第一句语句之前就已经将函数/变量声明预处理了，var b=”Test” 相当于两个语句，（undefined结果的来源，在执行第一句语句之前已经解析），b=”Test”（这句是顺序执行的，在第二句之后执行）。这也是为什么我们可以 在方法声明语句之前就调用方法的原因。
showMsg();// This is message
functionshowMsg()
&&&&alert('This is message');
块级作用域
JavaScript没有块级作用域，只有函数级作用域，这就意味着{}在JavaScript中只能起到语法块的作用，而不能起到作用域块作用
if(true){//语法块，保证{}内代码if条件成立执行
&&&&vara=3;
console.log(a);//3
上面例子可以清楚看到属于window的console.log方法依然可以访问貌似是局部变量的a
首先从一个经典错误谈起，页面上有若干个div， 我们想给它们绑定一个onclick方法，于是有了下面的代码
&div id=&divTest&&
&&&&&&&&&span&0&/span& &span&1&/span& &span&2&/span& &span&3&/span&
&&&&&/div&
&&&&&div id=&divTest2&&
&&&&&&&&&span&0&/span& &span&1&/span& &span&2&/span& &span&3&/span&
&&&&&/div&
$(document).ready(function() {
&&&&&&&&&&&&varspans = $(&#divTest span&);
&&&&&&&&&&&&for(vari = 0; i & spans. i++) {
&&&&&&&&&&&&&&&&spans[i].onclick =function() {
&&&&&&&&&&&&&&&&&&&&alert(i);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&});
很简单的功能可是却偏偏出错了，每次alert出的值都是4，简单的修改就好使了
varspans2 = $(&#divTest2 span&);
&&&&&&&&$(document).ready(function() {
&&&&&&&&&&&&for(vari = 0; i & spans2. i++) {
&&&&&&&&&&&&&&&&(function(num) {
&&&&&&&&&&&&&&&&&&&&spans2[i].onclick =function() {
&&&&&&&&&&&&&&&&&&&&&&&&alert(num);
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&})(i);
&&&&&&&&&&&&}
&&&&&&&&});
闭包是指有权限访问另一个函数作用域的变量的函数，创建闭包的常见方式就是在一个函数内部创建另一个函数,只要存在调用内部函数的可 能，JavaScript就需要保留被引用的函数。而且JavaScript运行时需要跟踪引用这个内部函数的所有变量，直到最后一个变量废 弃，JavaScript的垃圾收集器才能释放相应的内存空间。
这笔书的很肤浅，想简单了解闭包可以看看
关于JavaScript的坑坑洼洼真不少，一边学习一边总结吧。
发布于 2年前，
阅读(6) | 评论(2) |
投票(2) | 收藏(0)}