All posts by Thiyagu

Jquery

.hasClass() method in Jquery

Leave a comment

Description:

The Jquery hasClass() method validate whethere selected elements having a specified class name or not. If selected elements has matched class name then it will return “true” else it will return “false”.

Syntax

.hasClass( className )

className It specify the class name to search whether its present or not

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divAdd").click(function () {
 if ($("#divBox1").hasClass("sqBoxOdd")) {
 $("#divBox1").addClass("selected");
 }
 if ($("#divBox2").hasClass("sqBoxOdd")) {
 $("#divBox2").addClass("selected");
 }
 if ($("#divBox3").hasClass("sqBoxOdd")) {
 $("#divBox3").addClass("selected");
 }
 if ($("#divBox4").hasClass("sqBoxOdd")) {
 $("#divBox4").addClass("selected");
 }
 });
 });
 </script>
 <style type="text/css">
 .selected {
 background-color: #ff6a00 !important;
 }
 .sqBoxOdd {
 display: inline-block;
 margin: 20px;
 width: 80px;
 height: 80px;
 left: 10px;
 top: 10px;
 background-color: #4CAF50;
 }
 .sqBoxEven {
 display: inline-block;
 margin: 20px;
 width: 80px;
 height: 80px;
 left: 10px;
 top: 10px;
 background-color: #4CAF50;
 }
 </style>
</head>
<body>
 <button style="margin: 20px;" id="divAdd">Add CSS Class</button><br />
 <div id="divBox1" class="sqBoxOdd"></div>
 <div id="divBox2" class="sqBoxEven"></div>
 <div id="divBox3" class="sqBoxOdd"></div>
 <div id="divBox4" class="sqBoxEven"></div>
</body>
</html>

Output: 

dotnet-helpers-com-jquery-hasclass-method-thiyagu-jquery

On clicking “Add CSS Class” button then the “if” condition will execute and append the “selected” class to the matched div. The CSS class will append only if it receive true from the .hasClass() method. 

 

Jquery

addClass() method in Jquery

Leave a comment

Description:

The Jquery addClass() method add the specified class(s)  for the matched/selected elements. If we need to add more than one class then we need to use Space as the separate between the class names. It does not remove existing class attributes in the element, it only adds one or more class names to them.

Syntax

.addClass( className )
.addClass( function )

className It specify the class name to add for the selected element. More than one class will be included by using the space as separator.
function A function returning one or more space-separated class names to be added to the existing class name. The function accept two arguments as parameter, one is the index position of the element and  second is the existing class name. 

Note :

To set multiple class(s)

.addClass({“className1 className2”});

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divAdd").click(function () {
 $("#divBox").css("background-color", "");
 $("#divBox").addClass("selected");
 });
 });
 </script>
 <style type="text/css">
 .selected {
 background-color: #ff6a00;
 }
 </style>
</head>
<body>
 <button style="margin: 20px;" id="divAdd">Add CSS Class</button>
 <div id="divBox" style="margin: 20px;width: 80px;height: 80px;left: 10px;top: 10px; background-color:#4CAF50"></div>
</body>
</html>

Output: 

Before clicking the button “Add CSS Class” button

After clicking the “Add CSS Class” button, the “selected” class has appended to the div and back-ground color has updated from the new class as shown below.

Note:

Here is the sample code for using Function as parameter.

$( “div” ).addClass(function( index, currentClass ) {// perform action based on the index/current Class name});

Jquery

css() method in Jquery

Leave a comment

Description:

Jquery .css() method Get/set the css property for the matched elements.

Syntax

GET Property: .css( propertyName )
SET Property: .css( propertyName, value )

propertyName A css property name
valueA value to set for the property

Note :

To set multiple value, the syntax will be

.css({“propertyname”:”value”,”propertyname”:”value”,…});

GET CSS Property value :

It will return the value for specified CSS property value for the matched element

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("button").click(function () {
 alert("Background color = " + $("#divBlogName").css("background-color"));
 });
 });
 </script>
</head>
<body>
 <h2>Jquery .css() Method </h2></br>
 <div id="divBlogName" style="background-color:#00ff21">This is dotnet-helpers.com</div></br>
 <button>Display the background color</button>
</body>
</html>

Output:

SET CSS Property :

It will set CSS property for the matched element.

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("button").click(function () {
 $("#divBlogName").css("background-color","#00ff21");
 });
 });
 </script>
</head>
<body>
 <h2>Jquery .css() Method </h2></br>
 <div id="divBlogName">This is dotnet-helpers.com</div></br>
 <button>Display the background color</button>
</body>
</html>

 

Output:

Clicking the button, the background-color porperty will set to the div(divBlogName) as shown below.

Jquery

serializeArray() method in Jquery

1 Comment

Description:

The jQuery serializedArray() Method is used to create a array of string by serializing form values. It operates on a collection of forms and its controls. We can select one or more form elements such as <input>, <textarea> or the form element itself.

