新手常遇到的一些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 相关文章推荐
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
解决Vue watch里调用方法的坑
Nov 07 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
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
python中Switch/Case实现的示例代码
2017/11/09 Python
django 消息框架 message使用详解
2019/07/22 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
幼儿园英语教学反思
2014/01/30 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server
SQL Server中的游标介绍
2022/05/20 SQL Server
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python