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.



    <script type="text/javascript" src="jquery-1.9.1.js">
    <script type="text/javascript">
        $(document).ready(function () {


            $('#sm2').click(function () {

            $("#btn").click(function () {

                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();

                var title = $("#title").text();
                $(':submit').click(function () {

                    var id = $(this).attr('value', 'Please Wait');                   
                $('p:last').text("Value for Last Para");


<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=""> 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 id="sm2">Click Here to hide this Paragraph</p>



      Fadein & toggle

      Button Selector

       Show & Hide

       Load and UnLoad


$(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