新手常遇到的一些jquery问题整理_jquery

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>

时间: 2024-08-04 04:26:57

新手常遇到的一些jquery问题整理_jquery的相关文章

在网站上应该用的30个jQuery插件整理_jquery

当然你现在可能不善于用,但我敢肯定你会发现他们在你未来的项目中使用!. Nivo滑块 毫无疑问,这个插件是世界上最真棒jQuery的滑块图片,并配有超过15个过渡效果. Anything Slider 任何滑块从所有最通用的滑块.您可以添加绝对的东西,从视频到简单的文字和图像,这是真棒. 幻灯片 幻灯片是,本着简约的jQuery幻灯片插件.挤满了一套有用的功能,以帮助新手和高级开发人员创造优雅和用户友好的幻灯片. jQuery的周期插件 jQuery的周期插件支持许多不同类型的过渡效果的幻灯片插

2010年最佳jQuery插件整理_jquery

在2010年,JavaScript框架继续日渐普及,这使得大量的插件被开发出来.满目琳琅,难以选择心头之好.WDL的作者从大量的优秀jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best. 2010年最佳jQuery插件(排名不分先后): Nivo Slider 一个加载设置拥有9种过度效果的超级smooth slider,它还支持如链接图像和键盘导航等内容. Quicksand 通过一个非常不错的洗牌动画实现选项内容重新排序

来自国外的14个图片放大编辑的jQuery插件整理_jquery

基于Web的在线应用已经是一个逐步成熟的趋势,Web应用的丰富多样化,都是基于JavaScript框架完成的,其中 jQuery 框架被越来越多的Web开发者青睐,它可以让你"少写,多做"轻松完成复杂效果,这里就是基于jQuery 的14个图片放大编辑插件. 1,jQuery gzoom plugin 2,Hover Zoom 3,AnythingZoomer jQuery Plugin 4,JQZoom 5,jQuery Cycle plugin 6,crop, labelOver

jQuery知识点整理_jquery

slideUp();向上滑动//改变元素的高度的属性 直到高度为0从而将元素隐藏 slideDown(); slideToggle(); fadeOut();淡出//从不透明变透明 fadeIn() 复制代码 代码如下: function(){ $("span.Italian").toggle(); $("span.Italian").toggle();} 在一个function函数中加入两个toggle函数实现语言的切换 可以给一个元素同时应用多个这种选择器 将s

jQuery Html控件基本操作(日常收集整理)_jquery

闲来无聊,收集总结一下jQuery常用操作,希望对新手有用. 基于jquery 1.3.2 <!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js&q

jQuery教程:整理的几个常见的初学者问题

    大家可能看到了,我已经将过去写的两篇jQuery的教程删掉了,因为附件不存在了等等问题,所以删除了,从今天开始我就写jQuery教程第二版了!希望大家能够支持我!本节并没有涉及到jQuery如何编写,只为大家解决几个常见问题,因为这也是面试中常常遇到的几个问题.如果你掌握了jQuery可以成为提升工资的一个资本. 初学jQuery的朋友,基本上都会问同一个问题"什么是jQuery?"等类似的问题,理解这个问题对于后面的学习会起到促进作用.以下是我整理出的大家常问的几个问题: 1

基于jQuery实现的图片切换焦点图整理_jquery

1.js实现的七屏百叶窗焦点图动态特效 可以实现可以同时显示很多找竖行百叶窗效果的缩略图,代码,鼠标悬浮在一张缩略图上时,该图片就在原位置变亮并慢慢展开,同时两边的缩略图就往两边缩小靠近,需要此种焦点图效果的朋友们可以前来下载使用. 在线演示 源码下载 2.jQuery+CSS3实现的多种图片切换方式简易焦点图 今天要来分享一款简易的jQuery+CSS3焦点图应用,这款焦点图应用的图片切换方式非常丰富,而且焦点图的切换按钮比较小,图片篇幅占据比较大,因此总体比较大气. 在线演示 源码下载 3.

JQuery选择器、过滤器大整理_jquery

经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了.所有代码均经过测试. 首先HTML代码 复制代码 代码如下: HTML Code <html> <head> <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> </head> <body> <form name=&quo

jQuery中常用动画效果函数(日常整理)_jquery

jquery中动画效果非常多,下面小编给大家分享一下jquery中的动画函数. jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueue():对被选元素移除所有排队的函数(仍未运行的). delay():对被选元素的所有排队函数(仍未运行)设置延迟. dequeue():运行被选元素的下一个排队函数. fadeln():逐渐改变被选元素的不透明度,从隐藏到可见. fadeOut():逐渐改变被元素的不透明度,从可见到隐藏. fadeTo(