新手常遇到的一些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结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
JavaScript引用类型Function实例详解
Aug 09 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
使用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 如何向 MySQL 发送数据
2006/10/09 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
jquery 常用操作方法
2010/01/28 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python当中的array数组对象实例详解
2019/06/12 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
Python用SSH连接到网络设备
2021/02/18 Python
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
幼儿园校车司机的岗位职责
2014/01/30 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
保管员岗位职责
2015/02/14 职场文书
贫困证明怎么写
2015/06/16 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL