Let us first understand what is JavaScript objects and JavaScript events. An object in JavaScript is a distinct entity having properties and a type. For an instance, contrast it with a bowl. A bowl is an object with some properties. The properties are design, color, material, weight, etc. Like this, JavaScript object also has some properties. An independent entity known as a JavaScript object can store numerous values as its properties and methods. While a method represents a function, an object property maintains a literal value. Either the object literal or the object function object() { [native code] } syntax ... Read More

Use event delegations to include both add a new and delete a table row on a web page using jQuery.Firstly, set a button in HTML to add new row    Add new Row Now under the button click event, set the code:$("#newbtn").click(function () { }Example Live Demo    $(document).ready(function(){       var x = 1;       $("#newbtn").click(function () {          $("table tr:first").clone().find("input").each(function () {             $(this).val('').attr({                'id': function (_, id) {                 ... Read More

The jQuery :contains() Selector is used to check whether a string contains a substring in jQuery.Set the substring you are searching for in the contains() method as shown below:$(document).ready(function(){    $("p:contains(Video)").css("background-color", "blue"); });Now, let us see the complete code to check whether a string contains a substring or not:Example Live Demo               $(document).ready(function(){          $("p:contains(Video)").css("background-color", "blue");       });     Tutorialspoint This is demo text. Free Tutorials Free Video Tutorials

To make a textarea and input type read only, use the attr() method .For readonly, set the input type text and textarea as read only as shown below:$('input[type="text"], textarea').each(function(){    $(this).attr('readonly','readonly'); });The following is the code to set readonly to textarea and input type:Example Live Demo jQuery Example               $(document).ready(function() {          $('input[type="text"], textarea').each(function(){             $(this).attr('readonly','readonly');          });       });     readonly textarea

fTo disable and enable checkbox, use the attr() method.Initially set the input type checkbox and disable it −MaleNow on the click of a button, toggle between disabled and enabled checkbox −$("#button1").click(function() {    $("#sName").attr('disabled', !$("#sName").attr('disabled')); });Example Live Demo jQuery Example               $(document).ready(function() {          $("#button1").click(function() {             $("#sName").attr('disabled', !$("#sName").attr('disabled'));          });       });     Male

We can easily disable input box(textbox,textarea) using disable attribute to “disabled”.$(‘elementname’).attr(‘disabled’,’disabled’);To enable disabled element we need to remove “disabled” attribute from this element.$(‘elementname’).removeAttr(‘disabled’);Example    ed                      $(document).ready(function () {             $('#btn1').click(function () {                $('input').attr('disabled', 'disabled');             });             $('#btn2').click(function () {                $('input').removeAttr('disabled');             });          });              Disable    Enable

The fadeTo( ) method fades the opacity of all matched elements to a specified opacity and firing an optional callback after completion.Here is the description of all the parameters used by this method −speed - A string representing one of the three predefined speeds ("slow", "def", or "fast") or the number of milliseconds to run the animation (e.g. 1000).opacity − A number between 0 and 1 denoting the target opacity.callback − This is optional parameter representing a function to call once the animation is complete.You can try to run the following code to learn how to work with fadeTo() method ... Read More

jQuery animate()The animate( ) method performs a custom animation of a set of CSS properties.Here is the description of all the parameters used by this method −params − A map of CSS properties that the animation will move toward.duration − This is optional parameter representing how long the animation will run.easing − This is optional parameter representing which easing function to use for the transition.callback − This is optional parameter representing a function to call once the animation is complete.You can try to run the following code to learn how to work with jQuery animate() method:Example Live Demo   ... Read More

To make jQuery animations smoother use the easing library. Use the animation speed properly to form it a perfect animation for the web page. Do not speed up animation and you should know where to stop it while using animate().For an example, set a button, that fades out on click and displays a textarea:Add answerThe following is the textarea that generates showing smoother animation using animation() and fadeout(): You can try to run the following code to make jQuery animation smoother:Example Live Demo               $(document).ready(function(){          $('body').on('click', '#answer', function() ... Read More

To change background color, use the mouseenter event. The background color change when you place mouse cursor:mouseenter: function(){    $(this).css("background-color", "gray"); }The mouse cursor is placed on the following element:Click and move the mouse pointer to change the background color.You can try to run the following code to learn how to animate a change in background color on mouseover:Example Live Demo               $(document).ready(function(){          $("body").on({             mouseenter: function(){                $(this).css("background-color", "gray");             },                 mouseleave: function(){                $(this).css("background-color", "red");             },              });       });        Click and move the mouse pointer to change the background color.