澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

Jquery常用技巧和方法收集,介绍及异同点分析

方法语法:map()

jQuery函数map()和each()介绍及异同点分析,jquerymap

方法语法:map()

map(callback)
为包装集中的每一个元素调用回调函数,并将返回值收集到jQuery对象的实例中。
参数
callback (函数)回调函数,为包装集中的每个元素调用该函数。
比如,下面的代码将页面上所有div元素的id值收集到一个javascript数组中:

复制代码 代码如下:

var iDs = $("div").map(function(){
    return (this.id==undefined) ? null :this.id;
}).get();

再看如下的表单中包含的一组 checkbox 框:

复制代码 代码如下:

<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="text" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>

我们可以得到一个用逗号分隔的复选框 ID:

复制代码 代码如下:

$(':checkbox').map(function() {
return this.id;
}).get().join();

此调用的结果是字符串, "two,four,six".

在回调函数中,this指向每次迭代中的当前DOM元素。

方法语法:each()

each(iterator)
遍历匹配集里所有的元素,为每一个元素调用传入的迭代函数
iterator (函数)回调函数,为匹配集中的每个元素调用
each()方法也可以用来遍历javascript数组对象甚至单个对象,举个栗子:

复制代码 代码如下:

$([a,b,c,d]).each(function(){
    alert(this);
})

这个语句会为传入$()中数组的每个元素调用迭代函数,函数中的this指向单独的数组项。

每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。更重要的是,回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。

假设页面上有这样一个简单的无序列表。

复制代码 代码如下:

<ul>
<li>foo</li>
<li>bar</li>
</ul>

你可以选中并迭代这些列表:

复制代码 代码如下:

$( "li" ).each(function( index ) {
console.log( index ": "" $(this).text() );
});

列表中每一项会显示在下面的消息中:

0: foo
1: bar
两者的区别

map()方法主要用来遍历操作数组和对象,each()主要用于遍历jquery对象。

each()返回的是原来的数组,并不会新创建一个数组。
map()方法会返回一个新的数组。如果在没有必要的情况下使用map,则有可能造成内存浪费。

方法语法:map() map(callback) 为包装集中的每一个元素调用回调函数,并将返回值收集到jQue...

[javascript] 
Tip15:Jquery触发回车事件 
        $(function () { 
            $('#target').bind('keyup', function (event) { 
                if (event.keyCode == 13) { 
                    alert("Hello~"); 
                } 
            }); 
        });   www.2cto.com
----------------------------------------------------------------- 
 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=] 
*/   

map(callback)
为包装集中的每一个元素调用回调函数,并将返回值收集到jQuery对象的实例中。
参数
callback (函数)回调函数,为包装集中的每个元素调用该函数。
比如,下面的代码将页面上所有div元素的id值收集到一个javascript数组中:

] Tip15:Jquery触发回车事件 $(function () { $(#target).bind(keyup, function (event) { if (event.keyCode == 13) { alert(Hello~); } }); }); www.2cto.com ------------...

复制代码 代码如下:

var iDs = $("div").map(function(){
    return (this.id==undefined) ? null :this.id;
}).get();

再看如下的表单中包含的一组 checkbox 框:

复制代码 代码如下:

<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="text" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>

我们可以得到一个用逗号分隔的复选框 ID:

复制代码 代码如下:

$(':checkbox').map(function() {
return this.id;
}).get().join();

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:Jquery常用技巧和方法收集,介绍及异同点分析