Collection of common Jquery techniques_jquery

For example, there are disabling right clicks, hiding search text box text, opening links in new windows, detecting browsers, preloading images, etc. The details are as follows:
Prohibit right click

Copy code The code is as follows:

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

Hide search text box text

Copy code The code is as follows:

$(document ).ready(function() {
$("input.text1").val("Enter your search text here");
textFill($('input.text1'));
} );
function textFill(input){ //input focus text function
var originalvalue = input.val();
input.focus( function(){
if( $.trim(input .val()) == originalvalue ){ input.val(''); }
});
input.blur( function(){
if( $.trim(input.val() ) == '' ){ input.val(originalvalue); }
});
}

Open link in new window

Copy code The code is as follows:

$(document).ready(function() {
//Example 1: Every link will open in a new window
$('a[href^="http://"]').attr("target", "_blank");
//Example 2: Links with the rel= "external" attribute will only open in a new window
$('a[@rel$='external']').click(function(){
this.target = "_blank";
});
});
// how to use
open link

Detect browser
Note: In version jQuery 1.4, $.support replaced the $.browser variable.

Copy code The code is as follows:

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
// do something
}
// Target Safari
if( $.browser.safari ){
// do something
}
// Target Chrome
if( $.browser.chrome){
// do something
}
// Target Camino
if( $.browser.camino){
// do something
}
// Target Opera
if( $.browser. opera){
// do something
}
// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
// do something
}
// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
// do something
}
});

Preload images

Copy code The code is as follows:

$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i").attr("src", arguments[ i]);
}
};
// how to use
$.preloadImages("image1.jpg");
});

Page style switching

Copy code The code is as follows:

$(document).ready(function( ) {
$("a.Styleswitcher").click(function() {
//swicth the LINK REL attribute with the value in A REL attribute
$('link[rel=stylesheet]' ).attr('href' , $(this).attr('rel'));
});
// how to use
// place this in your header
< LINK href="default.css" type=text/css rel=stylesheet>
// the links
Default Theme
Red Theme
Blue Theme
});

The columns have the same height
If two CSS columns are used, this method can be used to make the heights of the two columns the same.

Copy code The code is as follows:

$(document).ready(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
// how to use
$(document).ready(function() {
equalHeight($(".left"));
equalHeight($(".right"));
});
});

动态控制页面字体大小

复制代码 代码如下:

$(document).ready(function() {
// Reset the font size(back to default)
var originalFontSize = $('html').css('font-size');
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase the font size(bigger font0
$(".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 the font size(smaller font)
$(".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;
});
});

返回页面顶部功能

复制代码 代码如下:

$(document).ready(function() {
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' this.hash.slice(1) ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 900);
return false;
}
}
});
// how to use
// place this where you want to scroll to

// the link
go to top
});

获得鼠标指针XY值

复制代码 代码如下:

$(document).ready(function() {
$().mousemove(function(e){
//display the x and y axis values inside the div with the id XY
$('#XY').html("X Axis : " e.pageX " | Y Axis " e.pageY);
});
// how to use

});

验证元素是否为空

复制代码 代码如下:

$(document).ready(function() {
if ($('#id').html()) {
// do something
}
});

替换元素

复制代码 代码如下:

$(document).ready(function() {
$('#id').replaceWith('

I have been replaced

);
});

jQuery延时加载功能

复制代码 代码如下:

$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});

移除单词功能

复制代码 代码如下:

$(document).ready(function() {
var el = $('#id');
el.html(el.html().replace(/word/ig, ""));
});

验证元素是否存在于jQuery对象集合中

复制代码 代码如下:

$(document).ready(function() {
if ($('#id').length) {
// do something
}
});

Make the entire DIV clickable

Copy the code The code is as follows:

$(document) .ready(function() {
$("div").click(function(){
//get the url from href attribute and launch the url
window.location=$(this). find("a").attr("href"); return false;
});
// how to use

home

});

Convert between ID and Class When changing the Window size, switch between ID and Class

Copy code The code is as follows:

$(document).ready(function() {
function checkWindowSize() {
if ( $(window).width() > 1200 ) {
$('body').addClass('large');
}
else {
$( 'body').removeClass('large');
}
}
$(window).resize(checkWindowSize);
});

Clone object

Copy code The code is as follows:

$(document).ready(function() {
var cloned = $('#id').clone();
// how to use

});

Center the element in the middle of the screen

Copy the code The code is as follows:

$ (document).ready(function() {
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2 $(window).scrollTop() "px");
this.css("left", ( $(window).width( ) - this.width() ) / 2 $(window).scrollLeft() "px");
return this;
}
$("#id").center();
});

Write your own selector

Copy the code The code is as follows:

$(document).ready(function() {
$.extend($.expr[':'], {
moreThen1000px: function(a) {
return $( a).width() > 1000;
}
});
$('.box:moreThen1000px').click(function() {
// creating a simple js alert box
alert('The element that you have clicked is over 1000 pixels wide');
});
});

Count the number of elements

Copy code The code is as follows:

$(document).ready(function() {
$(" p").size();
});

Use your own Bullets

Copy code The code is as follows:

$(document).ready(function() {
$("ul").addClass("Replaced");
$("ul > li").prepend("‒ ");
// how to use
ul.Replaced { list-style : none; }
});

Reference the jQuery class library on the Google host

Copy the code The code is as follows:

//Example 1


// Example 2:(the best and fastest way)

Disable jQuery (animation) effect

Copy code The code is as follows:

$(document ).ready(function() {
jQuery.fx.off = true;
});

Conflict resolution with other JavaScript libraries

Copy code The code is as follows:

$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq('#id').show();
});