Syntax

$(selector).serializeArray() 

No ArgumentsThis method does not accept any arguments.

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#btnSubmit").click(function () {
 $("#divOutpu").text($("form").serialize());
 });
 });
 </script>
</head>
<body>
 <form>
 Enter Your First name: <input type="text" name="FirstName"><br>
 Enter Your Last name: <input type="text" name="LastName"><br>
 Enter Your Age: <input type="text" name="Age" style="margin-left:35px;"><br>
 </form>
 <br>
 <button id="btnSubmit">Serialize form values</button><br><br>
 <div id="divOutpu" style="background-color:#6fb5ef; font-size:large; width:600px;color:black;"></div> 
</body>
</html>

Output:

Jquery

serialize() method in Jquery

Leave a comment

Description:

The Jquery serialize() method creates a URL encoded text string by serializing form values. It is used in form controls like <input>, <textarea>, <select> etc.. It serializes the form values so that its serialized values can be used in the URL query string while making an AJAX request.

Syntax

$(selector).serialize() 

No ArgumentsThis method does not accept any arguments.

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#btnSubmit").click(function () {
 $("#divOutpu").text($("form").serialize());
 });
 });
 </script>
</head>
<body>
 <form>
 Enter Your First name: <input type="text" name="FirstName"><br>
 Enter Your Last name: <input type="text" name="LastName"><br>
 Enter Your Age: <input type="text" name="Age" style="margin-left:35px;"><br>
 </form>
 <br>
 <button id="btnSubmit">Serialize form values</button><br><br>
 <div id="divOutpu" style="background-color:#6fb5ef; font-size:large; width:600px;color:black;"></div> 
</body>
</html>

Output:

Jquery

clearqueue() Effect in Jquery

Leave a comment

Description:

The Jquery clearQueue() method removes all queued items from the queue that have not yet been executed. When the .clearQueue() method is executed then all functions on the queue that have not been executed are removed from the queue. If there is no argument then the clearQueue() will remove all the remaining functions.

Syntax

$(selector).clearQueue( queueName)

queueNameIt contain the name of the queue. Defaults it will be fx.

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">
 $(document).ready(function () {
 var divBox = $("#divBox");
 $("#divStart").click(function () {
 divBox.animate({ height: 200 }, 2000);
 divBox.slideUp(2000);
 divBox.slideDown(2000);
 divBox.animate({ width: 300 }, 1500);
 divBox.animate({ height: 100 }, 1500);
 divBox.animate({ width: 100 }, 1500);
 });
 $("#divStop").click(function () {
 divBox.clearQueue();
 });
 });
 </script>
</head>
<body>
 <button id="divStart">Start Animation</button>
 <button id="divStop">Stop Animation</button>
 <br><br>
 <div id="divBox" style="background: #00ff21; height: 100px; width: 100px;"></div>
</body>
</html>

Output:

Clicking on “Start Animation”” button, the “divBox” start with animations and stop the execution after calling the clearqueue() function. From the below output, ” divBox.animate({ width: 300 }, 1500);divBox.animate({ height: 100 }, 1500);divBox.animate({ width: 100 }, 1500);”  animation steps has cleared from the queue after clicking the “stop animation” button while executing “divBox.slideDown(2000);”.

Jquery

dequeue() Effect in Jquery

Leave a comment

Description:

Execute the next function on the queue for the matched element. When jQuery.dequeue() is called, the next function on the queue is removed from the queue, and then executed.

Syntax

$(selector).dequeue( element

[, queueName ] )
element Need to secify the DOM element to remove and execute a queued function.
queueNameIt contain the name of the queue. Defaults it will be fx.

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divstart").click(function () {
 $("#divBox")
 .animate({ left: '+=200px' }, 2000)
 .queue(function () {
 $(this).css("background-color", "#1a80b6");
 $.dequeue(this);
 })
 .animate({ left: '10px', top: '30px' }, 1000)
 .animate({ height: '200px', width: '200px' }, 1000);
 });
 });
 </script>
</head>
<body>
 <button style="margin: 20px;" id="divstart">Start Queue with Dequeue</button>
 <div id="divBox" style="margin: 50px;position: absolute;width: 80px;height: 80px;left: 10px;top: 30px;background-color: #4CAF50;"></div>
</body>
</html>

Output:

Clicking on “Start Queue with Dequeue” button, the “divBox” start with animations and skip the execution of the queue function when it reach .dequeue() method.

Note:

We need to use dequeue() method  with queue() else the queue will not be closed and you will get undesired result.

Jquery

queue() Effect in Jquery

Leave a comment

Description:

The jquery queue() method shows the queue of functions to be executed on the matched/selected elements. A queue is one or more functions waiting to run and it has several queues. Most often it has only one, the “fx” queue, which is the default jQuery queue. 

For Better Understand: 

