jQuery is a very basic, but very powerful, JavaScript coding methodology and code set for writing common, dynamic, JavaScript-enabled web functionality, using a lot less code than you would use to write the same functionality otherwise. jQuery is, technically, a set of code wrappers: code written by developers that simplify common tasks. They've written what would normally be more complicated coding/design patterns and made them available as easy-to-use methods, classes, etc. What I like the most about jQuery is its 1) ease of use & installation, 2) easy-to-use effects library, and 3) broad-range-browser compatibility.
Execute Code Not when the Page Loads, but when Every Object on the Page has Loaded, Including All Images
// Add a body.onload event handler, which is called only when
// ALL document elements have loaded, including all images:
$(document).ready(function()
{
alert("Hello, this is jQuery-called called!");
});
Showing and Hiding HTML Elements, Gradually
<script type="text/javascript">
<!-- jQuery code, by Mike G. @ DotNetFun.com
// Add a body.onload event handler, which is called only when
// ALL document elements have loaded, including all images:
$(document).ready(function()
{
// NOTE: ALL FURTHER JAVASCRIPT/JQUERY CODE SHOULD
// BE DEFINED WITHIN THIS FUNCTION, EXCEPT FOR OTHER
// CLASSES AND FUNCTIONS, OF COURSE.
// Faded, gradual showing of a division block;
// the callback function is optional.
$("#btnSample1").click(function()
{
// 3,000 milliseconds used here; it can also be
// "slow", "normal", or "fast"
$("#divSample1").show(3000, divSample1_Callback);
});
});
// Callback function for the preceding divSample1 show call:
function divSample1_Callback()
{
alert("This is the result of the callback function - divSample1_Callback.\r\n\r\n" +
"Clicking on OK will re-hide the divSample1 block.");
// Now, re-hide the divSample1 block, after a 3,000 millisecond
// gradual delay/fade:
$("#divSample1").hide(3000);
}
//-->
</script>
<div id="divSample1" style="display:none">Faded, gradual showing of a division block</div>
<button id="btnSample1">Show it</button>Click on the following button to test the show() code.
Faded, gradual showing of a division block
Toggle the Visibility Between Two Elements/Objects
<script type="text/javascript">
$(document).ready(function()
{
// Toggles the visibility between two elements/objects:
$("#btnSample2").click(function()
{
$("#spanSample2a,#spanSample2b").toggle();
});
});
</script>
<p><b>Click on the following button to test the toggle() code.</b><br />
<span id="spanSample2a">Hello!</span>
<span id="spanSample2b" style="display:none">Goodbye!</span>
<button id="btnSample2">Toggle it</button></p>
Click on the following button to test the toggle() code. Hello!Goodbye!
Gradually Show an Element, Sliding Downward
<script type="text/javascript">
$(document).ready(function()
{
// Faded, gradual showing of a division block, sliding downward:
$("#btnSample3").click(function()
{
$("#divSample3").hide();
$("#divSample3").slideDown("slow");
});
});
</script>
<p><b>Click on the following button to test the slideDown() code.</b><br />
<div id="divSample3" style="display:none; background-color:Red; width:100px; height:50px;"></div>
<button id="btnSample3">Slide it</button></p>
Click on the following button to test the slideDown() code.
Gradually Show an Element, Sliding Upward
<script type="text/javascript">
$(document).ready(function()
{
// Faded, gradual showing of a division block, sliding downward:
$("#btnSample4").click(function()
{
$("#divSample4").show();
$("#divSample4").slideUp("slow");
});
});
</script>
<p><b>Click on the following button to test the slideDown() code.</b><br />
<div id="divSample4" style="background-color:Red; width:100px; height:50px;"></div>
<button id="btnSample4">Slide it</button></p>
Click on the following button to test the slideUp() code.
Toggle the Visibility of an Element/Object, Gradually, Upward & Downward
<script type="text/javascript">
$(document).ready(function()
{
// Toggles the visibility of an element/object,
// in a fading, gradual manner, upward and downward
$("#btnSample5").click(function()
{
$("#divSample5").slideToggle("slow");
});
}
</script>
<p><b>Click on the following button to test the slideToggle() code.</b><br />
<div id="divSample5" style="display:none; background-color:Red; width:100px; height:50px;"></div>
<button id="btnSample5">Slide toggle</button></p>
Click on the following button to test the slideToggle() code.
No comments:
Post a Comment