Saturday, 1 June 2013

How to Use Jquery?

Introduction:

           Jquery is a lightweight JavaScript Open Source library. jQuery is to make it much easier to use JavaScript on your website since it is a Lightweight Component.

jQuery almost simplifies lots and lots of lines in basic javascript and do the same task within a single line. So most of developers use jquery only instead javacsript.
The scope of jquery just not end with javascript task, With this jquery we can do
               ->Ajax calls(with this you can call a PHP page and insert or change data)
               ->DOM (Document Object Model) Manipulation
               ->We can change CSS of the Page
               ->Add Effects to text or images
               ->And lots more
Before Starting to work on this you must know,
  • HTML
  • CSS
  • Javascript 

How to use:

        Before using Jquery You must have jquery library. You can download it from Jquery.com for free of cost. Then insert it in your html page like you insert your javacsript page that is it. Here i will show you a demo,
 <head>
<script src="jquery.js"></script> //this is your downloaded jquery librray
</head>

Syntax:

<script type="text/javascript">
$(document).ready(function(){
//here goes your jquery functions
  });         
 </script>
               
$(document).ready(function(): Always we must start to use jquery function within this function. The Reason is we must start functions once our document is fully loaded in the page else it will not be a safe one, It results in unwanted actions.

Examples with explanation: 

Let's say we want to hide all <h2> elements in the page. It can be done easily in this jquery.

HTML: <h2>Heading name</h2>
to hide the h2 element You just use this:
       $(document).ready(function(){
    $("h2").hide(); //this will hide the h2 elements fully
  }); 
         The above code hides all h2 elements in the entire page. But if we need to hide only a particular h2 element in the page then we have to use selectors.
What is selector?
           Selector is a Class or ID of the particular element. Let me explain with our above h2 example
HTML: <h2 class="classname" id="idname">Heading name</h2>
 In this example we have two selectors "classname" (via class) and "idname" (via id).
Note: We have to use classname selector as .classname and idname as #idname in jquery function
  
Now move to our problem, Our jquery code here hides all h2 elements. We have clear this problem with this selectors help. Here is the trick
$("#idname").hide(); //this will hide elements only with "idname"
$(".classaname").hide(); //this will elements only with "classname". 

Other Selectors in Jquery:

$("*")   It selects all elements       
$(this)   It selects current element    
$("p.intro")   It selects <p> element with 'intro' as classname
$("p:first")   It selects first <p> element in the entire DOM
$("ul li:first")   It selects first <li> element in first <ul>
$("ul li:first-child")   It selects first <li> element in all <ul>
$("[href]")   It selects all element with href as attribute
$("a[target='_blank']")   it selects all links with target value as blank
$("a[target!='_blank']")   it selects all links with target not as blank

1 comment:

  1. I was reading your web designing post. It was amazing and nice information Great lists that really presents at lot of interesting examples.
    Web development Company in India Company | Web development Company Bangalore
    Web Development Company in Bangalore | Responsive Web development

    ReplyDelete