50个必备的实用jQuery代码段

//尽可能使用标签名来作为类名的前缀，

//这样jQuery就不需要花费更多的时间来搜索

//你想要的元素。还要记住的一点是，

//针对于你的页面上的元素的操作越具体化，

//就越能降低执行和搜索的时间。

var

in_stock=$(

'#shopping_cart_itemsinput.is_in_stock'

);

<ulid=

"shopping_cart_items"

>

　　<li><inputtype=

"radio"

value=

"Item-X"

name=

"item"

class=

"is_in_stock"

/>ItemX</li>

　　<li><inputtype=

"radio"

value=

"Item-Y"

name=

"item"

class=

"3-5_days"

/>ItemY</li>

　　<li><inputtype=

"radio"

value=

"Item-Z"

name=

"item"

class=

"unknown"

/>ItemZ</li>

</ul>

//方法一

$(

'#foo'

).click(

function

(event){

　　alert(

'Userclickedon"foo."'

);

});

//方法二,支持动态传参

$(

'#foo'

).bind(

'click'

,{test1:

"abc"

,
test2:

"123"

},

function

(event){

　　alert(

'Userclickedon"foo."'

+event.data.test1+event.data.test2);

});

jQuery.preloadImages=

function

(){

for

(

var

i=0;i<arguments.length;i++){

　　　　$(

"<img/>"

).attr(

'src'

,arguments[i]);

　　}

};

//用法

$.preloadImages(

'image1.gif'

,

'/path/to/image2.png'

,

'some/image3.jpg'

);

$(

'button.someClass'

).live(

'click'

,someFunction);

//注意，在jQuery1.4.2中，delegate和undelegate选项

//被引入代替live，因为它们提供了更好的上下文支持

//例如，就table来说，以前你会用

$(

"table"

).each(

function

(){

　　$(

"td"

,

this

).live(

"hover"

,

function

(){

　　　　$(

this

).toggleClass(

"hover"

);

　　});

});

//现在用

$(

"table"

).delegate(

"td"

,

"hover"

,

function

(){

　　$(

this

).toggleClass(

"hover"

);

});

$(

'#someElement'

).find(

'option:selected'

);

//允许你减少集合中的匹配元素的过滤器，

//只剩下那些与给定的选择器匹配的部分。在这种情况下，

//查询删除了任何没（:not）有（:has）

//包含class为“selected”（.selected）的子节点。

.filter(

":not(:has(.selected))"

)

$.expr[

':'

].mycustomselector=

function

(element,index,meta,stack){

//element-一个DOM元素

//index–栈中的当前循环索引

//meta–有关选择器的元数据

//stack–要循环的所有元素的栈

//如果包含了当前元素就返回true

//如果不包含当前元素就返回false};

//定制选择器的用法：

$(

'.someClasses:test'

).doSomething();

if

($(

'#someDiv'

).length){

//万岁！！！它存在……

}

$(

"#someelement"

).live(

'click'

,

function

(e){

if

((!$.browser.msie&&e.button==0)||($.browser.msie&&e.button==1)){

alert(

"LeftMouseButtonClicked"

);

}

else

if

(e.button==2){

alert(

"RightMouseButtonClicked"

);

}

});

var

el=$(

'#id'

);

el.html(el.html().replace(/word/ig,

''

));

//这是1.3.2中我们使用setTimeout来实现的方式

setTimeout(

function

(){

$(

'.mydiv'

).hide(

'blind'

,{},500)

},5000);

//而这是在1.4中可以使用delay()这一功能来实现的方式（这很像是休眠）

$(

".mydiv"

).delay(5000).hide(

'blind'

,{},500);

var

newDiv=$(

'<div></div>'

);

newDiv.attr(

'id'

,

'myNewDiv'

).appendTo(

'body'

);

jQuery.fn.maxLength=

function

(max){

return

this

.each(

function

(){

var

type=

this

.tagName.toLowerCase();

var

inputType=

this

.type?

this

.type.toLowerCase():

null

;

if

(type==

"input"

&&inputType==

"text"

||inputType==

"password"

){

//ApplythestandardmaxLength

this

.maxLength=max;

}

else

if

(type==

"textarea"

){

this

.onkeypress=

function

(e){

var

ob=e||event;

var

keyCode=ob.keyCode;

var

hasSelection=document.selection?document.selection.createRange().text.length>0:

this

.selectionStart!=

this

.selectionEnd;

return

!(

this

.value.length>=max&&(keyCode>50||keyCode==32||keyCode==0||keyCode==13)&&!ob.ctrlKey&&!ob.altKey&&!hasSelection);

};

this

.onkeyup=

function

(){

if

(

this

.value.length>max){

this

.value=

this

.value.substring(0,max);

}

};

}

});

};

//用法

$(

'#mytextarea'

).maxLength(500);

var

cloned=$(

'#somediv'

).clone();

if

($(element).is(

':visible'

)){

//该元素是可见的

}

jQuery.fn.center=

function

(){

return

this

.each(

function

(){

　　　　$(

this

).css({

　　　　　　position:

'absolute'

,

　　　　　　top,($(window).height()-

this

.height())/2+$(window).scrollTop()+

'px'

,

　　　　　　left,($(window).width()-

this

.width())/2+$(window).scrollLeft()+

'px'

　　　　});

　　});

}

//这样来使用上面的函数：

$(element).center();

//允许链式日志记录

jQuery.log=jQuery.fn.log=

function

(msg){

if

(console){

　　　　console.log(

"%s:%o"

,msg,

this

);

　　}

return

this

;

};

//用法：

$(

'#someDiv'

).hide().log(

'divhidden'

).addClass(

'someClass'

);

//不这样做

$(

'#navli'

).click(

function

(){

　　$(

'#navli'

).removeClass(

'active'

);

　　$(

this

).addClass(

'active'

);

});

//替代做法是

$(

'#navli'

).click(

function

(){

　　$(

this

).addClass(

'active'

).siblings().removeClass(

'active'

);

});

//如果元素的值和输入的文本相匹配的话,该元素将被返回

$(

'.someClass'

).filter(

function

(){

return

$(

this

).attr(

'value'

)==$(

'input#someId'

).val();

})

$(document).ready(

function

(){

　　$(document).mousemove(

function

(e){

　　　　$(’

#XY’).html(”XAxis:”+e.pageX+”|YAxis”+e.pageY);

　　});

});

(

function

($){

$.fn.extend({

pluginOne:

function

(){

return

this

.each(

function

(){

//mycode

});

},

pluginTwo:

function

(){

return

this

.each(

function

(){

//mycode

});

}

});

})(jQuery);

//事件可以这样绑定命名空间

$(

'input'

).bind(

'blur.validation'

,

function

(e){

//...

});

//data方法也接受命名空间

$(

'input'

).data(

'validation.isValid'

,

true

);

var

dt=

new

Date();

dt.setSeconds(dt.getSeconds()+60);

document.cookie=

"cookietest=1;expires="

+dt.toGMTString();

var

cookiesEnabled=document.cookie.indexOf(

"cookietest="

)!=-1;

if

(!cookiesEnabled){

//没有启用cookie

}

var

date=

new

Date();

date.setTime(date.getTime()+(x*60*1000));

$.cookie(

'example'

,

'foo'

,{expires:date});