In this jQuery Javascript Library Introduction you will learn about jQuery and how to do some basic web design with jQuery .

First of all you will need to download jQuery. You can Download jQuery here at – https://jquery.com/download/.

Javascript Library jQuery Introduction.

Click the first link that looks like this.

Javascript Library jQuery Introduction.

Now a page of minified code appears. Simply press [command + a] to select the entire page and then press [command + c] to copy it all.
Next open a text editor and in a new page press [command + v] to paste all of the text. Now press [command + s] to save the file, firstly name it ‘jquery-min.js’ and save it on the desktop. Now create a html5 file, name it ‘index.html’ and also save it on the desktop. The html5 for ‘index.html’ should look like this. On line 9 is the link to the ‘jquery-min.js’ file.

You can of course save both the ‘index.html’ file and ‘jquery-min.js’ in another directory other than the desktop however make sure both files are together like this.

jQuery Javascript Library Introduction
The ‘index.html’ file and the ‘jquery-min.js’ file together in the same directory.

In this next example on lines 15 to 19 Jquery code is added in-between the ‘script’ tags on the html5 document.

The jQuery can be broken down to explain it better. First of all a ‘$(document).ready‘ function is added.

Next the ‘$(“p”)’ identifier is added inside the ‘$(document).ready’ function. This will identify all paragraphs in the html5 document.

A click() event handler is then bound to the ‘$(“p”)’ identifier.

And finally a ‘$(this).hide();’ is added inside the function bound to the ‘click()’ event handler which in turn is bound to the ‘$(“p”)’ identifier.

The ‘hide()’ method will cause a paragraph to be hidden when a click event occurs.

jQuery Javascript Library Introduction.
When a paragraph is clicked it will be hidden by Jquery.
jQuery Javascript Library Introduction
The top paragraph was clicked and it is now hidden!
jQuery Javascript Library Introduction
The second paragraph is clicked and it too is hidden.

In this jQuery javascript library introduction the ‘$’ dollar sign concept has been left unexplained. In jQuery the ‘$’ dollar sign is simply an alias for ‘Jquery’. In other words the ‘$’ dollar sign is used to make the code easier to read and write. In this example the ‘$’ sign has replaced ‘jQuery’ like this.

  • ‘$(document).ready’ instead of ‘jQuery(document).ready’
  • ‘$(“p”)’ instead of ‘jQuery(“p”)’
  • ‘$(this)’ instead of ‘jQuery(this)’

It is obviously tedious to keep having to put ‘jQuery’ so the ‘$’ dollar sign is used instead to make things easier.

In fact here is the html5 document with ‘jQuery’ used instead of ‘$’ the dollar sign and it will still work like the previous example.


More on jQuery

jQuery JSON Introductory Examples.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

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