新手常遇到的一些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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
js 事件小结 表格区别
2007/08/13 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python删除空文件和空文件夹的方法
2015/07/14 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python语言异常处理测试过程解析
2020/01/08 Python
python集合删除多种方法详解
2020/02/10 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
小学生美德少年事迹
2014/02/02 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
小学运动会开幕词
2015/01/28 职场文书
采购内勤岗位职责
2015/04/13 职场文书
商场营业员岗位职责
2015/04/14 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python