Month: October 2016

How to add the two input number using Jquery ?

ChandradevLeave a comment

Hi

So many time while working with Jquery, you will think, how can i do the summation of two number using Jquery. Here is the simple syntax for doing this task.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btnSum").click(function () {
                 var res = (parseInt($("#Num1").val()) + parseInt($("#Num2").val()));
                alert(res);
            });
            
        });
    </script>
</head>
<body>
   Num1: <input type="text" name="Num1" id="Num1" value="" />
    <br />
    Num2 :<input type="text" name="Num2" id="Num2" value="" />
    <br />
    <button id="btnSum">Click Here</button>
</body>
</html>
Advertisement

How to read and write Value in Jquery (Part 7)

Chandradev1 Comment

While learning any library or framework we have to know how to read and write the input value. For read and write the values in Jquery, there are 3 methods. i.e.

1. text() : used to read and write the text content of selected elements.
2. html(): used to read and write the html content of selected elements.
3. val(): Used to read and write the value of form fields.

Sample example for read the values

readvalue


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
               alert($("#test1").text());
            });
            $("#btn2").click(function () {
               alert($("#test2").html());
            });
            $("#btn3").click(function () {
                alert($("#test3").val());
            });
        });
    </script>
</head>
<body>
  
<p id="test1">This is the simple text.</p>
<p id="test2">This is other <b>simple</b> text.</p>

<p>Input field: <input type="text" id="test3" value="Chandradev"></p>

<button id="btn1">Read Text</button>
<button id="btn2"> Read HTML</button>
<button id="btn3">Read Value</button>
</body>
</html>

Sample Example for write values

writevalue


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
               $("#test1").text("This is overrided text");
            });
            $("#btn2").click(function () {
                $("#test2").html("<b>This is overrided html text</b>");
            });
            $("#btn3").click(function () {
               $("#test3").val("This is overrided Name");
            });
        });
    </script>
</head>
<body>
  
<p id="test1">This is the simple text.</p>
<p id="test2">This is other <b>simple</b> text.</p>

<p>Input field: <input type="text" id="test3" value="Chandradev"></p>

<button id="btn1">Write Text</button>
<button id="btn2"> Write HTML</button>
<button id="btn3">Write Value</button>
</body>
</html>

Summary:

In the both example we showed that for read text,html and form field value we have used text(),html() and val() method.
But while writing the values for text,html and form field value we passed the input parameter in text(),html() and val() method.

what is the chaining in Jquery ?(Part 6)

Chandradev1 Comment

Chaining is the ways to chain the method one after other method in the single function.
It is one of very important concepts in Jquery. Using chaining, we can write multiple Jquery methods with in the single statement.

Note: Most Jquery methods are chainable but not all.

Now let see one of the basic example of chaining in Jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#Chain").click(function () {
                $("p").css({ "background-color": "green", "height": "300px", "width": "300px" })
                      .slideUp(3000).slideDown(3000)
                      .animate({ left: '350px' }, 5000)
                      .animate({ top: '350px' }, 5000)
                      .animate({ left: 0 }, 5000)
                      .animate({ top: 0 }, 5000);
            });
        });
    </script>
</head>
<body>
     <button id="Chain">Click here</button>
     <br />

    <p style="position:absolute;">
        Try to animate me.
    </p>
</body>
</html>

Summary
In the above example we showed that the basic example chaining in Jquery.

Effect methods in Jquery Library (Part 5)

Chandradev1 Comment

Jquery effect methods are used for creating the animated graphics in web application
Jquery library contains so many methods for this functionality like

1. Hide
2.Show
3. Toggle
4. Slide
5. Fade
6. Animate
7. Stop etc.

Now let see the example of Hide and show method

>> show is used for showing the contains of element.
>> Hide is used for hiding the contains of element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#hide").click(function () {
                $("p").hide(1000);
            });
            $("#show").click(function () {
                $("p").show(1000);
            });
        });
    </script>
</head>
<body>
    <p>This is the test message. </p><br />
    <button id="hide">Hide Me</button>
    <button id="show">Show Me</button>

</body>
</html>

Note: Here 1000 is the speed of show method. It is optional.

Jquery has the following fading method
a. FadeIn()
b. fadeOut()
c. fadeToggle()
d. fadeTo()

FadeIn() Example

>> It is used for displaying the contains of any element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#show").click(function () {
                $("#p1").fadeIn();
                $("#p2").fadeIn("slow");
                $("#p3").fadeIn(4000);
            });
            
        });
    </script>
</head>
<body>
    <p id="p1" style="display:none;background-color:green;height:50px;">This is the test message. </p>
     <p id="p2" style="display:none;background-color:silver;height:50px;">This is the test message. </p>
     <p id="p3" style="display:none;background-color:blue;height:50px;">This is the test message. </p>
    <button id="show">Click Here</button>

</body>
</html>

Note: FadeIn() method conatins also speed parameter which specifies the durartion of effect.

Fade out
>> It is used for hiding the contains with some animated effect.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#Fade").click(function () {
                $("#p1").fadeOut();
                $("#p2").fadeOut("slow");
                $("#p3").fadeOut(3000);
            });

        });
    </script>
</head>
<body>
    <p id="p1" style="background-color:green;height:50px;">This is the test message. </p>
     <p id="p2" style="background-color:silver;height:50px;">This is the test message. </p>
     <p id="p3" style="background-color:blue;height:50px;">This is the test message. </p>
    <button id="Fade">Click Here</button>

</body>
</html>

fadeTo()
>> This method is used for managing the opacity of current element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#Fade").click(function () {
                $("#p3").fadeTo("slow",0.10);
            });

        });
    </script>
</head>
<body>
     <p id="p3" style="background-color:blue;height:50px;">This is the test message. </p>
      <button id="Fade">Click Here</button>

</body>
</html>

Animate Method

Animate method is used for doing animation in user interface.

Stop Method
It is used to stop the animation in Jquery library.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="../../Scripts/jquery.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            $("#animate").click(function () {
                $("div").animate({left:'350px'},5000);
            });
            $("#stop").click(function () {
                $("div").stop();
            });
           
        });
    </script>
</head>
<body>
     <button id="animate">Animate Me</button>
     <button id="stop">Stop Me</button>
    <br />
    <div style="height:100px;width:100px;background-color:red; position:absolute; left:20px;">
        Try to animate me.
    </div>
</body>
</html>

Summary:

We have learnt the basic concept of effect method of Jquery Library.