Tutorials and Tips of JQuery, CSS and Web

JQuery Ajax Basic Examples

2012-03-27T06:33:00.000-05:00

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

2012-03-26T07:09:00.000-05:00

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

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

2012-03-26T06:54:00.000-05:00

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.

Read more »

Jquery : First steps for beginners

2012-03-25T10:51:00.001-05:00

Some basic steps to start developing web apps using jquery.

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

Tutorials and Tips of JQuery, CSS and Web

JQuery Ajax Basic Examples

1JQUERY Ajax : Function ajax()

2JQUERY Ajax : Function load()

Jquery Basic Examples

1JQUERY : Select by ID element and Click Event

2JQUERY : Select elements by class name

3Select elements by tag name

4Select elements inside an element

JQuery with Ajax for beginners

Jquery : First steps for beginners