jQuery 1.9 正式版发布,最后支持 IE 6/7/8 的版本

jQuery 1.9 正式版发布了,同时发布的还有 jQuery Migrate 1.0,如果你想使用该版本请先阅读 jQuery 1.9 升级指南 以便让你的升级更加顺利。

于此同时 jQuery 2.0 也正在进行 beta 的测试,2.0 和 1.9 具有相同的 API,很多之前废弃的方法已经从这两个版本中删除,例如 $.browser(),jQuery 1.9 还是支持 IE 6/7/8,但是 2.0 版本将不再支持这三个版本,因此 2.0 版本将会比 1.9 运行速度更快,体积更小。

jQuery 1.9 正式版文件可通过 jQuery 的 CDN 和微软的 CDN 获取:

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
 <script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>

jQuery 2.0 beta 1 通过 jQuery CDN 的获取方式:

<script src="http://code.jquery.com/jquery-2.0.0b1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>

关于 jQuery 1.9 的详细改进内容请阅读官方发行说明

jQuery 的详细介绍:请点这里
jQuery 的下载地址:请点这里

jQuery旋转插件

jQuery旋转插件,支持Internet Explorer 6.0 + 、Firefox 2.0、Safari 3、Opera 9、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。调用和方法: < strong> rotate(angle) angle参数:[Number]–默认为0–根据给定的角度旋转图片例如:

$("#img").rotate(45);

rotate(parameters) parameters参数:[Object]包含旋转参数的对象。支持的属性:

  1. angle属性:[Number]–default 0–旋转的角度数,并且立即执行例如:
    $("#img").rotate({angle:45});
  2. bind属性:[Object]对象,包含绑定到一个旋转对象的事件。事件内部的$(this)指向旋转对象-这样你可以在内部链式调用-$(this).rotate(…)。例如(click on arrow):
    $("#img").rotate({bind:{click:function(){$(this).rotate({angle:0,animateTo:180})}}});
  3. animateTo属性:[Number]–default 0–从当前角度值动画旋转到给定的角度值(或给定的角度参数)例如:结合上面的例子,请参阅使用。
  4. duration属性: [Number]–指定使用animateTo的动画执行持续时间例如 (click on arrow) :
        $("#img").rotate({
        bind: {
        click: function() {
        $(this).rotate({
        duration: 6000,
        angle: 0,
        animateTo: 100
        })
        }
        }
        }); 
  5. step属性: [Function]–每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
  6. easing属性:[Function]–默认(see below)–Easing function used to make animation look more natural.It takes five parameters(x,t,b,c,d)to support easing from http:
        function(x,t,b,c,d){return-c*((t=t/d - 1) * t * t * t - 1) + b
        } 

    Where:t:current time,b:begInnIng value,c:change In value,d:duration,x:unused No easing(linear easing):

        function(x,t,b,c,d){return(t/d) * c
        } 

    Example(click on arrow):

    $("#img").rotate({bind:{click:function(){$(this).rotate({angle:0,animateTo:180,easing:$.easing.easeInOutElastic})}}});
  7. callback属性:[Function]动画完成时执行的回调函数例如(click on arrow):
    $("#img").rotate({bind:{click:function(){$(this).rotate({angle:0,animateTo:180,callback:function(){alert(1)}})}}});

getRotateAngle 这个函数只是简单地返回旋转对象当前的角度。例如:

$("#img").rotate({angle:45,bind:{click:function(){alert($(this).getRotateAngle())}}});

stopRotate 这个函数只是简单地停止正在进行的旋转动画。例如:

$("#img").rotate({bind:{click:function(){$("#img").rotate({angle:0,animateTo:180,duration:6000});setTimeout(function(){$("#img").stopRotate()},1000)}}});

用这个可以实现很多关于旋转的网页特效。
jqueryrotate项目地址: http: //code.google.com/p/jqueryrotate/
代码示例:http://code.google.com/p/jqueryrotate/wiki/Examples

jQuery 1.8 的正式版发布了

JQuery - The write less, do more javascript library

炎炎夏日,jQuery 1.8 的正式版发布了,让我们大概看一下 jQuery 1.8 主要的大改动包括那几个方面。
下载地址:

http://code.jquery.com/jquery-1.8.0.min.js (压缩且最小化,适合产品环境使用)
http://code.jquery.com/jquery-1.8.0.js (未压缩版本,用于调试)
1. Sizzle 选择器引擎重新架构
2. 重新改造动画处理
3. 自动 CSS 前缀处理

