JQuery tips and tricks (8)_jquery

1. Open the link in a new window
The XHTML 1.0 Strict version does not support the target="_blank" attribute, but using JQuery can solve this problem well and open the web page in a new window:

Copy code The code is as follows:

$('a[@rel$='external']').click (function(){
this.target = "_blank";
});

/*
Usage:
mangguo.org
*/

2. Get the total number of matching elements
below The code will return the number of matching elements:

$('element').size();

3. Preloading images
When using Javascript to process images When loading, you can use images to achieve preloading:

Copy code The 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 . Detect browsers
Loading different CSS according to different browsers can prevent style sheet rendering differences caused by browser differences. This can be easily achieved using JQuery:

Copy code The 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
Use JQuery to replace specific strings in text content:

Copy code The code is as follows:

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

Copy code
The code is 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 commonly used function:

Copy code

The 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 context menu

There are many JavaScript snippets to disable context menu, but JQuery makes it easier:

Copy code
The code is as follows:

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});