js、jquery实用小技巧集合

Tip16：JS的定时器

JS 中有两种定时器，setTimeout(fn, t) 和 setInterval(fn, t)，fn指的是定时执行的方法名，字符串类型。

 

setTimeout(fn, t)：

只执行一次，执行完成后将销毁。

setInterval(fn, t)：一直执行。

 

(Date：2012-02-17)

 

-----------------------------------------------------------------

Tip15：Jquery触发回车事件

 $(function () {


$(#target).bind(keyup, function (event) {
if (event.keyCode == 13) {


alert("Hello~");


}


});


}); 

(Date：2011-10-28)

-----------------------------------------------------------------

 Tip14：获得select 的值

jquery可以像获取textbox值一样获取select的值：$(select).val();

(Date：2011-10-19)

-----------------------------------------------------------------

Tip13：复制文本

使用  window.clipboardData.setData(text, text); 可以将text文本放到系统剪贴板中，实现文本的复制功能。但是，这个方法只被IE所支持。Google Chrome 和Foxfire都不支持。所以，在使用时应先判断浏览器是否支持：if (window.clipboardData) { 

window.clipboardData.setData(text, text); }

(Date：2011-9-16)

-----------------------------------------------------------------

Tip12：选择文本

对于input或者textarea的文本选择，jquery提供了一个简单的函数完成：select()，在调用它的时候，需要确保文本框可见，并且已经获得焦点。

 

$("#txtSample").focus().select(); //现货的焦点，然后选择文本

(Date：2011-9-16)

-----------------------------------------------------------------

Tip11：鼠标事件

mouseover 和 mouseout、

mouseenter 和  mouseleave；这两组事件都是鼠标移入和移出元素时触发的，他们的最大区别是：

mouseover 和 mouseout是冒泡的，如果鼠标移动到它们的子元素，同样会触发该事件，而

mouseenter 和  mouseleave是不会冒泡的。

 

这个区别很重要！

(Date：2011-9-14)

-----------------------------------------------------------------

Tip10：页面跳转

使用js直接对window.location.href 赋一个URL字符串值即可实现跳转。

window.location.href = a.html;

(Date：2011-6-18)

-----------------------------------------------------------------

Tip9：jQuery对象的扩展

$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。例如：
$.extend(settings, options);
合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在 setting中。
var settings = $.extend({}, defaults, options);
合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。可以有多个参数（合并多项并返回）

(Date：2011-6-18)

-----------------------------------------------------------------

Tip8：jQuery删除数组中的项

如Tip7中所说，使用$.grep()方法删除数组中的元素。

var array = [a, b, c]; 
$.grap(array, function(value, index){return value==b;}, true);

(Date：2011-6-18)

-----------------------------------------------------------------

Tip7：jQuery数组的处理

$.each(obj, fn);

对obj进行遍历，obj为要遍历的数组或对象；fn为处理函数，可选的参数为索引和内容，例如var fn = function(index, content){}；如果需要结束遍历，请返回false，其它的返回值将会被忽略。

该方法可以用来处理JSON数据对象。

$.inArray(obj, array);

判断数组array中是否包含obj对象，如果存在，返回对应的下标，如果不存在，返回-1；

$.map(array, fn);

将一个数组中的元素转换到另一个数组中。array为需要转换的数组，fn为处理函数；这个方法的返回值是一个经过处理后的新数组。

$.merge(array1, array2);

合并两个数组；将数组array2中的内容复制到array1中，并将结果返回。merge方法不会去除重复，需要使用 $.unique()去除重复。

$.unique(array);

去除数组array中的重复项。

$.grep(array, fn, [invert]);

过滤数组中的元素；该方法对数组array中的每一个对象都调用fn方法；

invert 可选参数；如果 "invert" 为 false 或未设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。

该方法常用来删除数组中的元素

(Date：2011-6-18)

-----------------------------------------------------------------

Tip6：去除string开头和结尾的空格

js中没有提供trim函数供我们去掉字符串两段的空字符，jQuery中扩展了这一功能：

$.trim(str)：删除字符串两端的空白字符。
如：$.trim(" hello, how are you? "); //返回"hello,how are you? "

(Date：2011-6-18)

-----------------------------------------------------------------

Tip5：添加事件和移除事件

为一个jQuery对象添加事件是很方便的事情：

$(#btn).click(fn);

$(#btn).bind(click, fn);

jQuery提供了为一个对象的事件提供多个处理函数的机制，我们添加了一个click事件处理方法后，还可以继续添加，而不会覆盖先前的处理方法。

当调用unbind方法时移除绑定的事件订阅：

$(#btn).unbind(); //将会移除所有的事件订阅

$(#btn).unbind(click) //将会移除click事件的订阅

(Date：2011-6-18)

-----------------------------------------------------------------

Tip4：扩展需要的功能

jQuery提供了extend方法让我们来扩展自己需要的功能。例如：

$.extend({
sum: function(num1, num2){return num1+num2; },
}); //为jquery扩展了sum方法

使用扩展的方法（通过“$.方法名”调用）：
alert($.sum(10, 20));

(Date：2011-6-18)

-----------------------------------------------------------------

Tip3：获取jQuery对象集合中的一项

对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个 div 元素的内容。有如下两种方法：
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性

(Date：2011-6-18)

-----------------------------------------------------------------

Tip2：jQuery对象和Dom的转换

Dom对象可以通过$(dom)转换为jQuery对象；例如：

$(document.getElementById(#myDiv))

jQuery对象本身是一个索引，可以通过下标得到Dom对象；也可以使用方法get()获取Dom对象；例如：

$("div")[0]; //获取第一个Dom对象

$("div").get(0); //同样获取第一个Dom对象

(Date：2011-6-18)

-----------------------------------------------------------------

Tip1：在独立的js文件中智能感知

在js文件的开头添加：/// reference path="jquery-1.3.2-vsdoc2.js" /

(Date：2011-6-16)

-----------------------------------------------------------------

参考目录：

JQuery从零开始系列教程：

从零开始学习jQuery (一) 开天辟地入门篇

从零开始学习jQuery (二) 万能的选择器

从零开始学习jQuery (三) 管理jQuery包装集

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

从零开始学习jQuery (五) 事件与事件对象

从零开始学习jQuery (六) jQuery中的Ajax

从零开始学习jQuery (七) jQuery动画-让页面动起来!

从零开始学习jQuery (八) 插播:jQuery实施方案

从零开始学习jQuery (九) jQuery工具函数

从零开始学习jQuery (十) jQueryUI常用功能实战

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

JQuery小技巧：

http://blog.csdn.net/gudanyehai/archive/2010/04/29/5541187.aspx

来源：http://youring2.cnblogs.com/ 声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。 转载：http://www.cnblogs.com/youring2/archive/2011/06/16/JavaScriptTips.html
程序猿福利：JavaScript 开源库集合网站 JSDB.io 收集分类了数百个最好的JavaScript库 JSDB.io是一个JavaScript库的集合网站，收集分类了数百个最好的JavaScript库，将Github中大部分JavaScript库都整理到了一个网站中，便于Web开发者查找使用，同时用户也可以主动提交未被收录的JS库。
如何在js或者jquery中操作EL表达式的一个List集合 ------------吾亦无他,唯手熟尔，谦卑若愚，好学若饥------------- 先说明此篇博客看明白了可以干嘛： 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型或者内存地址 首先说明，从el表达式拿到的复杂类型，包括内存地址，js...