标签为 "jquery" 的文章

公司一直使用jQuery框架，一些小的项目还是觉得jQuery框架太过于强大了，于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式，不得不说说js的类继承机制，javascript不同于PHP可以轻松的实现类继承，不过javascript的类继承方法还是有的，常见的有构建函数、原型扩展、综合……，也有一些专门写类的函数，例如jQuery的作者有个类继承函数。关于类继承写法可以简单看看这篇文章。

我自己写的框架也不知道叫什么名字，刚开始写的时候随手写了个W（姓拼音，之前写过jQuery弹出框插件wBox），现在写这篇文章重新整理了一下思想，换了YQ（名字拼音，你懂的~）。

核心代码

框架设计的时候尽量做到了支持链式写法，也就是返回this，可以$(selector).handler1().handler2()……无限写下去，只要不是有返回值的就可以继续。包括了event，dom，css，还有fadeIn，fadeOut动画（因为再重构爱墙[html5+css3]版，所有顺手加上了这个功能）。如果配合sizzle选择器就更牛了！

下面说说框架的核心代码，等完善了之后跟新版html5爱墙一起放出，主要的代码如下：
继续阅读全文……

好久没正儿八经的写写js代码了，再不写就生疏了，昨天无意中发现cityhouse的首页幻灯片有问题，于是今天就写了三个幻灯片实例，如果还不会用jquery写幻灯片的可以参考我之前的文章：《CSS+jQuery实现滑动幻灯片实例详解》以及两个jQuery幻灯片实例。

今天的三个jQuery幻灯片其实还是两个，只不过第一种滚动的幻灯片有两种形式：分别是上下滚动和左右滚动。兼容IE6+，FF，chrome等主流浏览器。
效果和淘宝首页的幻灯片效果相同，自动播放时是一直往一个方向前进。
布局方面还算比较简洁，大家可以根据自己的需要添加内容，另外这次的幻灯片加上了文字，其实不光图片可以slider，文字也可以slider一会的。另外加了一点CSS3，就是控制按钮圆角化了（FF3.6+和chrome下有效果）。

截图

三种常见jQuery幻灯片（jQuery slider）实例

教程

继续阅读全文……

今天上网遇到有个网友在论坛问input的checkbox全选和反选的问题，顺手总结了一下，然后写了个简单的jQuery checkbox全选反选插件，希望对大家有用。
如果是简单的实现checkbox的全选与反选可以使用下面的函数：

 function checkall(obj,cName)
 {
     var checkboxs = document.getElementsByName(cName);
     for(var i=checkboxs.length;i--;){
             checkboxs[i].checked = obj.checked;
     }
 }
//使用方法:给全选的按钮加onclick事件：onclick="checkall(this,'all[]');"

继续阅读全文……

jQuery除了选择器之外，还封装了很多事件的处理，比如鼠标事件，所谓的鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键而触发的事件，jQuery中封装了几乎所有的鼠标事件，包括点击，双击，移出，移入等鼠标事件，下面断桥残雪简单的介绍下jQuery的鼠标事件

jQuery的click事件

经典鼠标click的实例：

$("sel").click(function(){
    alert('哈哈 !');
});

jQuery的dbclick事件

一般dbclick事件的同时也会触发两次click事件。。以前我写过一篇博客简单的介绍了下jQuery的鼠标双击事件

$('p').dbclick(function(){
alert('鼠标双击!');
});
$('p').click(function(){
alert('点击了一下!');
});//大家看看结果是怎么样的？

继续阅读全文……

在jQuery事件绑定中，dbclick可以触发两次click事件。例如一个DOM元素div，既绑定了 click 事件，又绑定了 dblclick 事件，这两个事件分别要做独立的事情。事件处理上没有冲突，都可以各自完成各自的操作。双击的时候虽然是执行了 dblclick 事件，但是在这之前，也执行了click 事件，那么，如何来禁止或者说屏蔽这次多余的 click 事件呢？本文将提供给您一个比较好的解决办法。

产生原理分析

　　首先，来了解一下点击事件发生的先后顺序：

单击：mousedown, mouseup, click
双击：mousedown, mouseup, click, mousedown, mouseup, click, dblclick
　　由此看来，dblclick 事件发生之前，实际上发生了两次 click 事件。其中，第一次的 click 是会被屏蔽掉，但是第二次则不会，所以就出现在双击的时候，也触发 click 事件。
继续阅读全文……

再给普加地图添加搜索提示的时候，我使用了jQuery的offset方法，因为习惯了，结果出现了不对齐的bug，说明offset的方法获取的top和left值是错误的。后来想起了jQuery中offset和position的两个方法有所不同，就查了一下google，原来两者是在父节点的相对绝对定位相关的。于是整理了今天的文章。

我们首先来看看这两个方法的定义。

jQuery的offset()方法

获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

jQuery的position()方法

获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
继续阅读全文……

最近很多使用我的jQuery弹出框插件wBox的人问我，关于wBox的关闭问题，例如一个页面中使用wBox iframe进来一个页面，而这个页面是进行用户登录，登录成功就关闭wBox，其实实现回调关闭wBox的方法很简单，就是使用iframe的DOM操作即可，例如我们的代码这样写：

//wbox赋值出来，然后使用wbox对象的close的方法关闭
var wbox=$("#iframe").wBox({
   	requestType: "iframe",
	target:"b.html"
   });

那么我们在页面b.html中进行了用户登录验证，我们验证成功，要关闭wBox，就可以在b.html中使用parent.wbox.close()来进行关闭，就像下面的代码，只要我们验证完毕运行closewBox就可以关闭了iframe：

function closewBox(){
    parent.wbox.close()
}

关于iframe子页面与父页面之间的DOM操作可以参考下面的文章：《使用JavaScript在IE和Firefox下进行iframe的DOM操作》

罪恶的IE6不支持max-height属性，不过我们可以通过jQuery来解决IE6不支持max-height，jQuery的代码如下：

$(".entry").each(function(){
    if($(this)[0].scrollHeight>500)
     $(this).css({"height":"500px"});
});

原理: 在IE6中可以通过设定height来达到max-height的效果. 循环所有要加max-height属性的DOM元素,判断他的scrollHeight大于你要设置的最大高度 如果超过了就通过设置height为最大高度，我这里使用的是[0]，获取的是的DOM对象，而不是jQuery对象，详细说明见：《jQuery选择器使用详解》

上面的代码还没有加入IE6的判断,完整代码如下:

if($.browser.msie&&($.browser.version === "6.0")){
$(".entry").each(function(){
if($(this)[0].scrollHeight>500)
$(this).css({"height":"500px","overflow":"hidden"});
});}

当然你也可以通过css表达式来实现IE6支持max-height属性

.entry{
//我烧验证woshao_985140e4b71711df9e5e000c295b2b8d
height: expression( this.scrollHeight > 500 ? "500px" : "auto" ); /* sets max-height for IE */
}

jQuery的ready方法的是开发中经常用到的，作用相当于我们的body onload，是当页面DOM准备就绪的时候才运行的代码，最常用的就是在DOM渲染加载之前，先给document绑定ready事件，然后当页面DOM都准备好之后才运行这个事件。
关于jQuery的ready有以下几种用法

最常用也是最标准的ready方法

$(document).ready(){
});

简写的jQuery ready()

$(function(){
});

这是因为jQuery的选择器第一个参数假如为空，那么默认的是document
继续阅读全文……