新手常遇到的一些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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
动态加载js的方法汇总
Feb 13 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
jQuery实现视频展示效果
May 30 jQuery
使用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对象在内存中的存在形式分析
2015/02/03 PHP
PHP count()函数讲解
2019/02/03 PHP
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
python遍历路径破解表单的示例
2020/11/21 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
简单的大学生自我鉴定
2014/02/18 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
应届大学生求职信
2014/07/20 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
法定代表人证明书
2014/11/28 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
2015年暑假生活总结
2015/07/13 职场文书
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android