It is an array of functions stored on a per element basis, using jQuery.data(). They work as First-In-First-Out. To understand better, we have to understand how jQuery does animation. If you write multiple animate method calls one after the other, jQuery creates an internal queue and adds these method calls to it. Then it runs those animate calls one by one.

Syntax

$(selector).queue(queueName)

queueName Optional. Specifies the name of the queue Default is “fx”, the standard effects queue

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("button").click(function () {
 var divqueue = $("#divqueue");
 divqueue.animate({ height: 100 }, "slow").animate({ width: 100 }, "slow")
 .animate({ height: 80 }, "slow").animate({ width: 80 }, "slow").animate({ margin: 80 }, "slow");
 $("#divQueueLen").text(divqueue.queue().length);
 });
 });
 </script>
 
</head>
<body>
 <button>Queue Animation</button>
 length of the queue: <span id="divQueueLen"></span>
 <div id="divqueue" style="width:200px;height:200px;margin:50px; background-color:#4CAF50;"></div>
</body>
</html>

Output:

On Click of “Click to start animation” button, the “divpanelBox” started to append (css stlyle) the new height & width for the same and started to increasing the size of the div as shown below.

Example:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnStopAnimationQueue').click(function () {
                $('#divQueueBox').queue('fx',[]);
            });
            $('#btnStartQueueAnimation').click(function () {
                $('#divQueueBox').queue(function () {
                    $(this).animate({ height: '-=50', width: '-=50', "margin-left": '+=100' }, 1000);
                    $(this).animate({ height: '-=50', width: '-=50', "margin-left": '+=100' }, 1000);
                    $(this).animate({ height: '-=50', width: '-=50', "margin-left": '+=100' }, 1000);
                    $(this).dequeue();
                });
            });
        });
    </script>
    <style type="text/css">
        #divQueueBox {
            border: 1px solid red;
            width: 250px;
            height: 250px;
            position: absolute;
            background-color: #f00;
            left: 320px;
        }
    </style>
</head>
<body>
    <p><button id="btnStartQueueAnimation">start Queue animation.</button><br /></p>
    <div id='divQueueBox'>
    </div>
</body>
</html>

Output:

Note :

After we build up our queue items, we have to call dequeue() on the queue in order to kick off the series of sequential events.deQueue() method . we need to use dequeue() method with queue() else the queue will not be closed and you will get undesired result.

 

Jquery

animation() Effect in Jquery

Leave a comment

Description:

Jquery animation() method provide the custom animation with set of CSS properties.

Syntax

.animate( properties[duration ] [easing ] [complete ] ).animate( properties, options )

Ex :

$("#div").animate({ });
params params parameter defines the CSS properties to be animated.
Duration/speed  It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones.
EasingIt specifies the easing function to be used for transition (default value: swing).
CallbackA function to call once the animation is complete.

 

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divflipBox").click(function () {
 $("#divpanelBox").animate({
 height: '+=20px',
 width: '+=20px'
 });
 });
 });
 </script>
 <style type="text/css">
 #divflipBox, #divpanelBox {
 background-color: #a0ce4e;
 border: solid 1px black;
 width: 25%;
 }
 #divpanelBox {
 width: 30px;
 height: 30px;
 }
 </style>
</head>
<body>
 </br>
 <button id="divflipBox">
 Click to Start Animation
 </button>
 </br> </br>
 <div id="divpanelBox">
 </div>
</body>
</html>

Output:

On Click of “Click to start animation” button, the “divpanelBox” started to append (css stlyle) the new height & width for the same and started to increasing the size of the div as shown below.

 

Jquery

delay() Effect in Jquery

Leave a comment

Description:

The jQuery delay() method is used to delay the execution of animation in the queue. It is a best method for delay between the queued jQuery effects.

Syntax

.delay( speed )

Ex :

$("#div").delay("1000")
Duration/speedIt specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divflipBox").click(function () {
 $("#divpanelBox1").slideDown().delay(1000).fadeOut();
 $("#divpanelBox2").slideDown().delay(200).fadeOut();
 });
 });
 </script>
 <style type="text/css">
 #divflipBox, #divpanelBox {
 background-color: #a0ce4e;
 }
 #divpanelBox1 {
 width: 90px;
 height: 90px;
 background-color: blue;
 }
 #divpanelBox2 {
 width: 90px;
 height: 90px;
 background-color: red;
 }
 </style>
</head>
<body>
 <button id="divflipBox">
 Click to Apply DELAY()
 </button><br><br>
 <div id="divpanelBox1">
 </div><br>
 <div id="divpanelBox2">
 </div>
</body>
</html>

Output:

After clicking the “Click to slide down using DELAY()” button, the “divpanelBox1” slides down immediately and delay/pause for 1000 milliseconds for next execution(ie.,fadeOut). In  the same way, “divpanelBox2” will make pause for 200 milliseconds for fadeOut().