JQuery is a necessary javascript library for the most popular Web development today. This article collects 18 great jQuery code snippets, hoping they will be helpful to you. JQuery implements smooth internal link scrolling without complicated plug-ins. You only need to download this code to implement smooth scrolling based on internal links $ (a [href ^ #]). bind (c
JQuery is a necessary javascript library for the most popular Web development today. This article collects 18 great jQuery code snippets, hoping they will be helpful to you.
Smooth scrolling of internal links implemented by jQuery
No complicated plug-ins are required. You only need to download this code to implement smooth scrolling based on internal links.
$ ('A [href ^ = "#"] '). bind ('click. smoothscroll', function (e ){
E. preventDefault ();
Var anchor = this. hash,
$ Target = $ (target );
$ ('Html, body'). stop (). animate ({
'Rolltop ': $ target. offset (). top
}, 500, 'swing ', function (){
Window. location. hash = anchor;
});
});
Use jQuery to retrieve all nodes
Var $ element = $ ('# gbtags ');
Var $ nodes = $ element. contents ();
$ Nodes. each (function (){
If (this. nodeType ===3 & $. trim ($ (this). text ())){
$ (This). wrap ('');
}
});
Limit the number of options
$ ("# Categories option"). click (function (e ){
If ($ (this). parent (). val (). length <2 ){
$ (This). removeAttr ("selected ");
}
});
JQuery uses wildcards to delete classes
Var _ c = 'your-icon-class'
$ ('. Currency'). removeClass (function (index, css ){
Return (css. match (/\ bicon-\ S +/g) | []). join ('');
}). AddClass ('icon-'+ _ c );
Switch enable and disable
/* HTML
|
|
|
|
*/
// Plugin
(Function ($ ){
$. Fn. toggleDisabled = function (){
Return this. each (function (){
Var $ this = $ (this );
If ($ this. attr ('Disabled ') $ this. removeAttr ('Disabled ');
Else $ this. attr ('Disabled ', 'Disabled ');
});
};
}) (JQuery );
// TEST
$ (Function (){
$ ('Input: click'). click (function (){
$ ('Input: text'). toggleDisabled ();
});
});
Smooth scroll back to top
Admin).com
Back to Top
$ (Document). ready (function (){
$ ("A. topLink"). click (function (){
$ ("Html, body"). animate ({
ScrollTop: $ (this). attr ("href"). offset (). top + "px"
},{
Duration: 500,
Easing: "swing"
});
Return false;
});
});
Use jQuery and Google Analytics to track forms
Var array1 = [];
$ (Document). ready (function (){
$ ('Input'). change (function (){
Var formbox = $ (this). attr ('id ');
Array1.push (formbox );
Console. log ("you filled out box" + array1 );
});
$ ('# Submit'). click (function (){
Console. log ('tracked' + array1 );
// Alert ('this is the order of boxes you filled out: '+ array1 );
_ Gaq. push (['_ trackevent', 'form', 'completed',' "'+ array1 +'" ']);
});
});
Simple Password strength prompt
$ ('# Pass'). keyup (function (e ){
Var strongRegex = new RegExp ("^ (? =. {8 ,})(? =. * [A-Z]) (? =. * [A-z]) (? =. * [0-9]) (? =. * \ W). * $ "," g ");
Var mediumRegex = new RegExp ("^ (? =. {7 ,})(((? =. * [A-Z]) (? =. * [A-z]) | ((? =. * [A-Z]) (? =. * [0-9]) | ((? =. * [A-z]) (? =. * [0-9]). * $ "," g ");
Var enou1_gex = new RegExp ("(? =. {6,}). * "," g ");
If (false = enouw.gex. test ($ (this). val ())){
Certificate ('character passstrength'character .html ('more Characters ');
} Else if (strongRegex. test ($ (this). val ())){
$ ('# Passstrength'). className = 'OK ';
Certificate ('{passstrength'{.html ('strong! ');
} Else if (mediumRegex. test ($ (this). val ())){
$ ('# Passstrength'). className = 'alert ';
Certificate ('{passstrength'{.html ('medium! ');
} Else {
$ ('# Passstrength'). className = 'error ';
Certificate ('{passstrength'{.html ('weak! ');
}
Return true;
});
JQuery generates an Automatic ending check.
// Window load event used just in case window height is dependant upon images
$ (Window). bind ("load", function (){
Var footerHeight = 0,
FooterTop = 0,
$ Footer = $ ("# footer ");
PositionFooter ();
Function positionFooter (){
FooterHeight = $ footer. height ();
FooterTop = ($ (window). scrollTop () + $ (window). height ()-footerHeight) + "px ";
/* DEBUGGING
Console. log ("Document height:", $ (document. body). height ());
Console. log ("Window height:", $ (window). height ());
Console. log ("Window scroll:", $ (window). scrollTop ());
Console. log ("Footer height:", footerHeight );
Console. log ("Footer top:", footerTop );
*/
If ($ (document. body). height () + footerHeight) <$ (window). height ()){
Export footer.css ({
Position: "absolute"
}). Stop (). animate ({
Top: footerTop
});
} Else {
Export footer.css ({
Position: "static"
});
}
}
$ (Window)
. Scroll (positionFooter)
. Resize (positionFooter );
});
Prevent multiple forms from being submitted
$ (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;
}
});
});
Proportional scaling of images
$ (Window). bind ("load", function (){
// IMAGE RESIZE
$ ('# Product_cat_list img'). each (function (){
Var maxWidth = 120;
Var maxHeight = 120;
Var ratio = 0;
Var width = $ (this). width ();
Var height = $ (this). height ();
If (width> maxWidth ){
Ratio = maxWidth/width;
((This).css ("width", maxWidth );
Watermark (this).css ("height", height * ratio );
Height = height * ratio;
}
Var width = $ (this). width ();
Var height = $ (this). height ();
If (height> maxHeight ){
Ratio = maxHeight/height;
((This).css ("height", maxHeight );
((This).css ("width", width * ratio );
Width = width * ratio;
}
});
// $ ("# Contentpage img"). show ();
// IMAGE RESIZE
});
Fade-in and fade-out when the mouse slides
$ (Document). ready (function (){
$ (". Thumbs img"). fadeTo ("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$ (". Thumbs img"). hover (function (){
$ (This). fadeTo ("slow", 1.0); // This shocould set the opacity to 100% on hover
}, Function (){
$ (This). fadeTo ("slow", 0.6); // This shocould set the opacity back to 60% on mou
SeoUt
});
});
Allow the entire DIV to be clicked
<A href = "http://www.admin10000.com"> admin).com </a>
$ (". MyBox"). click (function (){
Window. location = $ (this). find ("a"). attr ("href ");
Return false;
});
Open the link in a new window (target = "blank ")
$ ('A [@ rel $ = 'external'] '). click (function (){
This.tar get = "_ blank ";
});
/*
Usage:
Admin).com
*/
Create High Columns
Var max_height = 0;
$ ("Div. col"). each (function (){
If ($ (this). height ()> max_height) {max_height = $ (this). height ();}
});
$ ("Div. col"). height (max_height );
Image pre-loading
(Function ($ ){
Var cache = [];
// Arguments are image paths relative to the current page.
$. PreLoadImages = function (){
Var args_len = arguments. length;
For (var I = args_len; I --;){
Var cacheImage = document. createElement ('img ');
CacheImage. src = arguments [I];
Cache. push (cacheImage );
}
}
JQuery. preLoadImages ("image1.gif", "/path/to/image2.png ");
Obtain the parameters passed in the URL
$. UrlParam = function (name ){
Var results = new RegExp ('[\\? &] '+ Name +' = ([^ & #] * using 'cmd.exe c (window. location. href );
If (! Results) {return 0 ;}
Return results [1] | 0;
}
Forbidden form enter key submission
$ ("# Form"). keypress (function (e ){
If (e. which = 13 ){
Return false;
}
});