当你在 .css() 和 .animate() 中使用 CSS 属性时,jQuery 会自动根据浏览器类型来设置一些前缀,例如 .css(“user-select”, “none”) 在 Chrome/Safari 会变成 “-webkit-user-select”, 在 Firefox 变成 “-moz-user-select”, 在 IE10 则变成 “-ms-user-select”.

4. 更灵活的 $(html, props)
5. 超过 160 个 bug 解决并关闭
6. 代码更加小
7. 模块化

同时 jQuery 1.8 还移除了一些 API,如果你要升级到这个版本请一定阅读官方发行说明。

jquery imgareaselect 插件中文文档

关于 imgareaselect 插件

imgareaselect 是一个 允许用户使用简单、直观的点击、拖动界面图像选择矩形区域的jQuery插件。该插件可用于 web 应用程序中轻松实现图像裁剪功能,以及其他功能,如照片标记、 图像编辑功能,等等。

Download file

使用demo

尝试一下下面各种效果:

点击查看demo


使用imgareaselect这个插件:

调用方式:

$(document).ready(function () {
    $('img#photo').imgAreaSelect({
        handles: true,
        onSelectEnd: someFunction
    });
});

如果 jQuery 对象中有多个元素,将为所有元素启用该插件。imgAreaSelect也适用于非图像元素,以及任何块元素(例如,<div>有背景图片);
您可以在 $(document).ready() 或 $(window).load() 事件处理程序初始化插件

options参数

参数名 数据类型 默认值 描述
aspectRatio string   设定选取区域的显示比率,如:”4:3″
autoHide boolean false 如果设置为true,当选择区域选择结束时消失;
classPrefix string ”imgareaselect” 这是一个字符串,表示插件样式的类名加前缀
disable boolean   如果设置为true,禁用插件
enable boolean   如果设置为true,插件被重新启用
fadeSpeed boolean false 如果设置为大于零的数字,则用优美的淡入/淡出动画来显示图片,
handles boolean false 如果设置为true,调整手柄则会显示在选择区域内,如果设置为”corners”,则只有角处理会显示调整手柄
hide boolean   如果设置为true,选择范围是隐藏
imageHeight number   图片的真实高度 (if scaled with the CSS width and height properties)
imageWidth number   真实图片宽度 (if scaled with the CSS width and height properties)
instance number   如果设置为true,imgAreaSelect() 调用返回一个imgAreaSelect绑定到的图像的实例,使您可以使用它的API方法
keys boolean false 启用/禁用键盘支持,默认值为false
maxHeight number   选取的最大高度(单位为像素)
maxWidth number   选取的最大宽度(单位为像素)
minHeight number   选取的最小高度(单位为像素)
minWidth number   选取的最小宽度(单位为像素)
movable boolean true 确定选取是否可以移动
parent string “body” 一个jQuery对象或选择字符串,指定被追加到父元素,默认值为”body”
persistent boolean false 如果设置为true,选择区以外的点击将不会启动一个新的选区(即用户将只能移动/调整现有的选择范围),默认值为false
resizable boolean true 确定是否选择面积应可调整大小
show boolean   如果设置为true,选区则会显示
x1
y1
    最初选择区域的左上角坐标
x2
y2
    最初选择区域的右上角坐标
zIndex     插件元素的z-index值,正常情况下imgAreaSelect会自动分配,但有少数情况,有必要将其设置为制定值
onInit function   插件初始化时的回调函数
onSelectStart function   插件开始选择时的回调函数
onSelectChange function   插件改变选区时的回调函数
onSelectEnd function   弹窗显示前的回调函数

Callback 函数

回调函数 (参见onInit、 onSelectStart、 onSelectChange 和 onSelectEnd 参数)
传递两个参数。第一个参数是插件所附加到的图像的引用,第二参数是一个对象,表示当前选定内容。对象有六个属性:

属性 描述
x1
y1
所选区域的左上角的坐标
x2
y2
选定区域右下角的坐标
width 选择宽度
height 选择高度

下面是一个示例将选择结束后执行的回调函数

$('img#photo').imgAreaSelect({
    onSelectEnd: function (img, selection) {
        alert('width: ' + selection.width + '; height: ' + selection.height);
    }
});

键盘支持

如果keys 参数设置为 true,选择区域可以使用键盘移动/调整。默认情况下,使用下面的键

