JQuery Ajax Basic Examples

1JQUERY Ajax : Function ajax()

<a href="http://tutorialsjquery.blogspot.com/2012/03/jquery-first-steps-for-beginners.html" id="trigger1" >Show me the money !!!!</a>
<div id="target1">Hey!!!
</div>
$("#trigger1").click(function(){
    var _url=$(this).attr("href");
    $.ajax({
 url : _url;
      }).done(function(data){
 $("#target").html(data);
      });    
    return false;
  });

Show me the money !!!!

Hey!!!

2JQUERY Ajax : Function load()

<a href="http://tutorialsjquery.blogspot.com/2012/03/jquery-first-steps-for-beginners.html" >Show me the money !!!!</a>
<div id="target2">Hey!!!</div>

$("#trigger1").click(function(){
var _url=$(this).attr("href");
$("#target2").load(_url);
    return false;
  });

Show me the money !!!!

Hey!!!

Jquery Basic Examples

1JQUERY : Select by ID element and Click Event

<a href="#" id="trigger">Hey ... here</a>
      <a href="#" id="reset">Reset</a>
  
    <pre>
    $("#trigger1").click(function(){
      alert("I was clicked and now change my color");
      //To select myself
      $(this).css("color","orange");
      $(this).css("background-color","#333");
      return false;
    });
  
    $("#reset").click(function(){
        alert("I will reset it");
        $(this).css("color","black");
        $(this).css("background-color","transparent");
        return false;
      });
    </pre>

Hey ... here Reset

2JQUERY : Select elements by class name

<div class="code">
 
    <a href="#" id="trigger">Hey ... here</a>
    <ul>
      <li>Element one</li>
      <li class="target">Element two</li>
      <li>Element three</li>
      <li class="target">Element four</li>
      <li class="target">Element five</li>
    </ul>
    
      <pre>
      $("#trigger2").click(function(){
        $("li.target").css("color","red");
        });
      </pre>

Hey ... here

• Element one
• Element two
• Element three
• Element four
• Element five

3Select elements by tag name

<pre>
    <a href="#" id="trigger">Hey ... here</a>
    <ul>
      <li>Element one</li>
      <li>Element two</li>
      <li>Element three</li>
    </ul>
  
      $("#trigger3").click(function(){
        $("li").css("color","red");
      });
</pre>

Hey ... here

• Element one
• Element two
• Element three

4Select elements inside an element

<a href="#" id="trigger4">Hey ... here</a>
    <ul id="justhere">
    <li>Element one</li>
    <li>Element two</li>
    <li>Element three</li>
    </ul>

    $("#trigger4").click(function(){
      $("#justhere li").css("color","red");
      return false;
      });

Hey ... here

• Element one
• Element two
• Element three

JQuery with Ajax for beginners

So, in the post before we could see some of the features of JQuery, today we will show you how to use JQuery for doing Ajax (Asynchronous) calls. Ajax it's not some language or technology, it's a mashup of different things, one of them is the XMLHttpRequest Object, in JQuery we can have this in the easy way.

Jquery : First steps for beginners

Some basic steps to start developing web apps using jquery.

1. JQuery : Import the library in our web page.
2. JQuery : Structure of the syntaxis.
3. JQuery : Start coding : $(function(){});
4. JQuery : Select an element
5. JQuery : Do something!!!!