JQuery tips and tricks (8)

1. Open a link in a new window
The target = "_ blank" attribute is not supported in XHTML 1.0 Strict. JQuery can solve this problem well and enable the webpage to be opened in a new window:
Copy codeThe Code is as follows:
$ ('A [@ rel $ = 'external'] '). click (function (){
This.tar get = "_ blank ";
});

/*
Usage:
<A href = "http://www.mangguo.org/" rel = "external"> mangguo.org </a>
*/

2. Obtain the total number of matching elements
The following code returns the number of matching elements:

$ ('Element'). size ();

3. Pre-load images
When processing image loading using Javascript, you can use the image for pre-loading:
Copy codeThe Code is as follows:
JQuery. preloadImages = function ()
{
For (var I = 0; I "). attr (" src ", arguments [I]);
}
};

// Usage
$. PreloadImages ("image1.gif", "/path/to/image2.png", "some/image3.jpg ");

4. Check the browser
Loading different CSS based on different browsers can prevent style sheet rendering differences caused by browser differences. JQuery can be easily implemented:
Copy codeThe Code is as follows:
// A. Target Safari
If ($. browser. safari) $ ("# menu li a" ).css ("padding", "1em 1.2em ");

// B. Target anything above IE6
If ($. browser. msie & $. browser. version> 6) $ ("# menu li a" ).css ("padding", "1em 1.8em ");

// C. Target IE6 and below
If ($. browser. msie & $. browser. version <= 6) $ ("# menu li a" ).css ("padding", "1em 1.8em ");

// D. Target Firefox 2 and above
If ($. browser. mozilla & $. browser. version> = "1.8") $ ("# menu li a" ).css ("padding", "1em 1.8em ");

5. String replacement
JQuery can be used to replace a specific string in the text content:
Copy codeThe Code is as follows:
Var el = $ ('# id ');
El.html(el.html (). replace (/word/ig ,""));

6. Equal column height
It is not easy to use CSS to achieve equal heights of two columns. JQuery can help you solve the problem:
Copy codeThe Code is as follows:
Function compute height (group ){
Tallest = 0;
Group. each (function (){
ThisHeight = $ (this). height ();
If (thisHeight> tallest ){
Tallest = thisHeight;
}
});
Group. height (tallest );
}

/*
Usage:
$ (Document). ready (function (){
Raise height ($ (". recent-article "));
Raise height ($ (". footer-col "));
});
*/

7. Reset the font size
Resetting the font size is a very common feature:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Reset Font Size
Var originalFontSize = ('html').css ('font-size ');
$ (". ResetFont"). click (function (){
(('Html').css ('font-size', originalFontSize );
});
// Increase Font Size
$ (". IncreaseFont"). click (function (){
Var currentFontSize = ('html').css ('font-size ');
Var currentFontSizeNum = parseFloat (currentFontSize, 10 );
Var newFontSize = currentFontSizeNum * 1.2;
(('Html').css ('font-size', newFontSize );
Return false;
});
// Decrease Font Size
$ (". DecreaseFont"). click (function (){
Var currentFontSize = ('html').css ('font-size ');
Var currentFontSizeNum = parseFloat (currentFontSize, 10 );
Var newFontSize = currentFontSizeNum * 0.8;
(('Html').css ('font-size', newFontSize );
Return false;
});
});

8. Disable right-click menu
There are many JavaScript code segments that can disable the right-click menu, but JQuery makes the operation easier:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ (Document). bind ("contextmenu", function (e ){
Return false;
});
});