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
Articles on Trending Technologies
Technical articles with clear explanations and examples
How to remove all the elements from DOM using element ID in jQuery?
To remove all the elements from DOM using element ID, use the remove() method.ExampleYou can try to run the following code to remove all the elements from DOM using element ID: $(document).ready(function(){ $("button").click(function(){ $("#mydiv").remove(); }); }); Click to remove all elements This is some text. This is demo text.
Read MoreHow to use *= operator in jQuery attribute selector?
The *= operator is used to filter elements for attribute containing the given value.ExampleYou can try to run the following code to learn how to *= operator to filter attributes on the basis of text: $(document).ready(function(){ $( "div[myattr*='subject']" ).css("background-color", "yellow"); }); Java HTML Ruby
Read MoreHow to insert an element into DOM using jQuery?
There may be a situation when you would like to insert new one or more DOM elements in your existing document. jQuery provides various methods to insert elements at various locations.The after( content ) method insert content after each of the matched elements whereas the method before( content ) method inserts content before each of the matched elements.After contentThe after( content ) method inserts content after each of the matched elements.ExampleYou can try to run the following code to learn how to insert an element into DOM, with after() method: jQuery after(content) method ...
Read MoreWhat is the difference between jQuery.show() and jQuery.hide()?
jQuery show() methodThe show( speed, [callback] ) method shows all matched elements using a graceful animation 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", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).callback − This is optional parameter representing a function to call once the animation is complete.ExampleYou can try to run the following code to learn how to work with show() method: The jQuery Example ...
Read MoreHow do I find a certain attribute exists or not for a selected item in jQuery?
To find a certain attribute exists or not for a selected item in jQuery, use the hasAttribute() method.ExampleYou can try to run the following code to learn how to find a certain attribute exists or not: $(document).ready(function(){ $('button').on('click', function() { if (this.hasAttribute("myattr")) { alert('True - myattr attribute exists') } else { alert('False - myattr attribute does not exist') } }) }); Button One Button Two
Read MoreHow animate(), hide and show elements using jQuery?
Use the hide() and show() method with animate() to hide and show elements.ExampleYou can try to run the following code to learn how to work with animate() method to hide and show elements: $(document).ready(function(){ $("#btn1").click(function(){ $("#box").animate({height: "300px"}, 500, function() { $(this).hide(); }); }); $("#btn2").click(function(){ $("#box").animate({height: "300px"}, 500, function() { $(this).show(); }); }); }); Hide Show
Read MoreHow to insert element as a first child using jQuery?
To insert element as a first child using jQuery, use the prepend() method. The prepend( content ) method prepends content to the inside of every matched element.ExampleYou can try to run the following code to learn how to insert element as a first child using jQuery: jQuery Example var x = 0; $(document).ready(function() { $('.add').on('click', function (event) { var html = "demo text " + x++ + ""; $("#parent-div").prepend(html); }); }); .div { margin:10px; padding:12px; border:2px solid #F38B00; width:60px; } Hello World
Read MoreHow to find left position of element in horizontal scroll container using jQuery?
To find the left position of element in horizontal scroll container using jQuery, use the animate() function with the scrollLeft() function.ExampleYou can try to run the following code to learn how to find left position of an element in horizontal scroll container: $(document).ready(function() { var scrollArea = $('#box'); var toScroll = $('#box .myclass'); function myScroll() { toScroll.each(function() { var self = $(this); $(this).css('cursor', 'pointer'); $(this).on('click', function () { var leftOffset ...
Read MoreHow to change CSS using jQuery?
To change CSS using jQuery, use the jQuery css() method.ExampleYou can try to run the following code to change CSS using jQuery: $(document).ready(function(){ $("h2").css("backgroundColor", "red"); $("#myid").css({ "backgroundColor": "gray", "color": "white"}); $(".myclass").css("border", "2px solid black"); }); Heading 2 This is some text. This is some text.
Read MoreHow to duplicate a div using jQuery?
To duplicate a div in jQuery, use the jQuery clone() method.ExampleYou can try to run the following code to learn how to duplicate a div using jQuery: $(document).ready(function(){ $("button").click(function(){ $("div").clone().appendTo("body"); }); }); This is a text Clone div and append
Read More