UI: Jquery is Javascript Library

jquery
jquery

UI: Jquery is Javascript Library

Jquery Basics:

With the title itself, anybody can deduce that we are indirectly talking about javascript only. So, we can say that Javascipt is the guardian of Jquery. These are client end technologies which are completely different from our server side technologies but now they have blend in.

Lets try an example in Javascript first,we will try to set the background color of document in our page.

For that we will declare a javascript function.


<script type="text/javascript">

function setBackgroundColor(color)
{
document.body.style.backgroundColor=color;
}
;

</script>

<button onclick="setBackgroundColor('&lt;span class=">000AAA')"&gt;Set Color</button>

Well,try it and you will see the action.

Next,to achieve the similar functionality we will use a Jquery.

$(this).css('background-color', 'red');

Look at the difference,Now let me ask you a question which one is neat? and which one you will prefer? Ofcourse, we all know that jquery is much simple, neat and easy to handle.

Well, how was this possible?

Jquery is a library, so like all library contains books which we read, similar way Jquery contains a lot of common tasks which would have required a lot of javascript code to be written. These tasks can be called in a simple way through Jquery by just following some syntax which we will see later in this document.

Why Jquery and not others?

There are other frameworks also available so why jquery, because it is very much popular and is growing daily with lot of new tasks being added to the library. One of the major factor is that it is being used by almost all the big companies.

What are the prerequisites?

This is an important question as, if you know things like

  • HTML
  • CSS
  • JavaScript

Then half of the battle is won.

How can i start?

Go and download the latest jquery from jquery.com and add it into the folder where you are developing your application.

There are two version of jquery available:

  • Production Version- Download this version, if you are new to jquery.
  • Development version

If you do not want to download, then also there is a way to include jquery in your project. There is a copy of jquery available on Google and Microsoft network, hosted on their CDN. You have to include this code in your page to include the library in your project.

<html>

script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>

</html>

The ‘$’ syntax

We have our library in place, we will start with declaring ‘$’. This is a shortcut for $(document).ready.

Why it is required?

This requirement is somewhat related to Javascript issues which were faced by developers.What really happened was that any javascript code written for a particular element of the page requires the element to be available on the page but if the element is not loaded or available on the page, Javascript function will fail.

With ‘$’ or $(document).ready , we made sure that no jQuery code is run before the document gets loaded.

Selectors

To manipulate any element of the page, we would first have to select the element and for that, jquery has provided us with few selectors.

Element Selector

$(*)- selects all elements.

$(p)- selects all paragraph elements.

$(div)- selects all div elements.

I have provided only 3 examples, which can be used to start your learning. There are many varieties available and many others, you will learn through practice.

ID Selector

$(#ID)- selects the element having id mentioned after #.

For ex:

$(#label1)- selects the label having ID as ‘label1’.

Class Selector

$(.classname)- selects all elements having css class name mentioned after ‘.’

for ex:

$(.headercss)- selects all elements with css class name as headercss.

Now we know, how to select the elements, start some operation on them to gain more clarity.

$(document).ready(function(){
$(“#btn”).click(function(){
$(“div”).hide();

$(“.labelcss”).show();
});
});

Explanation: It will select button with id ‘btn’ and on click event of the button, function will be called which will hide all the div elements and show all the elements having css class as ‘labelcss’.

There is one click event mentioned in the above example.There are many other user actions which are ‘keypress’,’keyenter’,’focus’ etc. These events are attached to our elements and can be called by any user action. We have covered the basic here so in next article we will dive deep into Jquery.

Author: hershey

A passion for knowledge drives me to do programming, A passion for programming drives me to create something different, A passion for creation drives me to spread the knowledge.

Share This Post On

0 Comments

  1. nice superb explaination

    Post a Reply
  2. thanks for the tutorial
    I am having a problem.
    The feature “Create SQL server database” isn’t available , I can’t select it.
    Can you help, please ?

    Post a Reply

Submit a Comment

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

More from CodeSpread:

  • jQuery: Effects/MethodsjQuery: Effects/MethodsIn our last article, jQuery Part 1 , we covered the basic understanding and now we will move to Methods or effects available in jQuery. Hide/Show/Toggle Methods The most used method Hide/Show. Fr...
  • RegisterClientScriptBlock, RegisterClientScriptIncludeRegisterClientScriptBlock, RegisterClientScriptInclude"Current trends are more inclined towards the client model for a better UI experience where small pieces of client script are integrated into the application." These client scripts can be declarat...
  • RegisterStartupScript, RegisterOnSubmitStatementRegisterStartupScript, RegisterOnSubmitStatementWe have discussed RegisterClientScriptBlock, RegisterClientScriptInclude in our previous article here. There are two more methods to client script dynamically from server side. We will discuss thes...
  • Java script rendered content is not crawl able.Java script rendered content is not crawl able.There was a requirement to include 'ratings and reviews' plugin on the product pages of our website which is provided by a third party. We included a javascript library and some code as provided by...
  • Styles of Source Code Comments in C#, SQL, XML, HTML, CSS, JavaScriptStyles of Source Code Comments in C#, SQL, XML, HTML, CSS, JavaScriptDevelopers take months to write beautiful pieces of code and reviewer gets only few hours or I say, minutes to provide suggestions and improvisations. Then it becomes a hard deal for a developer to...
  • Release of jQuery 1.11.0/2.1.0 Beta 2 Release of jQuery 1.11.0/2.1.0 Beta 2 We have latest news from jQuery desk. On Nov 15th2013, jQuery official site announced the release of  jQuery 1.11.0/2.1.0 Beta 2. These bets versions can be downloaded from the below mentioned li...
  • User Interface DesignUser Interface DesignWhat is a User Interface? Webopedia says “Abbreviated UI, the junction between a user and a computer program. An interface is a set of commands or menus through which a user communicates with a pr...
  • 20 Dec: Must Read Codes [6-10]20 Dec: Must Read Codes [6-10]We are sharing few must read codes/concepts which are required now and then. Each of these codereads doesn’t require a full length descriptive article so combining them into groups of five. CodeRe...