jQuery

We can use jQuery to swap an image on hover by making use of the image src property along with the jQuery hover() method. <img id="img1" src="img.jpg"> <script> $("#img1").hover(function() { //Swap image to the new one }, function(){ //Swap image back }); </script> Let’s see the full HTML code and jQuery for this below. Let’s […]

There are a couple of ways we can use jQuery to add a CSS style as important. The best way we have found is to simply create a class that has the style with the !important property, and then add that class using the jQuery addClass() method. <style> .permanent-red { color: red !important; } </style> […]

In jQuery, we can wait 1 second before executing a function or some code with the use of the setTimeout method. setTimeout(function(){ //Code that will run after 1000 milliseconds }, 1000); You can see in the code above that the setTimeout() method has the second parameter value of 1000. This is how long (in milliseconds) […]

We can use jQuery display none to easily hide an HTML element. We can do this by using the jQuery css() method to target the display property of an element and change it to none. $("#div1").css("display", "none"); We can also get the same result by using the jQuery hide() method, which requires a little less […]

We can use jQuery to set the value of a radio button to checked by making use of the jQuery prop() method. We simply need to change the checked property of the radio button to true. Here is how we can do this: $("#radio-button").prop("checked",true); If using WordPress, don’t forget to change the $ to jQuery: […]

We can use jQuery to get the value of a radio button using the jQuery val() method. $('input[name="radio1"]:checked').val(); Where radio1 in the code above would be the name attribute that all of the radio buttons share. If using WordPress, don’t forget to change the $ to jQuery: jQuery('input[name="radio1"]:checked').val(); Let’s see an example of this below. […]

We can use jQuery to set select to the first option by using the jQuery val() method to set the value of the select element to the value of the first option. $("#select-element").val($("#select-element option:first").val()); If using WordPress, don’t forget to change the $ to jQuery: jQuery("#select-element").val(jQuery("#select-element option:first").val()); Let’s see an example of this below. Lets […]

We can clear an input field using jQuery easily by making use of the jQuery val() method. We simply need to set the value of the input field to an empty string. $(input).val(""); Let’s see a quick example of this below: Let’s say we have the following HTML: <div id="div1"> <input type="text" id="userText" value="This is […]

We can use jQuery to get the border width of an element simply by using the jQuery css() method to retrieve the border-width property of the element. $("#div1").css('border-width'); Let’s see a simple example of this below. Let’s say we have the following HTML: <style>#div1 { padding: 40px; margin: 40px; border: 2px solid #000; background: #7bbfa2; […]

We can use jQuery to get the margin of an element simply by using the jQuery css() method to retrieve the margin property of the element. $("#div1").css('margin'); Let’s see a simple example of this below. Let’s say we have the following HTML: <style>#div1 { padding: 40px; margin: 40px; border: 1px solid #000; background: #7bbfa2; width: […]

To get the padding of an element using jQuery we can simply use the jQuery css() method to retrieve the padding property of the element. $("#div1").css('padding'); Let’s see a simple example of this below. Let’s say we have the following HTML: <style>#div1 { padding: 40px; margin: 40px; border: 1px solid #000; background: #7bbfa2; width: 100px; […]

We can use jQuery to remove the background color of a div by using the jQuery css() method and targeting the background-color property and setting it to transparent. $("#div").css("background-color", "transparent"); Let’s say we have the following HTML: <style>#box { background-color: green; width: 100px; height: 100px; }</style> <div id="div"> <div id="box"></div> </div> If we want to […]

We can use jQuery to select multiple ids very easily by using the jQuery id selector on multiple ids. $("#id1, #id2, #id3").attr("required",true); Let’s see an example of this. Let’s say we have the following HTML: <div> <div id="div1">This is an empty div</div> <div id="div2">This is an empty div</div> <div id="div3">This is an empty div</div> <div […]

We can use jQuery to add a required attribute to an input field by using the jQuery attr() method to target the required attribute on an input element. $("input").attr("required",true); Let’s see an example of this. Let’s say we have the following HTML: <form> <label for="fname">Full Name:</label> <input type="text" id="fname" name="fname"> <button type="submit" value="Submit">Submit</button> </form> If […]

We can use jQuery to increment the value of a variable on a user click very easily by using the jQuery click() method. var i = 0; $("#div1").click(function(){ i++; //Same as i = i + 1 }); Let’s see a couple of examples of this. In this first example, we will simply have a variable […]

We can use jQuery to count the children of an element by making use of the jQuery children() method along with the JavaScript String length property. var number_of_children = $("#div").children().length; Let’s see this in action with a simple example. Here we will have some HTML that will include an element with several child elements. <div […]

We can use jQuery to add the readonly attribute to an input field, making it so the user can highlight or copy text from an input field, but not change it. The easiest way to do this is using the jQuery prop() method. $('input').prop('readonly', true); Here we can use the prop method on an input […]

We can use jQuery to append text to a textarea field simply by getting the text from the textarea using the jQuery val() method and then adding our new text to this value. var newText = "This is our text we want to append"; var userInput = $("textarea").val(); userInput = userInput + " " + […]

In this post, we will go over some text animations we can do using jQuery. We already know we can animate text size using jQuery, so this post will focus more on moving text into the view of the user. This will be done mainly with the help of the jQuery animate() method. This has […]

We can use the jQuery mousedown method to run a function when a user clicks down on their mouse. To do this we can add a function call to the mousedown() method. $("#div1").mousedown(function() { //The user has clicked down on their mouse in #div1 }); Another way this can be done is to use the […]

We can use the jQuery mouseup method to run a function when a user clicks their mouse and then releases it. To do this we can add a function call to the mouseup() method. $("#div1").mouseup(function() { //The user has clicked their mouse and released it in #div1 }); Another way this can be done is […]

We can use jQuery to clear a textarea field easily by making use of the jQuery val() method. We simply need to set the value of the textarea to an empty string. $(textarea).val(""); Let’s see a quick example of this below: Let’s say we have the following HTML: <div id="div1"> <textarea type="text" id="userText">This is some […]

We can use jQuery to get the length of text in a paragraph using the JavaScript String length property. To do this we will get the text from a paragraph in the form of a string using the jQuery val() method. We will then use the length property to get the text length. var text […]

We can use the jQuery empty method to clear all of the child elements of an HTML div/element. $("#div1").empty(); Let’s say I have the following HTML: <div id="div1"> <p>This is a paragraph with some text.</p> <p>This is a paragraph with some text.</p> <p>This is a paragraph with some text.</p> <p>This is a paragraph with some […]

We can use jQuery to set the visibility of an element by using the jQuery css() method along with the visibility property. $("#div1").css("visibility","visible"); The code above will make sure #div1 is visible. $("#div1").css("visibility","hidden"); The code above will make sure #div1 is hidden from view, but it will still take up space. Let’s say I have […]

We can use jQuery to detect a window resize by using the jQuery resize() method on the window object. $(window).resize(function(){ //Do something when the user resizes the window }); Let’s see a simple example of this below. Let’s say we have the following jQuery code: $(window).resize(function(){ alert("The window has been resized."); }); No matter what […]

We can use the jQuery contains selector to check if a character or string is contained in the text of a paragraph or div. p:contains(text) The above code would check all p elements for the text “text”. To see it in full jQuery code: $("p:contains(text)") In the code above, if any paragraphs contain the text, […]

We can use the jQuery append method to place an element in the last index spot of another element. $("#div1").append($("#div2")); Let’s say I have the following HTML: <div id="div1"> <p class="p1">This is paragraph 1</p> <p class="p2">This is paragraph 2</p> <p class="p3">This is paragraph 3</p> </div> If we want to move paragraph 1 after paragraph 3, […]

We can use the jQuery after method to insert a new HTML element after another element. $("#div1").after("<div id='div2'></div>"); Let’s take a look at a quick example. Let’s say we have the following HTML: <div id="div1"> <p class="p1">This is paragraph 1</p> <p class="p2">This is paragraph 2</p> </div> If we want to insert a new paragraph after […]

We can use the jQuery before method to insert a new HTML element before another element. $("#div2").before("<div id='div1'></div>"); Let’s take a look at a quick example. Let’s say we have the following HTML: <div id="div1"> <p class="p2">This is paragraph 2</p> <p class="p3">This is paragraph 3</p> </div> If we want to insert a new paragraph before […]

We can use jQuery to select multiple classes of an HTML element by simply separating each class by a comma. Take a look at how we do this in the code below: $(".class1, .class2, .class3") Let’s see a quick example of this. Let’s say I have the following HTML: <div id="div1"> <p class="class1">This is a […]

We can use jQuery to replace a class (or multiple classes) of an HTML element by simply using the jQuery addClass() method along with the jQuery removeClass() method. $("#div1").addClass("new-class"); $("#div1").removeClass("old-class"); Let’s say I have the following HTML: <div id="div1" class="class-to-be-replaced"> <p class="p">This is a paragraph.</p> </div> If we want to replace the class “class-to-be-replaced” of […]

We can use jQuery to see if the URL contains a word or parameter by using window.location, the href property, and the indexOf() method. if( window.location.href.indexOf("wordWeWantToCheck") > -1) { //Do something } To see if the URL contains a word we first need to get the url of the current page we are on. We […]

The easiest way we can use jQuery to hide an element by its class name is to use the jQuery hide() method. $(".class-name").hide(); We can also use jQuery to hide an element by its class name by using the jQuery css() method. $(".class-name").css("display", "none"); Let’s say we have the following html: <div id="div1"> <p class="do-not-hide">This […]

We can use jQuery to add a sibling to an element by using either the jQuery insertAfter method or the insertBefore method. $('<div id="div2"></div>').insertAfter("#div1"); $('<div id="div1"></div>').insertBefore("#div2"); Let’s say I have the following HTML: <div id="div1"> <p class="p1">This is paragraph 1</p> <p class="p2">This is paragraph 2</p> <p class="p4">This is paragraph 4</p> </div> If we wanted to […]

We can use jQuery to get the position of an element easily using the offset() method. $('#div1').offset(); The offset method will return the coordinates of the element relative to the page. We can then get the top and left coordinates from this method. $('#div1').offset().top; $('#div1').offset().left; If you are using WordPress, don’t forget to change the […]

We can use jQuery to delay the start of certain methods by using the jQuery delay() method. $('#div1').delay(2000).fadeIn(); In the example above, we use the jQuery delay method to delay the showing of the div, #div1. You will also notice the number 2000 in the delay() method. That is the number of milliseconds to delay […]

We can use jQuery to scroll to a div by using the jQuery animate method along with the jQuery offset() method. $("html, body").animate({ scrollTop: $("#div1").offset().top }, "1000"); Note that the number 1000 above is the speed at which we want the scroll to happen in milliseconds. We can change this number to whatever spend we […]

Resizing an image using jQuery is easily done by using the css() method. We can target the width and height properties using the css() method and use that to resize our image. $("#image").css("width","50%"); Let’s say we have the following HTML: <div id="div1"> <img src="http://theprogrammingexpert.com/wp-content/uploads/example-img1.png"> </div> If we want to resize the image to be a […]

Changing the background image using jQuery is done simply by using the jQuery css() method and the background-image property. $("#div1").css("background-image", "url('someImage.jpg')"); Let’s say we have the following HTML with the following style: <style>#div1 { background-image: url('img.jpg'); }</style> <div id="div1"></div> To change the background image of #div1 from img.jpg to anotherImg.jpg, we will use the background-image […]

To uncheck all checkboxes in jQuery, the simplest way is to use the jQuery prop() method along with the checked property, and set it to false. $("input[type='checkbox']").prop("checked", false); Let’s say I have the following HTML form: <form> <input type="checkbox" id="pasta" name="pasta" value="pasta" checked> <label for="pasta"> I like pasta</label> <input type="checkbox" id="seafood" name="seafood" value="seafood" checked> <label […]

To set all checkboxes to checked in jQuery, the simplest way is to use the jQuery prop() method along with the checked property. $("input[type='checkbox']").prop("checked", true); Let’s say I have the following HTML form: <form> <input type="checkbox" id="pasta" name="pasta" value="pasta"> <label for="pasta"> I like pasta</label> <input type="checkbox" id="seafood" name="seafood" value="seafood"> <label for="seafood"> I like seafood</label> <input […]

We can use jQuery to get the bottom position of an element easily using the offset() method. $('#div1').offset(); The offset method will return the coordinates of the element relative to the page. We can then get the top coordinate from this method. To get the bottom position of the element, we will have to add […]

We can use the jQuery text() method to set the text of an HTML element. $("#div1").text("Some text"); Let’s say I have the following HTML: <div id="div1">This is some text.</div> If we want to change the text inside the div from “This is some text.” to “This is some new text.”, we can use the jQuery […]

We can use jQuery to get the top position of an element easily using the offset() method. $('#div1').offset(); The offset method will return the coordinates of the element relative to the page. We can then get the top coordinate from this method. $('#div1').offset().top; If you are using WordPress, don’t forget to change the $ to […]

We can use the jQuery has method to check and retrieve any elements that have another element or specified class. $('#div1').has('sub-div'); Let’s say I have the following HTML: <div id="div1"> <p>This is some text.</p> <p class="special-class">This is some text.</p> <p>This is some text.</p> <p>This is some text.</p> <p>This is some text.</p> </div> If we want […]

We can use the jQuery hasClass method to check and see if any element has a specified class. The hasClass method will return true if the class is found, or false if it is not. $('#div1').hasClass('sub-div'); Let’s say I have the following HTML: <div id="div1"> <p>This is some text.</p> <p class="special-class">This is some text.</p> <p>This […]

We can use the jQuery siblings method to get the all the siblings(divs) of the selected div. $("#div1").siblings(); Let’s say we have the following HTML: <div id="top-div"> <div class="divs"> <p class="p1">This is paragraph one.</p> <p>This is a sibling to paragraph one.</p> </div> <div class="divs"> <p class="p2">This is paragraph two.</p> <p>This is a sibling to paragraph […]

We can use the jQuery parent method to get the parent element(div) of the selected div. $("#p1").parent(); Let’s say we have the following HTML: <div id="top-div"> <div> <p>This is paragraph one.</p> </div> <div> <p class="p2">This is paragraph two.</p> </div> <div> <p>This is paragraph three.</p> </div> </div> If we want to change the background color of […]

We can use the jQuery prev method to get the previous sibling(div) of the selected div. $("#div1").prev(); Let’s say we have the following HTML: <div id="top-div"> <div class="divs"> <p>This is paragraph one.</p> </div> <div class="divs"> <p>This is paragraph two.</p> </div> <div id="div3" class="divs"> <p>This is paragraph three.</p> </div> </div> If we want to change the […]

We can use the jQuery next method to get the next sibling(div) of the selected div. $("#div1").next(); Let’s say we have the following HTML: <div id="top-div"> <div id="div1" class="divs"> <p>This is paragraph one.</p> </div> <div class="divs"> <p>This is paragraph two.</p> </div> <div class="divs"> <p>This is paragraph three.</p> </div> </div> If we want to change the […]

We can use jQuery to toggle the visibility of an element by using the jQuery css() method and an if-else statement. if ( $("#div1").css("visibility") == "hidden" ){ $("#div1").css("visibility","visible"); } else { $("#div1").css("visibility","hidden"); } Let’s say I have the following HTML: <div id="div1"> <p class="p">This is a paragraph.</p> </div> If we wanted to use jQuery to […]

To use jQuery to animate the font size of a paragraph, we can use the jQuery animate() method to change the font-size property of that element. $("#p1").animate({fontSize: "30px"}); Let’s say we have the following HTML: <div id="div1"> <p>We will change the font size of this text.</p> </div> If we want to animate the font size […]

To use jQuery to delete an element, the simplest way is to use the jQuery remove() method. $("#div1").remove(); Let’s say I have the following HTML: <div> <div id="div1"></div> <div id="other-div"></div> </div> If we want to delete #div1 from the DOM, we can use the jQuery remove() method to do this with the following JavaScript code. […]

We can use jQuery to remove the id of a div by using the jQuery removeAttr() method. $("#div1").removeAttr("id"); Let’s say I have the following HTML: <div id="div1"> <p>This is a paragraph.</p> </div> If we want to remove the id of div “div1” in the HTML above, we can target that div and then use the […]

We can use jQuery to set the id of a div by using the jQuery attr() method. $("#div1 p").attr("id","p1"); Let’s say I have the following HTML: <div id="div1"> <p>This is a paragraph.</p> </div> If we want to add an id to the paragraph in the HTML above, we can target that paragraph and then use […]

We can use jQuery to change the id of a div by using the jQuery attr() method. To do this we can target the current id of the div, and then use the attr() method to then change the id. $("#div1").attr("id","div2"); Let’s say I have the following HTML: <div id="div1"> <p class="p">This is a paragraph.</p> […]

We can use the jQuery clone() method to copy an existing HTML element and add a copy of it to our HTML. $("#div1").clone(); The jQuery clone() method would copy the div #div1 and any elements it contains. If you are using WordPress, don’t forget to change the $ to jQuery as below: jQuery("#div1").clone(); Let’s take […]

There are a couple of ways we can use jQuery to show and hide a div. The simplest way is to use the jQuery toggle() method. $("#div1").toggle(); We can also use the jQuery show() and hide() methods to show/hide a div along with an if else conditional statement. if ( $("#div1").css("display") == 'none' ){ $("#div1").show() […]

We can use jQuery to set the width of a div by using the jQuery width() method. $("#div1").width(100); Let’s take a look at a simple example below. Let’s say we have the following HTML: <div id="div1"> <p>This paragraph is in a div that we want to set the width of.</p> </div> If we want to […]

To get the width of a div using jQuery we can use two methods, the jQuery width() method or the outerWidth() method. $("#div1").width(); $("#div2").outerWidth(); The main difference between the width() and outerWidth() methods is that the outerWidth() method will return the same thing as the width method, plus any padding and/or border-width that might be […]

We can use jQuery slideUp() method to hide a div in HTML. The jQuery slideUp() method will slide the element out of view and then hide it. $('#div1').slideUp(); You can also enter milliseconds as a parameter in the slideUp() method to change the speed at which the slide up happens. $('#div1').slideUp(1000); The default speed is […]

We can use jQuery slideDown() method to show a hidden div in HTML. The jQuery slideDown() method will slide the hidden element into view. $('#div1').slideDown(); You can also enter milliseconds as a parameter in the slideDown() method to change the speed at which the slide down happens. $('#div1').slideDown(1000); The default speed is 400 milliseconds. In […]

There are many ways to use jQuery to change the opacity of an element. We can do this by using the jQuery fadeTo() method or the jQuery css() method. Here is an example using the jQuery fadeTo() method: $("#div1").fadeTo(1000, .5); Here is an example using the jQuery css() method: $("#div1").css("opacity", ".5"); The main difference between […]

We can use jQuery to fade out an element using the jQuery fadeOut() method. The jQuery fadeOut() method will change the opacity of an element to 0 and remove it from the HTML changing its CSS display property to “display: none”. $("#div1").fadeOut(1000); In the code above, the number “1000” is the number of milliseconds you […]

We can use jQuery to fade in an element using the jQuery fadeIn() method. The jQuery fadeIn() method will change the opacity of an element to 1 at a speed that we can set. $("#div1").fadeIn(1000); In the code above, the number “1000” is the number of milliseconds you want the fade in to happen by, […]

We can use jQuery to check if an element is visible in the HTML by using the is() method along with the :visible selector. if ($("#div1").is(":visible")) { //The Element is visible } else { //The Element is NOT visible } Let’s take a look at a simple example below. Let’s say we have the following […]

To change the opacity of an element, we can use the jQuery fadeTo method. The jQuery fadeTo() method will change the opacity of an element at a speed and transparency that you can set. $("#div1").fadeTo(1000, .5); In the code above, the first number “1000” is the number of milliseconds you want the fade to happen […]

To set the height of a div in jQuery we can do this easily by using the jQuery height() method. $("#div1").height(100); Let’s take a look at a simple example below. Let’s say we have the following HTML: <div id="div1"> <p>This paragraph is in a div that we want to set the height of.</p> </div> If […]

To get the value from a textarea field, we can use the jQuery val method. We can also use the val() method to set the value of a textarea field. var userInput = $("textarea").val(); Let’s say we have the following HTML: <form> <label for="desc">Description:</label> <textarea type="text" id="desc" name="desc"></textarea> <button type="submit" value="Submit">Submit</button> </form> To get the […]

We can use jQuery to capitalize the first letter of a string by combining the String toUpperCase() and substring() methods. var theString = "how are you?" theString = theString.substring(0,1).toUpperCase() + theString.substring(1); Let’s look at an example below. We can create a simple function that will use jQuery to capitalize the first letter of a string. […]

We can convert a String to uppercase in jQuery easily by using the JavaScript String toUpperCase() method. "This is Some Text".toUpperCase(); When working with strings, it can be useful to convert a string to uppercase. A lot of the time when comparing strings, you will need to convert them both to either lowercase or uppercase […]

We can convert a String to lowercase in jQuery easily by using the JavaScript String toLowerCase() method. "This is Some Text".toLowerCase(); When working with strings, it can be useful to convert a string to lowercase. A lot of the time when comparing strings, you will need to convert them both to lowercase to compare them […]

We can use jQuery to rotate an image easily by using the css() method. We can target the css transform property using the css() method and use that to rotate our image or div. $("image").css("transform","rotate(20deg)"); In the code above, you can change “20deg” to any degree amount you want to rotate the image by. Let’s […]

The jQuery focus method will occur when an element (most of the time an input) gets the user’s focus. This occurs when either the user mouse clicks onto the element, or tabs onto it using the keyboard. $("input").focus(function(){ //do something }); Let’s say we have the following HTML: <form> <label for="fname">Full Name:</label> <input type="text" id="fname" […]

The jQuery focusout method will occur when an element (most of the time an input) loses the user’s focus. This occurs when either the user mouse clicks away from that element, or tabs away from it using the keyboard. $("input").focusout(function(){ //do something }); Let’s say we have the following HTML: <form> <label for="fname">Full Name:</label> <input […]

The jQuery focusin method will occur when an element (most of the time an input) gets the user’s focus. This occurs when either the user mouse clicks onto the element, or tabs onto it using the keyboard. $("input").focusin(function(){ //do something }); Let’s say we have the following HTML: <form> <label for="fname">Full Name:</label> <input type="text" id="fname" […]

The jQuery blur method will occur when an element (most of the time an input) loses the user’s focus. This occurs when either the user mouse clicks away from that element, or tabs away from it using the keyboard. $("input").blur(function(){ //do something }); Let’s say we have the following HTML: <form> <label for="fname">Full Name:</label> <input […]

To get the value from an input field, we can use the jQuery val method. We can also use the val() method to set the value of an input field. var userInput = $("input").val(); Let’s say we have the following HTML: <form> <label for="fname">Full Name:</label> <input type="text" id="fname" name="fname"> <button type="submit" value="Submit">Submit</button> </form> To get […]

With the jQuery last() method, we can get the last element or div in a series of elements or divs. $("div").last(); Let’s say we have the following HTML: <div class="divs"> <p>This is some text</p> <p>This is some text</p> </div> <div class="divs"> <p>This is some text</p> <p>This is some text</p> </div> <div class="divs"> <p>This is some […]

With the jQuery first() method, we can get the first element or div in a series of elements or divs. $("div").first(); Let’s say we have the following HTML: <div class="divs"> <p>This is some text</p> <p>This is some text</p> </div> <div class="divs"> <p>This is some text</p> <p>This is some text</p> </div> <div class="divs"> <p>This is some […]

We can use the jQuery hover method to run a function when a user moves their mouse over a div and out of it. To do this we can add a function call to the hover() method. $("#div1").hover(function() { //The user has moved their mouse into #div1 }, function(){ //The user has moved their mouse […]

To get the previous sibling of an element we can use the jQuery prev() method. $("#div1").prev(); Let’s say we have the following HTML: <div id="top-div"> <div class="divs"> <p>This is paragraph one.</p> </div> <div class="divs"> <p>This is paragraph two.</p> </div> <div id="div3" class="divs"> <p>This is paragraph three.</p> </div> </div> If we want to change the background […]

To get the last child of a HTML element using jQuery, the simplest way is with the jQuery :last-child selector. $("#div p:last-child"); Let’s say I have the following HTML: <div id="div1"> <p>This is the first child of #div1</p> <p>This is the second child of #div1</p> <p>This is the third child of #div1</p> <p>This is the […]

To get the next sibling of an element we can use the jQuery next() method. $("#div1").next(); Let’s say we have the following HTML: <div id="top-div"> <div id="div1" class="divs"> <p>This is paragraph one.</p> </div> <div class="divs"> <p>This is paragraph two.</p> </div> <div class="divs"> <p>This is paragraph three.</p> </div> </div> If we want to change the background […]

To get the parent div of an element we can simply use the jQuery parent() method. $("#div1").parent(); Let’s say we have the following HTML: <div id="div1"> <div> <p>We will get the parent div of this paragraph.</p> </div> </div> If we want to change the background color of only the div that contains the paragraph above, […]

To change the font size of a paragraph using jQuery, we simply can use the css() method to change the styles of an element. $("#p1").css("font-size", "12px"); Let’s say we have the following HTML: <div id="div1"> <p>We will change the font size of this text.</p> </div> If we want to change the font size of the […]

To change the text color of a paragraph using jQuery, we simply can use the css() method to change the styles of an element. $("#p1").css("color", "green"); Let’s say we have the following HTML: <div id="div"> <p id="p1">We will change the color of this text.</p> </div> If we want to change the color of the paragraph […]

We can use the jQuery mouseleave method to run a function when a user moves their mouse out of a div. To do this we can add a function call to the mouseleave() method. $("#div1").mouseleave(function() { //The user has moved their mouse out of #div1 }); Another way this can be done is to use […]

We can use the jQuery mouseout method to run a function when a user moves their mouse out of a div. To do this we can add a function call to the mouseout() method. $("#div1").mouseout(function() { //The user has moved their mouse out of #div1 }); Another way this can be done is to use […]

We can use the jQuery mouseover method to run a function when a user moves their mouse over a div. To do this we can add a function call to the mouseover() method. $("#div1").mouseover(function() { //The user has moved their mouse into #div1 }); Another way this can be done is to use the .on() […]

We can use the jQuery mouseenter method to run a function when a user moves their mouse over a div. To do this we can add a function call to the mouseenter() method. $("#div1").mouseenter(function() { //The user has moved their mouse into #div1 }); Another way this can be done is to use the .on() […]

To get the URL of the current page we are on, we can use the JavaScript window.location object and get the href property of it. So the property window.location.href would return the current URL that you see at the top of your browser. var currURL = window.location.href; As we will see in the example below, […]

We can use the jQuery keydown method to run a function when a user types something into an input field. To do this we can add a function call to the keydown() method. $("input").keydown(function() { //This user has typed in the input field }); Another way this can be done is to use the .on() […]

We can use the jQuery keyup method to run a function when a user types something into an input field. To do this we can add a function call to the keyup() method. $("input").keyup(function() { //This user has typed in the input field }); Another way this can be done is to use the .on() […]

We can use jQuery to check if an input value is empty by using the val() method and the JavaScript length property. We simply get the value of the input using the val() method, and then check to see if its length is greater than 0. if ($("input").val().length > 0) { // input is NOT […]

While scrolling a webpage, we can use jQuery to get the scroll position of the top of the window using the scrollTop() method. $(window).scrollTop(); The scrollTop() method will return the top position of the element it is called on. In this case, we use it on the window object so it will return the top […]

To compare two dates using jQuery, the easiest way is with the JavaScript getTime() method. The getTime() method converts dates into the number of milliseconds since January 1st, 1970. var date1 = new Date('2019-01-01'); var date2 = new Date('2020-01-01'); if (date1.getTime() < date2.getTime()) { console.log("date2 is after date1"); } else { console.log("date1 is after date1"); […]

To get the height of a div using jQuery we can use two methods, the jQuery height() method or the outerHeight() method. $("#div1").height(); $("#div2").outerHeight(); The main difference between the height() and outerHeight() methods is that the outerHeight() method will return the same thing as the height method, plus any padding and/or border-width that might be […]

To add an id to a HTML div using jQuery, the simplest way is to use the attr() method. $("div").attr("id", "div1"); Let’s say I have the following HTML: <div class="class1"> <p class="p">This is a paragraph.</p> </div> If we want to add the id “div1” to the element with class “class1”, we can use the jQuery […]

We can use the jQuery insertBefore method to move an element before another element, or to insert a new element before another element. $("#div2").insertBefore("#div1"); Let’s say I have the following HTML: <div id="div1"> <p class="p1">This is paragraph 1</p> <p class="p2">This is paragraph 2</p> <p class="p3">This is paragraph 3</p> </div> If we want to move paragraph […]

We can use the jQuery insertAfter method to move an element after another element, or to insert a new element after another element. $("#div1").insertAfter("#div2"); Let’s say I have the following HTML: <div id="div1"> <p class="p1">This is paragraph 1</p> <p class="p2">This is paragraph 2</p> <p class="p3">This is paragraph 3</p> </div> If we want to move paragraph […]

We can use jQuery to disable a submit button on a form. The easiest way to do this is using the jQuery prop() method. $('button').prop('disabled', true); Here we can use the prop method on the button input, and change its disabled property to true. If you are using WordPress, don’t forget to change the $ […]

We can use jQuery to disable an input field on a form. The easiest way to do this is using the jQuery prop() method. $('input').prop('disabled', true); Here we can use the prop method on an input field, and change its disabled attribute to true. The disabled attribute is very similar to the readonly attribute, the […]

To get the source of an image, we can use jQuery to get the img src using the attr() method. $('#img1').attr('src'); The jQuery attr method will return the location of the file as a string. Say we have the following html: <img id="img1" src="http://theprogrammingexpert.com/wp-content/uploads/example-img1.png"> If we used the jQuery attr() method on the image, $('#img1').attr('src'); […]

We can use the jQuery appendTo method to move an element after all other children elements of their parent. $("#div1").appendTo("#div2"); Let’s say I have the following HTML: <div id="div1"> <p class="p1">This is paragraph 1</p> <p class="p2">This is paragraph 2</p> <p class="p3">This is paragraph 3</p> </div> If we want to move paragraph 1 after paragraph 3, […]

We can use the jQuery prepend() method to move an element before others. It works in a very similar way as the jQuery prependTo() Method. $("#div1").prepend($(".p3")); Let’s say I have the following HTML: <div id="div1"> <p class="p1">This is paragraph 1</p> <p class="p2">This is paragraph 2</p> <p class="p3">This is paragraph 3</p> </div> If we want to […]

We can use the jQuery prependTo() method to move an element before all other children elements of their parent. $("#div1").prependTo("#div2"); Let’s say I have the following HTML: <div id="div1"> <p class="p1">This is paragraph 1</p> <p class="p2">This is paragraph 2</p> <p class="p3">This is paragraph 3</p> </div> If we want to move paragraph 3 before paragraph 1, […]

To check if an element has class using jQuery, the simplest way is to use the hasClass() method. $('#element').hasClass('example-class'); Let’s say I have the following HTML: <div id="div"> <div id="div-to-check" class="check-me">This is a div we will check.</div> </div> If we want to check the div to see if it has the class “check-me”, we can […]

To remove all options from a select list using jQuery, the simplest way is to use the empty() method. $("#select-list").empty(); Let’s say I have the following HTML: <div id="div"> <select id="select-list"> <option value="0">Option 0</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> </div> If we want to remove all options from the select […]

To get the selected option value on change from a dropdown using jQuery, the simplest way is to use the jQuery change method, jQuery find() method, and jQuery val() method. $('#dropdown').on('change', function() { var selected_option_value = $(this).find(":selected").val(); }); To get the selected option text on change from a dropdown using jQuery, the simplest way is […]

To get the first child of a HTML element using jQuery, the simplest way is with the jQuery :first-child selector. $("#div p:first-child"); Let’s say I have the following HTML: <div id="div1"> <p>This is the first child of #div1</p> <p>This is the second child of #div1</p> <p>This is the third child of #div1</p> <p>This is the […]

To change label text using jQuery, the simplest way is to use the jQuery text() method: $("label").text("Changed label"); You can also use the jQuery html() method to change the text of a label. $("label").html("Changed label."); Let’s say I have the following HTML: <div id="div1"> <label id="label-name" for="firstname">First Name:</label> <input type="text" id="fname" name="firstname"> </div> If I […]

To change div text using jQuery, the simplest way is to use the jQuery text() method: $("#div").text("Changed Text"); If your div will contain html content, then you should use the jQuery html() method. $("#div").html("Changed <em>Text</em>"); Let’s say I have the following HTML: <div id="div">Hello!</div> If I want to change the text inside the div from […]

To replace the HTML inside a div using jQuery, the simplest way is to use the jQuery html() method: $("#div").html("Replaced <em>HTML Content</em>"); Let’s say I have the following HTML: <div id="div">This is some html in the div.</div> If I want to replace the html inside the div, I can use the jQuery html() method to […]

To generate a random number using jQuery, the simplest way is to use the Javascript random() method: var random = Math.random(); Random number generation with jQuery and Javascript is easy to do. All we need is the Javascript Math random() method. The Javascript Math random() method generates a number between 0 and 1 (including 0 […]

To change the inner HTML of an element using jQuery, the simplest way is to use the jQuery html() method: $("#div").html("Changed <em>Inner HTML Content</em>"); Let’s say I have the following HTML: <div id="div">Hello!</div> If I want to change the inner html inside the div from “Hi!” to “Bye!”, I can use the jQuery html() method […]

To get the nth-child of a HTML element using jQuery, the simplest way is with the jQuery :nth-child() selector. $("#div p:nth-child(n)"); Let’s say I have the following HTML: <div id="div"> <p>This is the first child of #div</p> <p>This is the second child of #div</p> <p>This is the third child of #div</p> <p>This is the fourth […]

To validate a phone number using jQuery, the simplest way is to use the jQuery inputmask() function. $("#phone-number-input").inputmask('(999)-999-9999') To use the jQuery inputmask() function, you will need to include an additional script on your page. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.6/jquery.inputmask.min.js"></script> Let’s say we have the following form. In the form, we have a phone number field for our […]

When a user is interacting with your website or app, one of the best ways to change elements on the screen based on certain click actions they make is by using the jQuery change() method. $("#div").change(function() { //change something based on what the user has selected or clicked }); Another way this can be done […]

To change text using jQuery, the simplest way is to use the jQuery text() method: $("#element").text("Changed Text"); If your element will contain html content, then you should use the jQuery html() method. $("#element").html("Changed <em>Text</em>"); Let’s say I have the following HTML: <div id="div1"> <p id="p">Hello!</p> </div> If I want to change the text inside the […]

To get an element by id using jQuery, the simplest way is using the jQuery id selector. $("#id-of-element") Let’s say I have the following HTML: <div id="div"> <p>This is a paragraph.</p> </div> To get the div element by id using jQuery, we just will use the jQuery id selector with the following Javascript code. This […]

To set a checkbox as checked with jQuery, the simplest way is to use the jQuery prop() method and to use the ‘checked’ property. $('#checkbox').prop('checked', true); If we want to uncheck a checkbox using jQuery, we can use the prop() method and set it to false: $('#checkbox').prop('checked', false); Let’s say I have the following HTML: […]

To toggle a class using jQuery, the simplest way is to use the jQuery toggleClass method. $("#div").toggleClass("example-class"); Let’s say I have the following HTML: <div id="div" class="example-class"> <p class="p">This is a paragraph.</p> </div> If we want to toggle the class “example-class” to #div, we can use the jQuery toggleClass() method to do this with the […]

To get the selected option value from a dropdown using jQuery, the simplest way is with the jQuery val() method. $("#dropdown :selected").val() To get the selected option text from a dropdown using jQuery, the simplest way is with the jQuery text() method. $("#dropdown :selected").text() Let’s say I have the following HTML: <div id="div"> <select id="select-list"> […]

To add a style to a HTML element using jQuery, the simplest way is to use the css() method. $("#div").css("background-color","green"); Let’s say I have the following HTML: <div id="div"> <p class="p">This is a paragraph.</p> </div> If we want to set a css property and add style to the div, we can use the jQuery css() […]

We can use jQuery to scroll to the top of the page by using the jQuery animate method along with the scrollTop property. $("html, body").animate({ scrollTop: 0 }, "slow"); Let’s say I have the following HTML: <div id="top-link">Top</div> To scroll to top of the page, we can use the jQuery animate method in the following […]

To check if an element exists using jQuery, the simplest way is to use the length property. if($("#div").length) { // if length is greater than 0 then the element exists Let’s say I have the following HTML: <div> <div id="div">Div 1</div> <div>Div 2</div> </div> To check if the div with id “div” exists, we can […]

To add an option to a select list using jQuery, the simplest way is to use the append() method. $("#select-list").append($('<option>', {value:1, text:'new-option-text'})); Let’s say I have the following HTML: <div id="div"> <select id="select-list"> <option value="0">Option 0</option> </select> </div> If we want to add an option to the select list, we can use the jQuery append() […]

To remove an attribute from a HTML element using jQuery, the simplest way is to use the removeAttr() method. $("#div").removeAttr("style"); Let’s say I have the following HTML: <div id="div" style="text-align:center;"> <p class="p">This is a paragraph.</p> </div> If we want to remove the attribute “style” from #div, we can use the jQuery removeAttr() method to do […]

To check if a checkbox is checked using jQuery, the simplest way is to use is() combined with “:checked”. $('#checkbox').is(':checked'); Let’s say I have the following HTML: <div id="div"> <input type="checkbox" name="checkbox-set-1" id="checkbox-1" value="Checkbox 1"> <input type="checkbox" name="checkbox-set-1" id="checkbox-2" value="Checkbox 2" checked> </div> If I want to see if the checkboxes are checked, we can […]

To remove a HTML element using jQuery, the simplest way is to use the remove() method. $("#div").remove(); Let’s say I have the following HTML: <div> <div id="div"></div> <div id="other-div"></div> </div> If we want to remove #div from the DOM, we can use the jQuery remove() method to do this with the following JavaScript code. $("#div").remove(); […]

We can use jQuery to remove a class from an element simply by using the removeClass() method. $("#div").removeClass("existing-class"); Let’s say I have the following HTML: <div id="div" class="existing-class"> <p class="p">This is a paragraph.</p> </div> If we want to remove the class “existing-class” from #div, we can use the jQuery removeClass() method to do this with […]

We can use jQuery to add a class (or multiple classes) to an HTML element by simply using the jQuery addClass() method. $("#div").addClass("new-class"); Let’s say I have the following HTML: <div id="div" class="existing-class"> <p class="p">This is a paragraph.</p> </div> If we want to add the class “new-class” to #div, we can use the jQuery addClass() […]

To change the image src using jQuery, the simplest way is to use the jQuery attr() method: $("#img-1").attr("src","anotherImg.jpg"); Let’s say I have the following HTML code: <div id="div1"> <img id="img-1" src="img.jpg"> </div> To change the image src of #img-1 from img.jpg to anotherImg.jpg, we will use the jQuery attr() method like in the following Javascript […]

To change button text using jQuery, the simplest way is to use the jQuery text() method: $("button").text("Submit"); You can also use the jQuery html() method to change button text. $("button").html("Submit"); Let’s say I have the following HTML form: <form action="/action_page.php" method="get" id="form1"> <label for="firstname">First Name:</label> <input type="text" id="fname" name="firstname"> <label for="lastname">Last Name:</label> <input type="text" id="lname" […]

To move an HTML element before another using jQuery the simplest way is to use the insertBefore() method. $("#div-2").insertBefore("#div-1"); Let’s say I have the following HTML: <div id="div1"> <p class="p1">This is paragraph 1</p> <p class="p2">This is paragraph 2</p> <p class="p3">This is paragraph 3</p> </div> If we want to move paragraph 3 before paragraph 1, then […]

To move an HTML element after another using jQuery the simplest way is to use the insertAfter() method. $("#div-1").insertAfter("#div-2"); Let’s say I have the following HTML: <div id="div1"> <p class="p1">This is paragraph 1</p> <p class="p2">This is paragraph 2</p> <p class="p3">This is paragraph 3</p> </div> If we want to move paragraph 1 after paragraph 3, then […]

To change text in a span using jQuery, the simplest way is to use the jQuery text() method: $("#div1 span").text("Changed Text"); If your span will contain html content, then you should use the jQuery html() method. $("#div1 span").html("Changed <strong>Text</strong>"); Let’s say I have the following HTML: <div id="div1"> <p>Today is <span>November</span> 3rd.</p> </div> If I […]

Changing the background color of a div using jQuery is done simply by using the css() method. $("#div").css("background-color", "green"); Let’s say we have the following HTML: <div id="div"> <p>This paragraph is in a div that we need to change the color of.</p> </div> If we want to change the background color of this div to […]

The example below shows how onclick and $(this) work together. When using jQuery, we can use the click() method to make things even easier. $("#div").click(function(){ $(this).css("background-color", "green"); // Would change the background color of element #div to green $(this).hide(); // Results in the element #div being hidden }); Another way this can be done is […]

There are a couple of ways we can use jQuery to hide a div. The simplest way is to use the jQuery hide() method. $("#div1").hide(); We can also use the jQuery css() method to hide a div. $("#div1").css("display", "none"); Hiding a div using jQuery is very easy using the hide() method. Let’s say I have […]

There are a couple of ways we can use jQuery to show a div. The simplest way is to use the jQuery show() method. $("#div1").show(); We can also use the jQuery css() method to show a div. $("#div1").css("display", "block"); Let’s say we have the following html: <div id="div1">This is a hidden div that I can […]