JQuery Tips and Tricks finishing (8) _jquery

1. New window open link
The XHTML 1.0 Strict version does not support target= "_blank" attributes, and JQuery solves the problem by implementing a new window to open a Web page:

Copy Code code as follows:

$ (' a[@rel $= ' External ']. Click (function () {
This.target = "_blank";
});

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

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

$ (' element '). Size ();

3. Pre-loading image
When you use Javascript to process image loading, you can use the image to implement preload:

Copy Code code 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. Detection browser
Depending on how different browsers load different CSS to prevent style sheet rendering differences due to browser differences, JQuery can be easily implemented:

Copy Code code 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
You can use JQuery to replace a specific string in the text content:

Copy Code code as follows:

var el = $ (' #id ');
El.html (el.html (). Replace (/word/ig, ""));

6. Column height equal
It's not easy to achieve two columns of height equality with CSS, JQuery can help you solve:

Copy Code code as follows:

function Equalheight (group) {
tallest = 0;
Group.each (function () {
Thisheight = $ (this). Height ();
if (Thisheight > tallest) {
tallest = Thisheight;
}
});
Group.height (tallest);
}

/*
Usage:
$ (document). Ready (function () {
Equalheight ($ (". Recent-article"));
Equalheight ($ (". Footer-col"));
});
*/

7. Font size Reset
Font size reset is a very common feature:

Copy Code code 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 the right button menu
There are many JavaScript snippets to disable the right-click menu, but JQuery makes the operation easier:

Copy Code code as follows:

$ (document). Ready (function () {
$ (document). Bind ("ContextMenu", function (e) {
return false;
});
});