Share 12 useful jQuery code snippets and 12jquery code snippets

Share 12 useful jQuery code snippets and 12jquery code snippets

JQuery is an excellent JavaScript library, which is well-known among WEB developers and WEB designers. It helps WEB designers develop many creative and beautiful WEB pages.

This article mainly shares 12 useful jQuery techniques. The specific content is as follows:

Below are some tips I have collected. These tips will help you improve the creativity and functionality of your website layout and application.

1. Open the link in a new window

With this code, When you click a hypertext link, it will be opened in a new window, providing a better user experience:

$(document).ready(function() { //select all anchor tags that have http in the href //and apply the target=_blank $("a[href^='http']").attr('target','_blank');}); 

Ii. Set the timer

$(document).ready(function() { window.setTimeout(function() { // some code }, 500);});

 

3. Set high Columns

Use the following code to make each column of Your webpage application have the same height:

<div class="equalHeight" style="border:1px solid"> <p>First Line</p> <p>Second Line</p> <p>Third Line</p></div><div class="equalHeight" style="border:1px solid"> <p>Column Two</p></div><script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script><script>$(document).ready(function() { equalHeight('.equalHeight');});//global variable, this will store the highest height valuevar maxHeight = 0;function equalHeight(col) { //Get all the element with class = col col = $(col); //Loop all the col col.each(function() { //Store the highest value if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } }); //Set the height col.height(maxHeight);}</script>

 Iv. jQuery pre-Loaded Images

This technique can speed up loading images on webpages:

JQuery. preloadImagesInWebPage = function () {for (var ctr = 0; ctr & lt; arguments. length; ctr ++) {jQuery (""). attr ("src", arguments [ctr]) ;}// usage: $. preloadImages ("image1.gif", "image2.gif", "image3.gif"); // check whether the image is loaded $ ('# imageobject '). attr ('src', 'image1.gif '). load (function () {alert ('the image has been loaded... ');});

 5. Locate the element in the middle of the page

<div id="foo" style="width:200px;height: 200px;background: #ccc;"></div><script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript">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;}//Use the above function as:$('#foo').center();</script> 

6. Right-click Disabled

$(document).ready(function() { //catch the right-click context menu $(document).bind("contextmenu", function(e) { //warning prompt - optional alert("No right-clicking!"); //delete the default context menu return false; });});

7. Calculate the number of child elements

<div id="foo"> <div id="bar"></div> <div id="baz"> <div id="biz"></div> <span><span></span></span> </div></div><script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript"> //jQuery code to count child elements $("#foo > div").size()alert($("#foo > div").size())</script>

8. Change the style list

This code will help you change the style list.

 $(document).ready(function() { $("a.cssSwap").click(function() {  //swap the link rel attribute with the value in the rel  $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));  });  });

 9. Use jQuery to set the text size

By adding this code, you can reset the text size (increase or decrease) as needed ).

 $(document).ready(function() { //find the current font size var originalFontSize = $('html').css('font-size');//Increase the text size $(".increaseFont").click(function() { var currentFontSize = $('html').css('font-size'); var currentFontSizeNumber = parseFloat(currentFontSize, 10);var newFontSize = currentFontSizeNumber*1.2; $('html').css('font-size', newFontSize); return false; });//Decrease the Text 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; });// Reset Font Size $(".resetFont").click(function(){ $('html').css('font-size', originalFontSize); }); });

10. Check the current mouse coordinates

With this JS code, you can get the mouse coordinates in any browser.

 $(document).ready(function() { $().mousemove(function(e) { $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY); });

 

11. Obtain the X/y axis of the mouse pointer

 $().mousemove(function(e){ //display the x and y axis values inside the P element $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); });

12. Return to the top Link

This code is very useful for long pages. You do not need to pull the scroll bar to return to the top, just click "back to the top.

 $(document).ready(function() { //when the id="top" link is clicked $('#top').click(function() { //scoll the page back to the top $(document).scrollTo(0,500); } });

JQuery is one of the best JavaScript libraries. It supports Ajax and HTML Script clients and is mainly used for event processing and animation. In addition, jQuery also has various plug-ins that allow developers to create webpages as quickly as possible.

I hope this article will help you learn jquery programming.

Articles you may be interested in:

• JavaScript and JQuery code snippets (1)
• Jquery practical code snippet set
• Some useful jQuery code snippet collection
• Seven useful jQuery code snippets
• JQuery common instance code snippets (50) developed by web Front-end)
• 15 jQuery code snippets used directly
• 10 Great jQuery code snippets
• 18 awesome jQuery code snippets
• Programmers must know 35 jQuery code snippets
• 15 common jquery code snippets