新手常遇到的一些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的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
关于element的表单组件整理笔记
Feb 05 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应用提速面面观
2006/10/09 PHP
PHP 函数学习简单小结
2010/07/08 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
javascript 写类方式之五
2009/07/05 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
OpenCV Python实现拼图小游戏
2020/03/23 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
python time()的实例用法
2020/11/03 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
学习十八大的心得体会
2014/09/12 职场文书
教师节寄语2015
2015/03/23 职场文书
会议通知格式范文
2015/04/15 职场文书
家长会开场白和结束语
2015/05/29 职场文书
开学第一周总结
2015/07/16 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers