Simple Jquery Examples

You are here

jQuery purencool website developmentjQuery is the framework of the future and its uptake across the internet is everywhere. Now the jQuery developers have created a mobile version for mobile devices. This tool saves developers time and the client money and the documentation for using it is widely available. Below is jQuery in its simplest forms, the examples below are what every developer uses when using this framework. Let's take some time to explain what it all means.

jQuery Easing Examples

How to get started in jQuery once the jQuery library is loaded into the header of your HTML document? It is a matter of just calling it, this example does nothing really, what you are telling the jQuery is get this entire document (HTML) page and place it inside the jQuery frame work. This does not effect the website at all but if the developer wants to make changes or create something fancy inside the HTML that structures the document it can be done with relative ease.

 

jQuery(document);

 

jQuery load example

Most web developers call the jQuery framework in the HTML header tags of a website document. This can create problems if the HTML in the body is not loaded into the browser it will throw an error or even worse stop the page loading all together. To stop this from happening the jQuery developers created a method (this is a type of function) that will not execute the code a developer wants to use until the page is fully loaded. jQuery api describes this in more depth 

jQuery(document).ready(function () {});

 

jQuery  function anonymous

When doing any sort of development it has to be designed in such a way that it is secure and will not affect other parts of the system. jQuery is no different and one way of doing this is using anonymous functions (here is a more indepth article). The function that you see below has no name, this places the jQuery into a function to protect it. This stops interaction between different frameworks. Another thing you will notice below and you see will see as an industry standard is the use of the "$" this is so the developer doesn't have to keep typing the word jQuery. It also decreases the amount of code that is written. 

(function ($) {})(jQuery);

jQuery beginners example

This jQuery example is very simple. jQuery is loaded into an anonymous function and then passed in using the variable "$". Then the jQuery .ready method is called ensuring that the rest of the code does not start until the page is completely loaded and then a var is created called 'text' then the jQuery .text method finds the h1 tags in the document and gets the text that is between them then it passes the variable onto the alert function and displays the text it received from the jQuery method.

 

//anonymous function
(function ($){
     //The dollar sign is the jquery object in the variable called $

     //document is being placed into the jQuery object

     //.ready() is a chained jQuery method that 
     //makes sure that the website is completely loaded

     //inside the ready()method there is another anonymous
     //function it contains the javascript and jQuery the 
     //developer wants to execute
    
     $(document).ready(function () {{
       
     //jQuery gets h1 tags text and places it
     //into a var called text
     var text = $('h1').text();

      //This creates an alert box displaying
      //the text var  
      alert(text);
 }})(jQuery);