Sunday, 8 December 2013

JQuery Basics - Part 1

      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.

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

      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