Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Kristi Castro
Page 5 of 8
How to get the children of the $(this) selector in jQuery?
To get the children of the $(this) selector, use the jQuery find() method. The $(this) selector refers to the current element that triggered an event, and the find() method searches for descendant elements within that current element. Example You can try to run the following code to get the children of the $(this) selector − jQuery Example $(document).ready(function(){ $('#mydiv').click(function(){ alert($(this).find('img:last-child').attr('src')); }); ...
Read MoreHow to center a div on the screen using jQuery?
To center a div on the screen, use the jQuery centering function jQuery.fn.center. This custom jQuery method provides flexible positioning by allowing you to center elements either relative to their parent container or to the browser window. Example You can try to run the following code to learn how to center a div on the screen − $(document).ready(function(){ jQuery.fn.center = function(parent) { ...
Read MoreHow to count number of columns in a table with jQuery
To count number of columns in a table with jQuery, use the each() function with attr(). This method iterates through each cell in the first row and accounts for cells that span multiple columns using the colspan attribute. Example You can try to run the following code to learn how to count columns in a table − jQuery Example table { ...
Read MoreHow can I tell if table row is in view using jQuery?
To check if a table row is visible in the viewport or exists on the page, you can use jQuery's is()
Read MoreHow to make a jQuery function call after "X" seconds?
To make a jQuery function call after "X" seconds, use the setTimeout() method. This method allows you to delay the execution of any function by a specified number of milliseconds. On button click, you can set a timeout and fade out an element. The setTimeout() method takes two parameters: the function to execute and the delay in milliseconds − $("#button1").bind("click", function() { setTimeout(function() { $('#list').fadeOut(); }, 4000); }); In the above code, 4000 represents 4000 milliseconds (4 seconds), which is the delay that ...
Read MoreHow to check whether a string contains a substring in jQuery?
The jQuery :contains() Selector is used to check whether a string contains a substring in jQuery. This selector selects elements that contain the specified text as a substring, making it useful for filtering and styling elements based on their content. Set the substring you are searching for in the contains() method as shown below − $(document).ready(function(){ $("p:contains(Video)").css("background-color", "blue"); }); In the above example, all paragraph elements containing the word "Video" will have their background color changed to blue. Example Now, let us see the complete code to check whether a ...
Read MoreHow to disable/ enable checkbox with jQuery?
To disable and enable checkboxes, use the attr() method or prop() method in jQuery. The disabled attribute prevents users from interacting with the checkbox, making it unclickable and visually grayed out. Using the attr() Method Initially set the input type checkbox and disable it − Male Now on the click of a button, toggle between disabled and enabled checkbox − $("#button1").click(function() { $("#sName").attr('disabled', !$("#sName").attr('disabled')); }); Example The following example demonstrates how to toggle checkbox state using the attr() approach rewritten in vanilla JavaScript (since jQuery CDN is not available in the ...
Read MoreHow to make a textarea and input type read only using jQuery?
To make a textarea and input type read only, use the attr() method or the prop() method in jQuery. The readonly attribute prevents users from editing the content while still allowing the elements to be focused and their values to be submitted with the form. Using the attr() Method The attr() method sets HTML attributes on selected elements. To make input fields and textareas read only, set the readonly attribute − $('input[type="text"], textarea').each(function() { $(this).attr('readonly', 'readonly'); }); Example The following example uses the attr() method to set readonly on a text input and textarea ...
Read MoreHow can I make jQuery animations smoother?
To make jQuery animations smoother, use the easing library and set appropriate animation speeds to create perfect animations for your web page. Avoid speeding up animations excessively and know when to stop them while using animate(). The easing library provides various transition effects like swing, linear, easeIn, and easeOut that make animations appear more natural and polished. Key Tips for Smoother Animations Here are essential techniques to improve jQuery animation quality − Use proper timing: Choose appropriate duration values (fast, slow, or milliseconds) Chain animations: Link multiple ...
Read MoreHow to animate a change in background color using jQuery on mouseover?
To change background color with animation, use the mouseenter and mouseleave events. The background color changes smoothly when you place the mouse cursor over an element using jQuery's animate() method. For basic color change without animation, you can use the css() method − mouseenter: function(){ $(this).css("background-color", "gray"); } However, to create smooth animated transitions, jQuery's animate() method provides better visual effects. The mouse cursor interaction is applied to the following element − Move the mouse pointer to animate the background color change. Example You can try ...
Read More