新手常遇到的一些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 相关文章推荐
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
vue分页插件的使用方法
Dec 25 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
PHP7 windows支持
2021/03/09 PHP
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
javascript白色简洁计算器
2015/05/04 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
vue组件watch属性实例讲解
2017/11/07 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中for语句简单遍历数据的方法
2015/05/07 Python
用Python抢过年的火车票附源码
2015/12/07 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
软件工程专业推荐信
2013/10/28 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
2014教师年度工作总结
2014/11/10 职场文书
幼儿园六一主持词
2015/06/30 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