属性 描述
方向键 将选区移动 10 个像素
Shift + 方向键 将选区移动 1个像素
Ctrl + 方向键 将选择区域调整 10 个像素的大小
Shift + Ctrl + 方向键 将选择区域调整 1 个像素的大小

您可以通过将键值对设置一个对象覆盖上面的默认键值的绑定。该对象可能有以下属性

属性 描述
arrows 定义方向键的行为
shift   定义 Shift 键的行为
ctrl   定义 Ctrl 键的行为
alt 定义 Alt 键的行为

每个属性可以设置为像素 (≥ 1) 的选择区域,当特定键被按下时应该移动/调整大小数,或者”resize”字符串,指示密钥应该切换到调整大小模式的字符串。示例:

$('img#example').imgAreaSelect({
    keys: { arrows: 15, ctrl: 5, shift: 'resize' }
});

使用这些设置,按箭头键仅将选择区域通过移动 15 像素,按 Ctrl 键将移动修改区域大小为 5 个像素,按住 shift 键将切换到调整大小。

如果有多个imgAreaSelect实例的页面有初始化的键选项,在任何时刻只有一实例可以控制键盘。默认情况下,任何用户操作 (选择区调整大小或移动) 或 reinvocation 插件实例上的 imgAreaSelect()
方法使键盘控制一个。

API 方法

为了简化扩展插件,并将它与其他 web 应用程序的组件集成提供了几个 API 方法。

为了使用这些方法,您需要插件的对象实例。若要获取之一,调用 imgAreaSelect() 方法, 将instance选项设置为 true;

var ias = $('#photo').imgAreaSelect({ instance: true });

现在,您可以使用此对象调用公共方法。例如,要设置的预定义的选择区域

ias.setSelection(50, 50, 150, 200, true);
ias.setOptions({ show: true });
ias.update();

请注意,您应该只有在该实例完全初始化后使用,即在 onInit 回调函数,或已触发后随时 onInit。

可使用以下方法:

方法名 描述
getOptions getOptions()

获取当参数

返回:
一个对象,包含当前使用中的参数

setOptions   setOptions(newOptions)

设置参数

参数:
newOptions – 新的参数对象

getSelection   getSelection([noScale])

获取当前所选内容

参数:
noScale (optional) – 如果设置为 true,缩放不会应用于返回的选择

返回:
选择对象

setSelection setSelection(x1, y1, x2, y2, [noScale])

设置当前所选内容

参数:
x1 – 选择区域的左上角顶部 X 坐标
y1 – 选择区域的左上角的 Y 坐标
x2 – 选择区域的右下角的 x 坐标
y2 – 选择区域右下角的 Y 坐标
noScale (optional) – 如果设置为 true,缩放不会应用于新的选择

注意: 此方法仅插件实例中设置选定内容的内部表示形式, 它不会更新可视化界面。 如果您想要显示的新选择,可以在setSelection() 后调用 update() 。 还要确保 theshow 选项被设置为 true。.
cancelSelection cancelSelection()

取消当前选定内容

注意: 此方法隐藏选择/外部区域。因此没有必要调用 update() (作为反对 tosetSelection())。
update update([resetKeyPress])

更新插件元素

参数:
resetKeyPress (optional) – 如果设置为 false,此实例 keypress 事件处理程序没有激活

jQuery-serializeArray()输出以数组形式序列化表单值的方法

实例

输出以数组形式序列化表单值的结果:

$("button").click(function(){
  x=$("form").serializeArray();
  $.each(x, function(i, field){
    $("#results").append(field.name + ":" + field.value + " ");
  });
});

定义和用法

serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。

您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。

语法

$(selector).serializeArray()

详细说明

serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。

注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。

返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

.serializeArray() 方法使用了 W3C 关于 successful controls(有效控件) 的标准来检测哪些元素应当包括在内。特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

该方法可以对已选择单独表单元素的对象进行操作,比如 <input>, <textarea>, 和 <select>。不过,更方便的方法是,直接选择 <form> 标签自身来进行序列化操作。

$("form").submit(function() {
  console.log($(this).serializeArray());
  return false;
});

上面的代码产生下面的数据结构(假设浏览器支持 console.log):

[
  {
    name: a
    value: 1
  },
  {
    name: b
    value: 2
  },
  {
    name: c
    value: 3
  },
  {
    name: d
    value: 4
  },
  {
    name: e
    value: 5
  }
]

示例

取得表单内容并插入到网页中:

HTML 代码:

Results:


check1 check2 radio1 radio2

jQuery 代码:

var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
});