Thursday, 15 December 2011

jQuery Example

Example 1:
The following example demonstrates the jQuery hide() method, hiding all <p> elements in an HTML document.

syntax:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html> 
Example 2:
 If you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library from Google or Microsoft.

syntax: Google

<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

syntax: Microsoft
 <html>
<head>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

jQuery Examples Syntax:

jQuery uses a combination of XPath and CSS selector syntax.
The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).
Basic syntax is: $(selector).action()
  • A dollar sign to define jQuery
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)

  1. $(this).hide() - Demonstrates the jQuery hide() method, hiding the current HTML element.
  2. $("#div").hide() - Demonstrates the jQuery hide() method, hiding the element with id="test".
  3. $("p").hide() - Demonstrates the jQuery hide() method, hiding all <p> elements.
  4. $(".div").hide() - Demonstrates the jQuery hide() method, hiding all elements with class="test".

 

The Document Ready Function

All jQuery methods, in our examples, are inside a document.ready() function.
This is to prevent any jQuery code from running before the document is finished loading (is ready).

Syntax:

$(document).ready(function(){

   // jQuery functions go here...

});

 

jQuery Syntax Examples:

1. $(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.

Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
</script>
</head>

<body>
<button>Click me</button>
</body>
</html>

2. $("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.

Example:  
 <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

3. $(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements, with class="test".

Example:   <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

4. $("#test").hide()
Demonstrates the jQuery hide() method, hiding the element, with id="test".

Example:   <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

Hiding - Sliding- Fading

  1. jQuery fadeOut()
Demonstrates a simple jQuery fadeout() method.

Example:
  <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#test").click(function(){
  $(this).fadeOut();
  });
});
</script>
</head>

<body>
<div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div>
<p>If you click on the box above, it will be removed.</p>
</body>

</html>

  1. jQuery hide()
Demonstrates a simple jQuery hide() method.

Example: 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

  1. Hide explanations
Demonstrates how to hide parts of text.

Example: 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

  1. Slide panel
Demonstrates a simple Slide Panel effect.

Example: 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
  });
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>

<h3>Island Trading</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Helen Bennett<br />
Garden House Crowther Way<br />
London</p>
</div>

<h3>Paris spécialités</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>

</body>
</html>

  1. jQuery animate()
Demonstrates a simple jQuery animate() method.

Example: 
<html>
<head>
&lt;script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
  });
});
&lt;/script>
</head>

<body>
<button>Start Animation</button>
<br /><br />
<div style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>



 


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)