jquery常用技巧

Tip15：Jquery触发回车事件  
        $(function () {  
            $('#target').bind('keyup', function (event) {  
                if (event.keyCode == 13) {  
                    alert("Hello~");  
                }  
            });  
        });   
-----------------------------------------------------------------  
 Tip14：获得select 的值  
　　jquery可以像获取textbox值一样获取select的值：$('select').val();  
-----------------------------------------------------------------  
Tip13：复制文本  
　　使用  window.clipboardData.setData('text', text); 可以将text文本放到系统剪贴板中，实现文本的复制功能。但是，这个方法只被IE所支持。Google Chrome 和Foxfire都不支持。所以，在使用时应先判断浏览器是否支持：if (window.clipboardData) {    window.clipboardData.setData('text', text); }  
-----------------------------------------------------------------  
Tip12：选择文本  
　　对于input或者textarea的文本选择，jquery提供了一个简单的函数完成：select()，在调用它的时候，需要确保文本框可见，并且已经获得焦点。       　　$("#txtSample").focus().select();　　//现货的焦点，然后选择文本  
-----------------------------------------------------------------  
Tip11：鼠标事件  
　　mouseover 和 mouseout、   mouseenter 和  mouseleave；这两组事件都是鼠标移入和移出元素时触发的，他们的最大区别是：   mouseover 和 mouseout是冒泡的，如果鼠标移动到它们的子元素，同样会触发该事件，而   mouseenter 和  mouseleave是不会冒泡的。       　　这个区别很重要！  
-----------------------------------------------------------------  
Tip10：页面跳转  
使用js直接对window.location.href 赋一个URL字符串值即可实现跳转。  
window.location.href = 'a.html';  
-----------------------------------------------------------------  
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内容。可以有多个参数（合并多项并返回）  
-----------------------------------------------------------------  
Tip8：jQuery删除数组中的项  
如Tip7中所说，使用$.grep()方法删除数组中的元素。  
var array = ['a', 'b', 'c'];   
$.grap(array, function(value, index){return value=='b';}, true);  
上面的代码将删除数组array中的元素'b'。  
-----------------------------------------------------------------  
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 的元素集。  
　　该方法常用来删除数组中的元素  
-----------------------------------------------------------------  
Tip6：去除string开头和结尾的空格  
js中没有提供trim函数供我们去掉字符串两段的空字符，jQuery中扩展了这一功能：  
$.trim(str)：删除字符串两端的空白字符。  
如：$.trim(" hello, how are you? "); //返回"hello,how are you? "  
-----------------------------------------------------------------  
Tip5：添加事件和移除事件  
为一个jQuery对象添加事件是很方便的事情：  
$('#btn').click(fn);  
$('#btn').bind('click', fn);  
jQuery提供了为一个对象的事件提供多个处理函数的机制，我们添加了一个click事件处理方法后，还可以继续添加，而不会覆盖先前的处理方法。  
当调用unbind方法时移除绑定的事件订阅：  
$('#btn').unbind();　　　　//将会移除所有的事件订阅  
$('#btn').unbind('click')　　//将会移除click事件的订阅  
-----------------------------------------------------------------  
Tip4：扩展需要的功能  
jQuery提供了extend方法让我们来扩展自己需要的功能。例如：  
$.extend({  
　　sum: function(num1, num2){return num1+num2; },  
}); //为jquery扩展了sum方法  
  
使用扩展的方法（通过“$.方法名”调用）：  
alert($.sum(10, 20));  
-----------------------------------------------------------------  
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的方法属性  
-----------------------------------------------------------------  
Tip2：jQuery对象和Dom的转换  
Dom对象可以通过$(dom)转换为jQuery对象；例如：  
　　$(document.getElementById('#myDiv'))  
jQuery对象本身是一个索引，可以通过下标得到Dom对象；也可以使用方法get()获取Dom对象；例如：  
　　$("div")[0];　　　　//获取第一个Dom对象  
　　$("div").get(0);　　//同样获取第一个Dom对象  
-----------------------------------------------------------------  
Tip1：在独立的js文件中智能感知  
在js文件的开头添加：/// <reference path="jquery-1.3.2-vsdoc2.js" />  
  
  
1) 检查IE是否是版本6   
    
   
if ( (jQuery.browser.msie) && (parseInt(jQuery.browser.version) < 7) ) {    
    $('body').prepend('<div class="warning">You are using an old version of Internet Explorer which is not supported.  Please upgrade your browser in order to view this website.</div>');    
}    
  
  
2) 打开一个打印的窗口   
   
   
[url=#]Print this page[/url]    
$('a.print').click(function(){    
    window.print();    
    return false;    
});    
  
  
3 禁止表单使用回车键   
    
   
$("#form").keypress(function(e) {    
  if (e.which == 13) {    
    return false;    
  }    
});    
  
  
4 全选和反选checkbox   
   
   
 <div class="options">    
    [list]    
        [*][url=#]Select All[/url]    
    
        [*][url=#]Reset All[/url]    
    
    [/list]    
    
    <input type="checkbox" id="option1" /><label for="option1">Option 1</label>    
    <input type="checkbox" id="option2" /><label for="option2">Option 2</label>    
    <input type="checkbox" id="option3" /><label for="option3">Option 3</label>    
    <input type="checkbox" id="option4" /><label for="option4">Option 4</label>    
</div>    
$('.select-all').live('click', function(){    
    $(this).closest('.options').find('input[type=checkbox]').attr('checked', true);    
    return false;    
});    
    
$('.reset-all').live('click', function(){    
    $(this).closest('.options').find('input[type=checkbox]').attr('checked', false);    
    return false;    
});    
  
  
5 平均分各个列   
  有的时候,需要在表格中让各个列等分,可以这样   
   
var max_height = 0;    
$("div.col").each(function(){    
    if ($(this).height() > max_height) { max_height = $(this).height(); }    
});    
$("div.col").height(max_height);    
  
  
6 将所有的连接用新建窗口打开   
    
   
$('a[@rel$='external']').click(function(){    
     this.target = "_blank";    
});    
    
/*  
   Usage:  
   [url=http://www.catswhocode.com]catswhocode.com[/url]  
*/