jquery的概念问题！？

小p变砖头 2010-09-08 10:56:39
请高手帮个忙 遇到个问题 可能是概念问题 我想点击按钮放大图片
1。为什么选择器img#img选择以后animate里的this指针指向的不是img图片本身？
2。为什么不能使用选择器$('img')[0]
纠结的是$('img').each(function(){$(this).animate(...)})这样子就能正常运行
这是为什么！！！？？？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#img
{
width:300px;
height:200px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<script language="javascript" src="jquery-1.4.2.js"></script>
<title>display</title>
<script>
$(function()
{
$('div').css('display','block');
$(':button').bind('click',zoom);
}
)

function zoom()
{
//$('img#img').animate()...
$('img')[0].animate(
{width: $(this).width()*2,height: 300}
,2000);
}
</script>
</head>
<div id="no"><img src="porsche.jpg" id="img"/></div>
<div>Porsche</div>
<input type="button" value="放大" />
<body>
</body>
</html>
...全文
138 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
饭饭 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 thc1987 的回复:]
$('img')表示jQuery对象
$('img')[0] 表示DOM对象,类似于var oImg = document.getElementById("img");
[/Quote]

顶错了,更正....
饭饭 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用楼主 jenaspsp 的回复:]
请高手帮个忙 遇到个问题 可能是概念问题 我想点击按钮放大图片
1。为什么选择器img#img选择以后animate里的this指针指向的不是img图片本身？
2。为什么不能使用选择器$('img')[0]
纠结的是$('img').each(function(){$(this).animate(...)})这样子就能正常运行
这是为什么！！！？？？
<!DOCTYPE htm……
[/Quote]

顶....
猿敲月下码 2010-09-09
  • 打赏
  • 举报
 回复
$('img')表示jQuery对象
$('img')[0] 表示DOM对象,类似于var oImg = document.getElementById("img");
小p变砖头 2010-09-09
  • 打赏
  • 举报
 回复
快刀斧 再回答我个问题
jQuery.fn.newTarget = function() {
return this.each(function() {
if (this.host != window.location.host) { $(this).attr('target', '_new'); } });};

这里each前面的this为什么不是$（this）
小p变砖头 2010-09-09
  • 打赏
  • 举报
 回复
你去下一本jqeury in action 英语好的话 看原版 这书很好的 另外就是看api文档 其实jquery语法不多 关键是你怎么能用好它
xiwangzhiguang88608 2010-09-09
  • 打赏
  • 举报
 回复
我是java初学者 一直像学jquery 感觉jquery的更能很强大 请问怎样学 在那有学习jquery的资料呢
小p变砖头 2010-09-09
  • 打赏
  • 举报
 回复
行 我去看看去 结贴了 lol
猿敲月下码 2010-09-09
  • 打赏
  • 举报
 回复
或许LZ应该区分下$(this) 与 this的区别

animate({width：$(this).width(),...})
这里的this其实animate方法并没有直接调用它.以为他在$(this)里面

而且$(this) 和 this是两个不同的概念

$(this) 指jQuery对象,也就是说"this总是指向调用该方法的对象。"这句话不管用了

this指DOM对象,但是它并没有被哪个方法调用.

你有可能会说被animate调用. 其实没有.

这里有个网站,里面介绍了jQuery 中的 this
http://remysharp.com/2007/04/12/jquerys-this-demystified/

不过是英文版的. 不过这样也好,强行看点英文也是有好处的

最好把平时的API啊什么的都弄成英文的...

... 貌似又跑题了...

小p变砖头 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 thc1987 的回复:]
高招没了 仔细看下9楼的吧

另外记住:用在对象的方法中。this总是指向调用该方法的对象。
[/Quote]

这我又要纠结了 $('#img').animate({width：$(this).width(),...})
这里id选择器返回jquery对象 然后调用animate方法 为啥里面的this指向的不是调用它的方法 要是指向的话 应该等同于...animate({$('#img').width()})吧
猿敲月下码 2010-09-09
  • 打赏
  • 举报
 回复
还有jQuery对象中无法使用DOM对象的任何方法。同样DOM对象也不能使用jQuery里的方法。
$(this) 这个属于jQuery对象,单独说里面的this有啥用.个人感觉意义不大
猿敲月下码 2010-09-09
  • 打赏
  • 举报
 回复
高招没了 仔细看下9楼的吧

另外记住:用在对象的方法中。this总是指向调用该方法的对象。
小p变砖头 2010-09-09
  • 打赏
  • 举报
 回复
谢谢两位 真是受益匪浅 搞清楚了一个大问题（DOM对象和jquery对象的区别及转换） 但this似乎还有点犯迷糊 两位还有没有什么高招 再指点下 如果没有了 我就结贴给分了 不纠结了。。。
小p变砖头 2010-09-09
  • 打赏
  • 举报
 回复
var el = $('#img').animate({width:el.width()*2,height:300},2000);
里面的this指向的是animate这个对象

