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