新手常遇到的一些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 相关文章推荐
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 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动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
php 猴子摘桃的算法
2017/06/20 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
js登录弹出层特效
2014/03/07 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
python绘制中国大陆人口热力图
2018/11/07 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
C语言50道问题
2014/10/23 面试题
小区门卫管理制度
2014/01/29 职场文书
食品业务员岗位职责
2014/03/18 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
nginx lua 操作 mysql
2022/05/15 Servers