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.