新手常遇到的一些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 相关文章推荐
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
vue-router 起步步骤详解
Mar 26 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针对数字的加密解密类
2014/03/20 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python中一行和多行import模块问题
2018/04/01 Python
python处理大日志文件
2019/07/23 Python
python文件操作的简单方法总结
2019/11/07 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
最新党员的自我评价分享
2013/11/04 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
政工例会汇报材料
2014/08/26 职场文书
提档介绍信范文
2015/10/22 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS