1. Using the jQuery JavaScript Library

The most convenient and fastest way to create sophisticated interactive websites is using a 3rd party JavaScript framework library called jQuery. The reason jQuery is the primary choice because 1000’s of major web applications on the Internet use it for its simplicity, and it will be an essential skill to read and edit this type of sytax in your future web development endeavours.

Reasons to use it?

  • It promotes simplicity. This library is built on shorter, simpler code, and with simple syntax and open coding standards, developers can shorten the time it takes to deploy an application or site.
  • It makes animated applications just like Flash. jQuery uses a combination of CSS, HTML and JavaScript. This means you can apply an optimization strategy to your site without having to make special adjustments for technologies like Flash.
  • The pages load faster. Use certain code actions in your script to load HTML entities when needed.

Note: All jQuery’s API documentations can be found here.


2. Code Snippets

a) Code Snippet 1: jQuery Syntax

You can download the jQuery library file from here to include on your page, or you can use a link from Google’s JavaScript library repository instead. I recommend that you include Google’s link unless you are an advanced user who wants to customize the jQuery library code.

The proper way to include an external JavaScript file is to place the include link in the header of your HTML page. <head><script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”> </script> </head>

Once included, your page can use all the jQuery functionalities found in the .js file.

b) Code Snippet 2: Introduction to Effects

The previous snippet displayed the .hide() function, but you can also use the .show() function, .slideUp(), .slideDown(), .fadeOut() and .fadeIn().

In the following snippet, we will demonstrate how clicking on a button animates text in the <div> area. You can also set the time in millisecond of how the text is displayed.

c) Code Snippet 3: Handling Events

A user may click on the mouse, hover over a div area, or press enter after they inputted text in a field. These are all events that can be captured by your jQuery script easily in order to display an appended action.


The snippets above are what I think are important to know while developing a jQuery application. As long as you know how to handle events and make your page dynamic without the visitor having to reload a page, then you are set to go.

Tell me what other JavaScript / jQuery snippets you want me to add to my site.

 

About The Author

I write about my life! I would appreciate it if you comment and tell me how life is treating you? :)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Close