新手常遇到的一些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中prepend()方法使用详解
Aug 11 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
python获取元素在数组中索引号的方法
2015/07/15 Python
python中zip()方法应用实例分析
2016/04/16 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Python实现常见的回文字符串算法
2018/11/14 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
同学会主持词
2014/03/18 职场文书
货款欠条范本
2015/07/03 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
自书遗嘱范文
2015/08/07 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
python pygame入门教程
2021/06/01 Python