frontopen主题V1.5.04.15版本已发布 推荐更新！
frontopen “讨论区” 正式上线
鸣谢主题捐赠者：感叹帝,Calon YE，孙玉龙，魂客，创想，孜夕寒
顾余笑，小菜，晨风，菠菜，*忠杰，浪子，99开发赞助，IT江湖，小熊
如果发现更新最新版出现缩略图无法显示，请先装回v1.4.03.02版本
jquery的$().each,$.each的区别
jquery的$().each,$.each的区别
围观95960次
编辑日期： 字体：
在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。
$().each,对于这个方法，在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用$().each来处理多个checkbook，例如：
$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
//一些操作代码
回调函数是可以传递参数，i就为遍历的索引。
对于遍历一个数组，用$.each()来处理，简直爽到了极点。例如：
$.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n)
alert(“索引:”+i,”对应值为：”+n.name);
参数i为遍历索引值，n为当前的遍历对象.
var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
在jQuery里有一个each方法，用起来非常的爽，不用再像原来那样写for循环，jQuery源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。
下面简单介绍一下call方法。
call这个方法很奇妙，其实官方的说明是：“调用一个对象的一个方法，以另一个对象替换当前对象。”网上更多的解释是变换上下文环境，也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[,
[,.argN]]]]])
可选项。将被用作当前对象的对象。
arg1, arg2,
可选项。将被传递方法参数序列。
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
引用网上有一个很经典的例子
function add(a,b)
alert(a+b);
function sub(a,b)
alert(a-b);
add.call(sub,3,1);
用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);
注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
具体call更深入的就不在这里提了。
下面提一下jQuery的each方法的几种常用的用法
var arr = [ “one”, “two”, “three”, “four”];
$.each(arr, function(){
alert(this);
//上面这个each输出的结果分别为：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1
本文固定链接:
转载请注明:
作者：品味人生
就是一个管理员，frontopen的管理员，嗯，介绍完毕！
如果您觉得这篇文章有用处，请支持作者！鼓励作者写出更好更多的文章！
您可能还会对这些文章感兴趣！&&&&&&&&&&&
序言：在使用jquery操作js时，经常整不明白this与$(this)。抽空仔细测试了一把，记录下来以供在忘记的时候拉出来参考参考！ $(this)生成的是什么 $()生成的是什么呢？实际上$()=jquery()，那么也就是说返回的是一个jquery的对象。
题外话：通常我们为了简便直接使用$(),实际上,该函数省略了一个参数context,即$(selector)=$(selector,document).如果指定context，可以指定context为一个dom元素集或者jquery对象。那么依照，$()返回的是jquery对象这一结论，我们可以得出$(this)得到的是一个jquery对象.我们可以使用万能的alert()方法打印出一个对象：alert($('#btn'));显示的结果： 该图红色框勾选出来的是一个object，不用考虑，该object自然是jquery的对象咯。也即是说我们用通过$('#btn')来调用jquery的方法和属性等。 & this代表什么？ this，编程的人都知道this表示上下文所处的这个对象，这个自然是不错的，可是这个对象到底是个什么对象呢？加入js里面也有getType的话返回的值会是什么呢？其实js里面不需要使用getType,因为我们有万能的alert.请看看下面的代码：
$('#btn').bind("click",function(){
alert(this);
alert($(this));
根据我们的经验（因为$()生成的是jquery的对象嘛），this自然是一个jquery的对象咯。可是我们看看返回的结果： 返回的是什么？【object HTMLInputElement】——伟大的html对象，嘿嘿。所以我们通常在直接使用this.val()或者直接通过this来调用jquery所特有的方法或属性的时候会报错误：& 为什么呢？明知故问！html对象当然“不包含属性或方法”了。那么为什么在一个jquery对象的上下文中调用this返回的是一个html对象而不是jquery对象 呢？翻遍jquery的api文档，貌似jquery中并未对this这一关键字进行过特殊“处理”，也就是说这里this是js中的，而不是jquery重新定义了的。so...当然这仅仅是我自己的想法，如果有对此更了解的朋友可以留言更正。而我们再看一下以上代码中alert($(this));的返回，自然是jquery的对象了，在此调用jquery特有的方法和属性，完全没有问题。 结论：this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性，方法 $(this),代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。
阅读(...) 评论()详谈jQuery中的this和$(this)
投稿：hebedich
字体：[ ] 类型：转载 时间：
在使用jquery操作js时，经常弄不明白this与$(this)。最近不是很忙，抽空仔细研究了一下，记录下来以供在忘记的时候拉出来参考参考！
网上有很多关于jQuery的this和$(this)的介绍，大多数只是理清了this和$(this)的指向，其实它是有应用场所的，不能一概而论在jQuery调用成员函数时，this就是指向dom对象。
$(this)指向jQuery对象是无可厚非的，但this就是指向dom对象，这个是因为jQuery做了特殊的处理。　
在创建dom的jQuery对象时，jQuery不仅仅为dom创建一个jQuery对象，而且还将dom存储在所创建对象的数组中。
elem = document.getElementById(match[2]);&
if (elem && elem.parentNode) {&
& this.length = 1;&
& this[0] =&
this.context =&
this.selector =&
&this[0] = elem这条语句就是实现对象数组。所以javascript是很有意思的语言，使用this访问时，可以访问它所指向的对象的成员函数，而其实this又是一个对象数组。其存放的是dom对象。
先看看 $("p").each() -- 循环
each: function( callback, args ) {&
&&&&&&& return jQuery.each( this, callback, args );&
&看了each函数的调用大家应该明白，jQuery.each( this, callback, args );调用的是对象数组，而对象的数组存储的是dom对象，因此在callback函数中的this自然是dom对象了
再看看$("p").hide()　--　成员函数
hide: function() {&
&&&&&&& return showHide( this );&
&function showHide( elements, show ) {var elem, display,&
&&&&&&& values = [],&
&&&&&&& index = 0,&
&&&&&&& length = elements.&
&&& for ( ; index & index++ ) {&
&&&&&&& elem = elements[ index ];&
&&&&&&& if ( !elem.style ) {&
&&&&&&&&&&&&
&&&&&&& }&
&&&&&&& values[ index ] = jQuery._data( elem, "olddisplay" );&
&&&&&&& if ( show ) {&
&&&&&&&&&&& // Reset the inline display of this element to learn if it is&
&&&&&&&&&&& // being hidden by cascaded rules or not&
&&&&&&&&&&& if ( !values[ index ] && elem.style.display === "none" ) {&
&&&&&&&&&&&&&&& elem.style.display = "";&
&&&&&&&&&&& }&
&&&&&&&&&&& // Set elements which have been overridden with display: none&
&&&&&&&&&&& // in a stylesheet to whatever the default browser style is&
&&&&&&&&&&& // for such an element&
&&&&&&&&&&& if ( elem.style.display === "" && isHidden( elem ) ) {&
&&&&&&&&&&&&&&& values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );&
&&&&&&&&&&& }&
&&&&&&& } else {&
&&&&&&&&&&& display = curCSS( elem, "display" );&
&&&&&&&&&&& if ( !values[ index ] && display !== "none" ) {&
&&&&&&&&&&&&&&& jQuery._data( elem, "olddisplay", display );&
&&&&&&&&&&& }&
&&&&&&& }&
&&& // Set the display of most of the elements in a second loop&
&&& // to avoid the constant reflow&
&&& for ( index = 0; index & index++ ) {&
&&&&&&& elem = elements[ index ];&
&&&&&&& if ( !elem.style ) {&
&&&&&&&&&&&&
&&&&&&& }&
&&&&&&& if ( !show || elem.style.display === "none" || elem.style.display === "" ) {&
&&&&&&&&&&& elem.style.display = show ? values[ index ] || "" : "none";&
&&&&&&& }&
&从上面的代码可以看出hide行数其实调用的是showHide，而传入的第一个参数this，并不是dom对象，而是jQuery对象数组，因此showHide函数通过循环此对象数组获取每一个dom对象。
最后看看$("p").bind()　--　事件
bind: function( types, data, fn ) {&
&&&&&&& return this.on( types, null, data, fn );&
on: function( types, selector, data, fn, /*INTERNAL*/ one ) {&
&&&&&&& // 此部分代码省略&
&&&&&&& return this.each( function() {&
&&&&&&&&&&& jQuery.event.add( this, types, fn, data, selector );&
&&&&&&& });&
bind函数调用的是 on函数，而on函数又是通过 each函数实现了jQuery.event.add。因此　jQuery.event.add( this中的this也就是dom对象了。所以事件中的this也就是dom对象了。
以上就是个人对于jQuery中this与$(this)的理解了，如有什么纰漏，请联系我或者给我留言
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具对于this和$(this)的个人理解
字体：[ ] 类型：转载 时间：
this指的是javascript对象而$(this)就是就jquery对象，不懂的朋友可以看看本文
代码如下: jQuery.prototype.test=function(){ this.css("color","#99");//这里的this是jquery对象,而不是dom对象 alert(this[0]);//这里的this[0]指的是dom节点对象 }
代码如下: $("body").click(function(){ $(this).test(); $(this).test().html(this.nodeName).hide(10000); })
在页面上使用click方法的时候相当于new了一个Jquery对象然后调用他的click方法，方法里面的参数是一个javascript的function函数，里面的this指的是javascript对象，this是javascript自身的 语法关键字，它指向一个javascript对象，所以可以使用所指向的目标javascript对象所拥有的方法 而jQuery.prototype.test相当于在就query对象中新建一个test的方法，所以里面的this理所应当的就是就jquery对象 通过this[0]可以把jquery对象转化成dom节点对象 因为this永远指向调用该方法（函数）的那个对象（call，apply方法除外）
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具this是Javascript语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，
function test(){
　　　　this.x = 1;
1.this就是全局对象
2.作为某个对象的方法调用，这时this就指这个上级对象
3.作为构造函数调用，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象
4.apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。
// this其实是一个Html 元素。
// $this 只是个变量名，加$是为说明其是个jquery对象。
// 而$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。
(function($){
$.fn.hilight = function(options){
debug(this);
var defaults = {
foreground: 'red',
background: 'yellow'
var opts = $.extend({}, $.fn.hilight.defaults, options);
return this.each(function() {
// this其实是一个Html 元素。
// $this 只是个变量名，加$是为说明其是个jquery对象。
// 而$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) :
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
// define our format function
$.fn.hilight.format = function(txt) {
return '&strong&' + txt + '&/strong&';
// 插件的defaults
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
function debug($obj) {
if (window.console && window.console.log){
window.console.log('hilight selection count: ' + $obj.size());
})(jQuery)
博客原文：
/blog/2010/04/using_this_keyword_in_javascript.html
阅读(...) 评论()