26 practical tips under Jquery (jQuery tips, tricks & solutions)_jquery

For example, there are functions such as disabling right-clicking, hiding search text box text, opening links in new windows, detecting browsers, preloading images, switching page styles, equal heights of all columns, dynamically controlling page font size, and obtaining the X value and Y value of the mouse pointer. , verify whether the element is empty, replace the element, lazy load, verify whether the element exists in the Jquery collection, make the DIV clickable, clone the object, center the element, count the number of elements, use the Jquery class library on the Google host, disable Jquery The effect is to solve the conflict problem between Jquery class library and other Javascript class libraries.

The details are as follows:

1. Right-click is prohibited

Copy code The code is as follows:

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

2. Hide the 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); }
});
}

3 in new Open the link in the window

Copy the 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

4 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
}
});

5 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");
});

6 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

// the links
Default Theme
Red Theme
Blue Theme< ;/A>
});

7 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"));
});
});

8 Dynamically control the page font size
Users can change the page font size

Copy the code The code is as follows:

$(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;
});
});

9 Return to the top of the page function

Copy code The code is as follows:

$(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
});

10 Get the mouse pointerＸＹ value

Copy code The code is as follows:

$ (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

< /DIV>
});

11 Verify whether the element is empty

Copy code The code is as follows:

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

12 Replacement elements

Copy code The code is as follows:

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

I have been replaced

');
});

13 jQuery delayed loading function

Copy code The code is as follows:

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

14 Remove word function

Copy code The code is as follows:

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

15 Verify whether the element exists in the Ｊｑｕeｒｙ object collection

Copy code The code is as follows:

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

16 Make the entire DＩＶ 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

});

17 Switch 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);
});

18 Clone object

Copy code The code is as follows:

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

});

19 Position 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 ();
});

20 Write your own selector

Copy 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');
});
});

21 statistical elements Number

Copy code The code is as follows:

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

22 Use your own Bullets

Copy the code The code is as follows:

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

23 Reference the Jquery class library on Google host Let Google host the jQuery script for you. This can be done in 2 ways.

Copy Code The code is as follows:

//Example 1

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

24. Disable Jquery (animation) effect

Copy code The code is as follows:

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

25. Solution to conflicts with other Javascript libraries

Copy code The code is as follows:

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

26. Application of Load() function (page load Enter the prompt):

> First write the CSS and position it absolutely to the upper right corner of the page.

Copy code The code is as follows:

#loading {
position:absolute; z- index:900;text-align:center;
background-color:#eef2fa;border:1px solid #d8e3e8;
color:#000;font-size:12px;padding:3px;width:80px;
right:0;top:0;
}

> Then use jQuery to hide the Loading DIV after all images are loaded.
> Don’t forget to load jQuery library. When I was testing the code just now, I wrote the wrong address and almost went crazy.

Copy code The code is as follows:

<script> <br>jQuery(document). ready(function($){ <br>$('img').load(function(){ <br>                $('#loading').css("display","none"); <br>}) ; <br>}); <br></script>

> Just insert a DIV anywhere, O(∩_∩)O haha.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn