新手常遇到的一些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中setTimeout的几种使用方法小结
Apr 07 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 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
isset和empty的区别
2007/01/15 PHP
实用函数8
2007/11/08 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
js实现Tab选项卡切换效果
2020/07/17 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
清洁工表扬信
2014/01/08 职场文书
满月酒主持词
2014/03/27 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
就业协议书范本
2014/04/11 职场文书
小班幼儿评语大全
2014/04/30 职场文书
小学语文教研活动总结
2014/07/01 职场文书
暑期培训班招生方案
2014/08/26 职场文书
交通事故委托书范本
2014/09/28 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
改进工作作风心得体会
2016/01/23 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL