新手常遇到的一些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 数组的for循环到底应该怎么写?
May 31 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
详细分析vue响应式原理
Jun 22 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
使用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中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
django 实现电子支付功能的示例代码
2018/07/25 Python
python实现京东秒杀功能
2018/07/30 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
什么是Rollback Segment
2013/04/22 面试题
幼儿园教师国培感言
2014/02/02 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
趣味运动会广播稿
2015/08/19 职场文书
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python