Web Development

jQuery tips, tricks and better coding practices

There has been a lot of conversation and articles written about JQuery and how it is useful to have in a web designer’s ‘toolbox of must haves’. JQuery is a JavaScript library to write easier and more maintainable code on a website, it is lightweight and contains the following features:

  • HTML/DOM  and CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX

Today I shall discuss the advantages of JQuery and provide some simple code examples to start you off on your coding journey.

Update the version of jQuery

It’s important to always have the most current version and the most stable release of jQuery. Each release irons out bugs and have a higher performance rate. You can even reference jQuery from Google’s CDN servers

<!-- specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>


Naming of element names

Try to optimize and keep naming conventions of element names and ID’s simple. This will not only speed server time up with regard to performance time and accessing information from the DOM, but will also be beneficial when maintaining code.


jQuery selectors

JQuery uses selectors so that we can manipulate HTML elements, so keep element names and ID naming conventions simple as mentioned above. All selector names commence with a dollar sign. The following code below hides a <p> element when the button is clicked:

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});


jQuery animation method

Gone are the days of using Flash and coding complicated animation effects with old school JavaScript. Jquery provides an amimate(); method that can be used to animate an element. The following code below animates a <DIV> elements and moves it 250 pixels to the left when the button is clicked.

$("button").click(function(){
  $("div").animate({left:'250px'});
});


jQuery syntax conventions

jQuery provides its own custom syntax for selecting HTML elements so that actions can be performed on them. Syntax convention is $(selector).action(); Below is some more code syntax examples:

  • $("p").hide();

    hides all paragraph elements.

  • $(".coffee").hide();

    hides all elements with class reference “coffee”.

  • $("#coffee").hide();

    hides the element with id reference “coffee”.

About 

I operate my business Creative Website Designs. My specialties are in Web Development, Search Engine Optimization, Online Marketing, PHP, OpenText, HTML,CSS, JavaScript, Word press, and Joomla. I formally worked as a web developer and SEO Specialist for Bell Potter Securities, Exa and Arrows Internet Marketing.

    Find more about me on:
  • googleplus
  • facebook
  • twitter

Leave a Reply

Your email address will not be published. Required fields are marked *