新手常遇到的一些jquery问题整理


Posted in Javascript onAugust 16, 2010

ClassYuan的blog.http://www.classyuan.com/.下面列举一些:
1.跟HTML元素加载事件的时候,会在加载的时候同时执行该事件。
错误代码:

$("#btnLoad").bind("click",GetProduct());

正确代码
$("#btnLoad").bind("click", function() { GetProduct() });

我在这段代码,忽略了Bind这个方法.Api的解释是bind(type,[data],fn)
我错误的讲fn当做一个简单的function..导致这段代码会在加载的时候执行一次这个fn..
这是一个书写格式的疏忽.希望知道原因的大神可以指点。
2变量作用域的问题.(貌似这个不是jquery的问题.而是js跟.net的区别..)
function text() { 
2 for (var i = 0; i < 3; i++) { 
3 $("<a>删除</a>").attr({ id: "hr_" + i, href: "javascript:;" }).addClass("btnCss").bind("click", function() { tes(i) }).appendTo(".div_list"); 
4 } 
5 } 
6 function tes(id) { 
7 alert(id); 
8 }

这个函数.我想让他alert出相应的id..结果..答案很同意..3个<a>标签的函数..弹出来都是3..
看了一下..明白了
变量作用域的问题,传个tes函数的参数是循环结束后i的值,所以全部是3。
这一点似乎和.net不一样。
最后接解决方案- -..直接吧$(this)传递进去了
3.事件执行顺序的问题
<a target="_blank" title="Iphone" > 
2 <img id="proImg7_2" src="" alt="Iphone" style="width:70px; height:60px; border:none;" /> 
3 </a>

给这个图片绑定了onclick事件,事件的内容是给<img>标签的parent增加一个href属性.
但是事件执行完毕之后,将会直接跳转到a标签的链接。经过分析.
应为click是在href之前执行的,也就是当点击图片的时候A标签已经有了href,然后同时又触发了A标签.
解决方案..去掉<img>外层的a标签..然后修改事件
idwrap('<a href="http://www.baidu.com"></a>');

以上是我这个新手第一次使用jquery所遇到的问题..留在这里.当做成长的历程..各位大神老鸟..别喷吖..

第一个问题
$('#btnLoad').bind('click', GetProduct);
记住,绑定事件是绑一个函数上去,而GetProduct(),带了括号以后,得到的是这个函数的返回值。而你的GetProduct的返回值明显不是个函数
$("#btnLoad").bind("click",GetProduct());
改为:
$("#btnLoad").bind("click",GetProduct);
试试。
GetProduct() 是执行一个函数,然后返回值,但是返回的值并非 fn 类型。

第二个问题
其实.NET里也有,这是闭包的问题,在闭包中得到的是i变量的地址,而i不断在变,因此访问这个地址后的获得的值也一直在变,所以所有的tes都用了i这个变量最后的值,就是3
这个问题用如下方法解决(我简化下代码):
for (var i = 0; i < 3; i++) {
(function(i) {
$('<a>删除</a>').appendTo('.div_list').bind('click', function() { tes(i); });
})(i);
}
如果你无法理解这么写的原理,没关系,先记住这个形式,以后遇上类似的问题就按这个思路去写,也就是外面套一层(function() { xxx })();
说到原画,其实很简单,通过函数的时候,i作为基本类型变量是按值传递的,也就是说会把当前的i的值复制一份值到这个函数中,因此每一次调用这个匿名函数的时候,i都是相互独立的,不会受外层for的影响

第三个问题
当a没有给href属性时,href则默认为当前页的址,所以你点击后就会跳转。所以网上流行的处理方式有以一下几种
1.<a href="###">dfa</a>
2.<a href="javascript:void();">dfa</a>
3.<a href="javascript:;">dfa</a>

Javascript 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
常用jQuery代码分享
Jul 14 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 #Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 #Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 #Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 #Javascript
jquery实用代码片段集合
Aug 12 #Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 #Javascript
javascript最常用与实用的创建类的代码
Aug 12 #Javascript
You might like
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
javascript实现倒计时提示框
2021/03/02 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
python 字典的打印实现
2019/09/26 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
神路信息Java面试题目
2013/03/31 面试题
制药工程专业个人求职自荐信
2014/01/25 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
新员工入职感想
2015/08/07 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
python基础之类属性和实例属性
2021/10/24 Python
Java 超详细讲解hashCode方法
2022/04/07 Java/Android