$('img').each(function(){
$(this).animate(
{width: $(this).width()*2,height: $(this).height()*2}
,2000);});
请问上面的代码中的this指的是什么呢？ 按照你的说法each函数里的this应该指向的是img对象 这一目了然 而animate里的this是不是就指向的animate函数本身
可是运行结果正确 说明animate中的this指向的是img对象
我的理解对吗？
猿敲月下码 2010-09-09
  • 打赏
  • 举报
 回复 
function zoom()  

{  

 var $img = $('#img');

$img.animate(  

{width: $img.width()*2,height: 300}  

,2000);  

}
猿敲月下码 2010-09-09
  • 打赏
  • 举报
 回复
还有在JavaScript中this关键字也另有所指:
关键字 this

用在对象的方法中。this总是指向调用该方法的对象。

var oCar = new Object;

oCar.color = "red";

oCar.showColor = function(){

    alert(this.color);

}

oCar.showColor();// red

这里关键字this用在对象的showColor()方法中，此时this等于oCar，下面的代码与上面的代码相同：

var oCar = new Object;

oCar.color = "red";

oCar.showColor = function(){

    alert(oCar.color);

}

oCar.showColor();// red



使用this变量的一个好处，看下面的例子:

function showColor(){

    alert(this.color);

}



var oCar1 =  new Object;

oCar1.color = "red";

oCar1.showColor = showColor;



var oCar2 =  new Object;

oCar2.color = "blue";

oCar2.showColor = showColor;



oCar1.showColor(); // red

oCar2.showColor(); // blue

注意，oCar1.showColor = showColor; 这两个showColor并不一样，前者是对象的属性，后者是全局函数


貌似离题了... 不过多了解下总是好的
小p变砖头 2010-09-09
  • 打赏
  • 举报
 回复
四楼的朋友 我试了一下你写的代码 显示还是会出问题 本来应该放大2倍 却缩小了 我怀疑是this指针计算错误 你可以把你写的代码插入到我的代码里试试看 这是为什么呀（我觉得你的想法挺合乎逻辑的呀）
hoojo 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 jenaspsp 的回复:]

谢谢 上面的朋友 我还有个问题 （'#img'）.animate({width:$(this).width*2,height:300},2000);
如上的样子 用id选择器选出来的应该是jqeury对象了吧 为什么this指向的不是id为img的对象呢？
[/Quote]
var el = $('#img').animate({width:el.width()*2,height:300},2000);

里面的this指向的是animate这个对象
猿敲月下码 2010-09-09
  • 打赏
  • 举报
 回复
LZ需要记住:
jQuery对象中无法使用DOM对象的任何方法。同样DOM对象也不能使用jQuery里的方法。

jQuery对象和DOM对象的相互转换：

jQuery转DOM：
var $cr = $("#cr");
var cr = $cr[0]; // 或 $cr.get(0);
alert(cr.checked);

DOM转jQuery：
var cr = document.getElementById("cr");
var $cr = $(cr);
alert($cr.is(":checked"))

<input type="checkbox" checked="checked" id="cr">
小p变砖头 2010-09-09
  • 打赏
  • 举报
 回复
谢谢 上面的朋友 我还有个问题 （'#img'）.animate({width:$(this).width*2,height:300},2000);
如上的样子 用id选择器选出来的应该是jqeury对象了吧 为什么this指向的不是id为img的对象呢？
hoojo 2010-09-09
  • 打赏
  • 举报
 回复 
function zoom() 

{ 

  //$('img#img').animate()... 

$('img:eq(0)').animate( //or $('img:first')/or $($('img')[0]).animate(...);

{width: $(this).width()*2,height: 300} 

,2000); 

}
JQuery快速入门教程
课程目标什么是jQuery 是一个... 适合对象： 适合希望能够快速开发Web系统后台前端界面或企业级开发前端界面 学习收益： jQuery 技术概念 jQuery选择器的使用 jQuery链式语法使用 jQuery 代码优化 设计jQuery动画
jQuery——jQuery基本概念
文章目录jQuery基本概念为什么要学习jQuery？jQuery初体验什么是jQuery?jQuery的版本jQuery的入口函数jQuery对象与DOM对象的区别（重点）DOM对象转换成jQuery对象：jQuery对象转换成DOM对象：练习：隔行变色案例 ...
jQuery概述和jQuery插件
jQuery 是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，作更多的事情。 2.jQuery插件 jQuery功能比较有限，想要复杂的特效效果，可 jQuery的优点 1.轻量级、核心...
行业专家聊：jQuery还有意义吗？
在今天的闲聊中我们邀请了一些行业专家来探讨这些问题。话题如下： 1、在2016年，jQuery的利与弊是什么 2、哪些应用最适合使用jQuery 3、如果你明天就要开发一个新的网页应用，你会用jQuery吗？ ...
jQuery概念及优点
jQuery概念及优点
Web 开发

81,094

社区成员

341,717

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章