jquery – starter tutorial #4

If you haven’t checked the previous posts, please check the following
jquery – starter tutorial #3
jquery – starter tutorial #2
jquery – starter tutorial #1

We can more styles and animations. But I am too lazy to write all of those items here. But I feel I like to make a note of AJAX requests. One of the example below

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").load('01.html');
  });
});
</script>
</head>
<body>

<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>

</body>
</html>

 

jquery – starter tutorial #3

If you haven’t checked the previous posts, please check the following
jquery – starter tutorial #2
jquery – starter tutorial #1

This post will give you more on the animation and design functions of jquery.

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $("#hide").click(function(){
        $(".hide").hide();
        $(".show").hide();
      });
    });

    $(document).ready(function(){
      $("#show").click(function(){
        $(".hide").show("slow");
        $(".show").show("fast");
      });
    });

    $(document).ready(function(){
      $("#toggle").click(function(){
        $(".toggle").slideToggle();
      });
    });

    $(document).ready(function(){
      $("#animate").click(function(){
        $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
      });
    });

    $(document).ready(function(){
      $("#fadeTo").click(function(){
        $(".fadeTo").fadeTo("slow",0.25);
      });
    });

</script>

</head>
<body>
<button id="hide">hide</button>
<button id="show">show</button>
<button id="toggle">toggle</button>
<button id="fadeTo">fadeTo</button>
<button id="animate">animate</button>

<div>show me</div>
<div>hide me</div>
<div>toggle me</div>
<div style="background:yellow;">fadeTo me</div>
<div style="background:#98bf21;height:100px;width:100px;position:relative">animate me</div>

</body>
</html>

Click the buttons to see the methods in action.

jquery – starter tutorial #2

If you have not checked #1, please check jquery – starter tutorial #1

This post will give more info on selectors and introduction to styles.

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $("p.heading").click(function(){
        $(this).hide("slow");
      });
    });

    $(document).ready(function(){
      $("#list").click(function(){
        $(this).hide("fast");
      });
    });

    $(document).ready(function(){
      $("#showAll").click(function(){
        $("p.heading").show("slow");
        $("#list").show("fast");
      });
    });

</script>

</head>
<body>
<h1>India lives</h1>
<p>on families</p>
<p>and their savings</p>
<p>and their believes</p>
Whats is fake?:
<ul id="list">
<li>Worst Politics</li>
<li>Criminal Politicians</li>
<li>Highly paid corrupted and unskilled govt employees</li>
</ul>
<p id="showAll"> <a href="javascript:void()">Show all elements </a></p>
</body>
</html>

Load this on the browser, click on the contents! See the jquery magic

$(“*”) selects all elements.

$(“p”) selects all <p> elements.

$(“p.intro”) selects all <p> elements with the class intro

$(“p#intro”) selects the first <p> elements with id=”intro”.

$(“:animated”) selects all elements that are currently animated.

$(“:button”) selects all <button> elements and <input> elements of type=”button”.

$(“:even”) selects even elements.

$(“:odd”) selects odd elements.