由于内容比较多建议用CTRL+F搜索
偶然在网上看到这些不错的jQuery代码开发技巧。原文收集了30个,另外查找的时候发现了还有20个。加上另外十个实用的jQuery代码片段,共60个代码技巧,收集在一起分享给大家。
1. 创建一个嵌套的过滤器
1
|
.filter( ":not(:has(.selected))" ) //去掉所有不包含class为.selected的元素
|
1
2
3
4
5
|
var allItems = $( "div.item" );
var keepList = $( "div#container1 div.item" );
<div>class names:
$(formToLookAt + " input:checked" ).each( function () { keepListkeepList = keepList.filter( "." + $( this ).attr( "name" )); });
</div>
|
1
2
3
4
|
//jQuery 1.4.* includes support for the has method. This method will find
//if a an element contains a certain other element class or whatever it is
//you are looking for and do anything you want to them.
$( "input" ).has( ".email" ).addClass( "email_icon" );
|
1
2
|
//Look for the media-type you wish to switch then set the href to your new style sheet
$( 'link[media=' screen ']' ).attr( 'href' , 'Alternative.css' );
|
1
2
3
4
5
6
|
//Where possible, pre-fix your class names with a tag name
//so that jQuery doesn't have to spend more time searching
//for the element you're after. Also remember that anything
//you can do to be more specific about where the element is
//on your page will cut down on execution/search times
var in_stock = $( '#shopping_cart_items input.is_in_stock' );
|
1
2
3
4
5
6
7
8
|
<ul id= "shopping_cart_items" >
<li>
<input value= "Item-X" name= "item" class= "is_in_stock" type= "radio" > Item X</li>
<li>
<input value= "Item-Y" name= "item" class= "3-5_days" type= "radio" > Item Y</li>
<li>
<input value= "Item-Z" name= "item" class= "unknown" type= "radio" > Item Z</li>
</ul>
|
1
2
3
4
5
6
|
//Toggle class allows you to add or remove a class
//from an element depending on the presence of that
//class. Where some developers would use:
a.hasClass( 'blueButton' ) ? a.removeClass( 'blueButton' ) : a.addClass( 'blueButton' );
//toggleClass allows you to easily do this using
a.toggleClass( 'blueButton' );
|
1
|
if ($.browser.msie) { // Internet Explorer is a sadist. }
|
1
|
$( '#thatdiv' ).replaceWith( 'fnuh' );
|
1
|
if ($( '#keks' ).html()) { //Nothing found ;}
|
1
2
3
|
$( "ul > li" ).click( function () {
var index = $( this ).prevAll().length;
});
|
1
2
3
|
$( '#foo' ).bind( 'click' , function () {
alert( 'User clicked on "foo."' );
});
|
1
|
$( '#lal' ).append( 'sometext' );
|
1
|
var e = $( "" , { href: "#" , class: "a-class another-class" , title: "..." });
|
1
2
3
|
//This precision-based approached can be useful when you use
//lots of similar input elements which have different types
var elements = $( '#someid input[type=sometype][value=somevalue]' ).get();
|
1
2
|
jQuery.preloadImages = function () { for ( var i = 0; i ').attr(' src ', arguments[i]); } };
// Usage $.preloadImages(' image1.gif ', ' /path/to/image2.png ', ' some/image3.jpg');
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$( 'button.someClass' ).live( 'click' , someFunction);
//Note that in jQuery 1.4.2, the delegate and undelegate options have been
//introduced to replace live as they offer better support for context
//For example, in terms of a table where before you would use..
// .live()
$( "table" ).each( function (){
$( "td" , this ).live( "hover" , function (){
$( this ).toggleClass( "hover" );
});
});
//Now use..
$( "table" ).delegate( "td" , "hover" , function (){
$( this ).toggleClass( "hover" );
});
|
1
|
$( '#someElement' ).find( 'option:selected' );
|
1
|
$( "p.value:contains('thetextvalue')" ).hide();
|
1
2
3
4
5
6
7
8
|
jQuery.fn.autoscroll = function (selector) {
$( 'html,body' ).animate(
{scrollTop: $(selector).offset().top},
500
);
}
//Then to scroll to the class/area you wish to get to like this:
$( '.area_name' ).autoscroll();
|
1
2
3
4
|
Detect Safari ( if ( $.browser.safari)),
Detect IE6 and over ( if ($.browser.msie && $.browser.version > 6 )),
Detect IE6 and below ( if ($.browser.msie && $.browser.version <= 6 )),
Detect FireFox 2 and above ( if ($.browser.mozilla && $.browser.version >= '1.8' ))
|
1
2
|
var el = $( '#id' );
el.html(el.html().replace(/word/ig, '' ));
|
1
|
$(document).bind( 'contextmenu' , function (e){ return false ; });
|
1
2
3
4
5
6
7
8
9
10
|
$.expr[ ':' ].mycustomselector = function (element, index, meta, stack){
// element- is a DOM element
// index - the current loop index in stack
// meta - meta data about your selector
// stack - stack of all elements to loop
// Return true to include current element
// Return false to explude current element
};
// Custom Selector usage:
$( '.someClasses:test' ).doSomething();
|
1
|
if ($( '#someDiv' ).length) { //hooray!!! it exists...}
|
1
2
3
4
5
6
7
|
$( "#someelement" ).live( 'click' , function (e) {
if ( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
alert( "Left Mouse Button Clicked" );
}
else if (e.button == 2)
alert( "Right Mouse Button Clicked" );
});
|
26. 显示或者删除输入框的缺省值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//This snippet will show you how to keep a default value
//in a text input field for when a user hasn't entered in
//a value to replace it
swap_val = [];
$( ".swap" ).each( function (i){
swap_val[i] = $( this ).val();
$( this ).focusin( function (){
if ($( this ).val() == swap_val[i]) {
$( this ).val( "" );
}
}).focusout( function (){
if ($.trim($( this ).val()) == "" ) {
$( this ).val(swap_val[i]);
}
});
});
|
1
|
<INPUT class=swap value= "Enter Username here.." type=text>
|
1
2
3
4
5
6
|
//Here's how we used to do it in 1.3.2 using setTimeout
setTimeout( function () {
$('.mydiv ').hide(' blind ', {}, 500)
}, 5000);
//And here' s how you can do it with 1.4 using the delay() feature ( this is a lot like sleep)
$( ".mydiv" ).delay(5000).hide( 'blind' , {}, 500);
|
1
2
|
var newgbin1Div = $( '' );
newgbin1Div.attr( 'id' , 'gbin1.com' ).appendTo( 'body' );
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
jQuery.fn.maxLength = function (max){
this .each( function (){
var type = this .tagName.toLowerCase();
var inputType = this .type? this .type.toLowerCase() : null ;
if (type == "input" && inputType == "text" || inputType == "password" ){
//Apply the standard maxLength
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);
}
};
}
});
};
//Usage:
$( '#gbin1textarea' ).maxLength(500);
|
1
2
3
4
5
6
7
8
9
|
//Separate tests into modules.
module( "Module B" );
test( "some other gbin1.com test" , function () {
//Specify how many assertions are expected to run within a test.
expect(2);
//A comparison assertion, equivalent to JUnit's assertEquals.
equals( true , false , "failing test" );
equals( true , true , "passing test" );
});
|
1
|
var cloned = $( '#gbin1div' ).clone();
|
1
|
if ($(element).is( ':visible' ) == 'true' ) { //The element is Visible }
|
33. 元素屏幕居中
1
2
3
4
5
6
|
jQuery.fn.center = function () {
this .css( 'position' , 'absolute' );
this .css( 'top' , ( $(window).height() - this .height() ) / +$(window).scrollTop() + 'px' );
this .css( 'left' , ( $(window).width() - this .width() ) / 2+$(window).scrollLeft() + 'px' ); return this ;
}
//Use the above function as: $('#gbin1div').center();
|
1
2
3
4
|
var arrInputValues = new Array();
$( "input[name='table[]']" ).each( function (){
arrInputValues.push($( this ).val());
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
( function ($) {
$.fn.stripHtml = function () {
var regexp = /<( "[^" ]* "|'[^']*'|[^'" >])*>/gi;
this .each( function () {
$( this ).html(
$( this ).html().replace(regexp, "" )
);
});
return $( this );
}
})(jQuery);
//usage:
$( 'p' ).stripHtml();
|
1
|
$( '#searchBox' ).closest( 'div' );
|
1
2
3
4
5
6
7
8
|
// Allows chainable logging
// Usage: $('#someDiv').hide().log('div hidden').addClass('someClass');
jQuery.log = jQuery.fn.log = function (msg) {
if (console){
console.log( "%s: %o" , msg, this );
}
return this ;
};
|
1
2
3
4
5
|
jQuery( 'a.popup' ).live( 'click' , function (){
newwindow=window.open($( this ).attr( 'href' ), '' , 'height=200,width=150' );
if (window.focus) {newwindow.focus()}
return false ;
});
|
1
2
3
4
5
|
jQuery( 'a.newTab' ).live( 'click' , function (){
newwindow=window.open($( this ).href);
jQuery( this ).target = "_blank" ;
return false ;
});
|
1
2
3
4
5
6
7
8
9
10
|
// Rather than doing this
$( '#nav li' ).click( function (){
$( '#nav li' ).removeClass( 'active' );
$( this ).addClass( 'active' );
});
// Do this instead
$( '#nav li' ).click( function (){
$( this ).addClass( 'active' )
.siblings().removeClass( 'active' );
});
|
1
2
3
4
5
|
var tog = false ; // or true if they are checked on load
$( 'a' ).click( function () {
$( "input[type=checkbox]" ).attr( "checked" ,!tog);
tog = !tog;
});
|
1
2
3
4
5
|
//If the value of the element matches that of the entered text
//it will be returned
$( '.gbin1Class' ).filter( function () {
return $( this ).attr( 'value' ) == $( 'input#gbin1Id' ).val() ;
})
|
1
2
3
4
5
6
|
$(document).mousemove( function (e){
$(document).ready( function () {
$().mousemove( function (e){
$( '#XY' ).html( "Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);
});
});
|
1
2
3
|
$( "ul li" ).click( function (){
window.location=$( this ).find( "a" ).attr( "href" ); return false ;
});
|
1
2
3
4
5
6
|
<UL>
<LI><A href= "#" >GBin1 Link 1</A></LI>
<LI><A href= "#" >GBin1 Link 2</A></LI>
<LI><A href= "#" >GBin1 Link 3</A></LI>
<LI><A href= "#" >GBin1 Link 4</A></LI>
</UL>
|
1
2
3
4
5
6
7
|
function parseXml(xml) {
//find every Tutorial and print the author
$(xml).find( "Tutorial" ).each( function ()
{
$( "#output" ).append($( this ).attr( "author" ) + "" );
});
}
|
1
2
3
|
$( '#theGBin1Image' ).attr( 'src' , 'image.jpg' ).load( function () {
alert( 'This Image Has Been Loaded' );
});
|
1
2
3
4
5
6
|
//Events can be namespaced like this
$( 'input' ).bind( 'blur.validation' , function (e){
// ...
});
//The data method also accept namespaces
$( 'input' ).data( 'validation.isValid' , true );
|
1
2
3
4
5
6
7
8
|
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)
{
//cookies have not been enabled
}
|
1
2
3
|
var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie( 'example' , 'foo' , { expires: date });
|
1
2
3
4
5
6
7
8
9
10
11
|
$.fn.replaceUrl = function () {
var regexp = /((ftp|http|https): //(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi;
this .each( function () {
$( this ).html(
$( this ).html().replace(regexp, '<A href="$1">$1</A>' )
);
});
return $( this );
}
//usage
$( '#GBin1div' ).replaceUrl();
|
大家可能在表单的操作中需要防止用户意外的提交表单,那么下面这段代码肯定非常有帮助:
1
2
3
4
5
|
$( "#form" ).keypress( function (e) {
if (e.which == 13) {
return false ;
}
});
|
可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function clearForm(form) {
// iterate over all of the inputs for the form
// element that was passed in
$( ':input' , form).each( function () {
var type = this .type;
var tag = this .tagName.toLowerCase(); // normalize case
// it's ok to reset the value attr of text inputs,
// password inputs, and textareas
if (type == 'text ' || type == ' password ' || tag == ' textarea ')
this.value = "";
// checkboxes and radios need to have their checked state cleared
// but should *not* have their ' value ' changed
else if (type == ' checkbox ' || type == ' radio ')
this.checked = false;
// select elements need to have their ' selectedIndex ' property set to -1
// (this works for both single and multiple select elements)
else if (tag == ' select')
this .selectedIndex = -1;
});
};
|
下面的代码对于ajax操作非常有用,你可以有效的避免用户多次提交数据,个人也经常使用:
禁用按钮:
1
|
$( "#somebutton" ).attr( "disabled" , true );
|
启动按钮:
1
|
$( "#submit-button" ).removeAttr( "disabled" );
|
可能大家往往会使用.attr(‘disabled',false);,不过这是不正确的调用。
54: 输入内容后启用递交按钮这个代码和上面类似,都属于帮助用户控制表单递交按钮。使用这段代码后,递交按钮只有在用户输入指定内容后才可以启动。
1
2
3
|
$( '#username' ).keyup( function () {
$( '#submit' ).attr( 'disabled' , !$( '#username' ).val());
});
|
多次递交表单对于web应用来说是个比较头疼的问题,下面的代码能够很好的帮助你解决这个问题:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$(document).ready( function () {
$( 'form' ).submit( function () {
if ( typeof jQuery.data( this , "disabledOnSubmit" ) == 'undefined' ) {
jQuery.data( this , "disabledOnSubmit" , { submited: true });
$( 'input[type=submit], input[type=button]' , this ).each( function () {
$( this ).attr( "disabled" , "disabled" );
});
return true ;
}
else
{
return false ;
}
});
});
|
有时候你需要提示用户目前操作的输入框,你可以使用下面代码高亮显示标示:
1
2
3
4
5
|
$( "form :input" ).focus( function () {
$( "label[for='" + this .id + "']" ).addClass( "labelfocus" );
}).blur( function () {
$( "label" ).removeClass( "labelfocus" );
});
|
这个方法可以帮助你动态的添加表单中的元素,比如,input等:
1
2
3
4
5
|
//change event on password1 field to prompt new input
$( '#password1' ).change( function () {
//dynamically create new input and insert after password1
$( "#password1" ).append( "<input type='text' name='password2' id='password2' />" );
});
|
下面代码能够使用ajax数据自动生成选择框的内容
1
2
3
4
5
6
7
8
9
10
11
|
$( function (){
$( "select#ctlJob" ).change( function (){
$.getJSON( "/select.php" ,{id: $( this ).val(), ajax: 'true' }, function (j){
var options = '' ;
for ( var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>' ;
}
$( "select#ctlPerson" ).html(options);
})
})
})
|
代码很简单,如下:
1
|
$( '#checkBox' ).attr( 'checked' );
|
代码很简单,如下:
1
|
$( "#myform" ).submit();
|