From this article we are going to see some of the basic things in the JQuery. JQuery is a light weight model of Javascript library, It is gives the Multi browser support and CSS3. JQuery have many plugins now a days to support the web document.Now Let we start the tutorial.
$(document).Ready() : Means when the html document is ready then corresponding function will execute
Load(): Will fire when the given element is loaded in the document.
Unload(): Will fire when the specified element is unloaded.
FadeIn(): Will Fade in the specified element
Attr(): Is used to get the Attribute value of the element
:button : Will specify that corresponding action is for all elements, To do the changes for clicked one then pass the "this" as a parameter to the function
Toggle() : Is used to Toggle the Given element.
hide() : Is used to hide the Given element.
show() : Is used to show the Given element.
# : Is used to specify a element of particualr ID.
From this JQuery methods explanation you can learn some basics and there behaviours
JQuery : $ symbol represents the JQuery , so whenever writing the JQuery we have to specify the $ symbol in the HTML Document.
HTML:
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.9.1.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#sm").hide();
$("#wel").fadeIn('slow');
$('#sm2').click(function () {
$('#sm2').hide();
});
$("#btn").click(function () {
$("p").toggle('fast');
var
val = $('#btn').attr('value');
if
(val == 'show') {
$('#btn').attr('value', 'hide');
}
else
{
$('#btn').attr('value', 'show');
}
});
$("#ifram").load(function () {
alert("Image
Loaded");
});
$(window).load(function () {
alert("Window
Loaded");
var
totalelements = $('*').length;
alert('Total
elements present in Html document ' + totalelements);
var
elelegend = $('#tle').find('*').length;
alert('Total
elements present inside Fieldset Tag ' + elelegend);
var
btnval = $('input').val();
alert(btnval);
var
title = $("#title").text();
alert(title);
$(':submit').click(function () {
var
id = $(this).attr('value',
'Please Wait');
});
$('p:last').text("Value for Last Para");
});
});
</script>
</head>
<body align="center">
<div id="title">Jquery
Sample</div>
<input id="reg" type="submit"
value="Register"
/>
<input type="submit"
value="Save"
/>
<fieldset id="tle" style="width:500px">
<script type="text/javascript"
src="Toggle.js"></script>
<legend >Jquery Sample</legend>
<a href="http://www.dotnetvisio.blogspot.com">
Click here to go to for My Blog</a>
<img id="ifram" src="3medium.jpg"
/>
<div id="wel" style="display:none">
Welcome to the JQuery tutorial </div>
<input id="btn" type="button"
value="show"
/>
<p id="sm">
This is a Sample Paragrapgh to test the
Jquery
</p>
<p id="sm2">Click
Here to hide this Paragraph</p>
</fieldset>
</body>
</html>
Output:
Fadein & toggle
Fadein & toggle
Button Selector
Show & Hide
Load and UnLoad
Explanation:
$(document).Ready() : Means when the html document is ready then corresponding function will execute
Load(): Will fire when the given element is loaded in the document.
Unload(): Will fire when the specified element is unloaded.
FadeIn(): Will Fade in the specified element
Attr(): Is used to get the Attribute value of the element
:button : Will specify that corresponding action is for all elements, To do the changes for clicked one then pass the "this" as a parameter to the function
Toggle() : Is used to Toggle the Given element.
hide() : Is used to hide the Given element.
show() : Is used to show the Given element.
# : Is used to specify a element of particualr ID.
From this JQuery methods explanation you can learn some basics and there behaviours
No comments:
Post a Comment