Say Hello to jQuery

Hello

Today we are going to say hello to jQuery. You know, you have to spent only 15 minutes per day to learn jQuery. Now, lets go to start.

Before start, we have to download jQuery form the website of www.jquery.com
In this website, you will get a download jQuery link in the right side of the page. You will two option to download this. This is not any big fact for you. But  the different between production and development version is, there are all sufficient instruction into development version with huge comments but none of this into production. So, I think, we can download the development version.
So, just check development version and click download button.  After that, you will get a new link with jQuery file. Now, just copy this code and past into your favorite textEditor. I am using the notepad++. After that, just save the file with the name of jquery-1.7.1.js

Now, crate a new file called index.html
Now the time for adding jquery-1.7.1.js into body tag of our index.html file. The code of index page is like that.

<!DOCTYPE html>
<html>
<head>
<title>This is our First Day</title>
</head>
<body>
 
<script src=”jquery-1.7.1.js”/>
</body>
</html>

Now the time for adding jQuery manual code into our page. So, write this code into the body tag.

<body><script src=”jquery-1.7.1.js”/>
<script>
jQuery(‘ul li’);
</script>
</body>

Now adding some css style by using jQuery. The code is like this.

<body><ul>
<li>Hello</li>
<li>Hello2</li>
<li>Hello3</li>
</ul>

<script src=”jquery-1.7.1.js”></script>

<script>
jQuery(‘ul li’).css(‘color’,’green’);
</script>

</body>

Now, reload your browser. I think, you are seeing the list style is green.  Oky. Now, we are adding the new class into ul li by using jQuery. So, lest start. For that, I am creating a new css class called listing into the head tag.  Code is like that.

<head>
<title>This is our First Day</title>
<style>
.listing{
color:blue;
}
</style>
</head>

Now, adding new class by using jQuery. Write down the below code into body tag.

<ul>
<li>Hello</li>
<li>Hello2</li>
<li>Hello3</li>
</ul><script src=”jquery-1.7.1.js”></script>

<script>
jQuery(‘ul li’).addClass(‘listing’);
</script>

Now, reload your page again and you will see the ul listing is blue color. Oky. We are success for today.

Now, lets know about the short and full coding about the jQuery.
We used jquery(‘ul li’).addClass(‘listing’);  for our work. This is the details version of jquery. Most of the user use short version of jquery. Only $ sign can be use in jquery short version. The code is like that. $(‘ul li’).addClass(‘listing’);
So, you can use any one for jquery.

Thanks for toady to stay with us. Wait for the second tutorial.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s