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 […]
jQuery
Using jQuery to Add CSS Important Style
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> […]
Using jQuery to Wait 1 Second Before Executing Code
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) […]
jQuery Display None
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 […]
Using jQuery to Set a Radio Button to Checked
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: […]
Using jQuery to Get the Value of a Radio Button
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. […]
Using jQuery to Set Select to the First Option
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 […]
How to Clear an Input Field Using jQuery
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 […]
Using jQuery to Get the Border Width of an Element
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; […]
Using jQuery to Get the Margin of an Element
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: […]
Get Padding of an Element Using jQuery
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; […]
Using jQuery to Remove Background Color
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 […]
Using jQuery to Select Multiple Ids
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 […]
Using jQuery to Add Required Attribute to Input Field
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 […]
Using jQuery to Increment Value on Click
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 […]
Using jQuery to Count Children of an Element
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 […]
How to use jQuery to Make an Input Field readonly
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 […]
Using jQuery to Append Text to textarea Field
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 + " " + […]
Examples of Text Animations Using jQuery
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 […]
jQuery mousedown – An Interactive Example of the jQuery mousedown Method
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 […]
jQuery mouseup – An Interactive Example of the jQuery mouseup Method
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 […]
How to Use jQuery to Clear a textarea Field
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 […]
Using jQuery to Get Text Length
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 […]
Using jQuery to Empty the Contents of an HTML Element
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 […]
Using jQuery to Set Visibility
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 […]
Using jQuery to Detect Window Resize
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 […]
jQuery contains – How to Check if a Paragraph Contains Specific Text
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, […]
jQuery append – Insert Element at End of Another Element
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, […]
jQuery after – Insert HTML After Another Element
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 […]
jQuery before – Insert HTML Before Another Element
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 […]
Using jQuery to Select Multiple Classes
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 […]
Using jQuery to Replace a Class
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 […]
Using jQuery to see if URL Contains Specific Text
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 […]
Using jQuery to Hide Element by Class
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 […]
Using jQuery to Add a Sibling to an Element
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 […]
Using jQuery to Get the Position of Element
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 […]
jQuery delay – How to Delay the Start of a Method
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 […]
Using jQuery to Scroll to Div
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
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 of a div Using jQuery
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 […]
How to Uncheck All Checkboxes in jQuery
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 […]
How to Set All Checkbox to Checked in jQuery
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 […]
Using jQuery to Get the Bottom Position of Element
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 […]
jQuery text – Set the text of an HTML Element
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 […]
Using jQuery to Get the Top Position of Element
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 […]
jQuery has – Check if an Element Has Other Elements
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 […]
jQuery hasClass – How to Check if an Element Has a Certain Class
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 […]
jQuery siblings – Get the Sibling Elements of a Div
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 […]
jQuery parent – Get the Parent Element of a Div
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 […]
jQuery prev – Get the Previous Element of a Div
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 […]
jQuery next – Get the Next Element of a Div
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 […]
Toggle the Visibility of an Element Using jQuery
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 […]
How to Use jQuery to Animate the Font Size of a Paragraph
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 […]
Using jQuery to Delete an Element
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. […]
Using jQuery to Remove the Id of a Div
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 […]
Using jQuery to Set the Id of a Div
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 […]
Using jQuery to Change the Id of a Div
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> […]
jQuery clone – Making a Copy of an Element
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 […]
Using jQuery to Show and Hide a Div
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() […]
Using jQuery to Set the Width of a Div
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 […]
jQuery width() – Using jQuery to Get the Width of a Div
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 […]
jQuery slideUp – How to Slide Up and Hide an Element Using jQuery
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 […]
jQuery slideDown – How to Slide Down and Show an Element Using jQuery
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 […]
jQuery Opacity – How to Change the Opacity of an Element
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 […]
jQuery fadeOut – Fading Out Element in HTML
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 […]
jQuery fadeIn – Fading In Element in HTML
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, […]
How to Use jQuery to Check if an Element is Visible
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 […]
Using the jQuery fadeTo Method to Change the Opacity of an Element
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 […]
Set the Height of a Div Using jQuery
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 […]
Using jQuery to get Textarea Value
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 […]
Using jQuery to Capitalize the First Letter of a String
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. […]
Using jQuery to Convert a String to Uppercase
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 […]
Using jQuery to Convert a String to Lowercase
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 […]
jQuery rotate – How to Rotate an Image using jQuery
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 […]
jQuery focus – Changing Form Styles with the focus() Method
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" […]
jQuery focusout – How to Use the focusout() Method on an HTML Form
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 […]
jQuery focusin – Changing the Background Color with the focusin() Method
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" […]
jQuery blur – How to Use the blur() Method on an HTML Form
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 […]
jQuery val Method – Get the Value from an Input Field
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 […]
jQuery last() – Get the Last Element
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 […]
jQuery first() – Get the First Element
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 […]
jQuery hover – An Interactive Example of the hover Method
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 […]
Using jQuery to Get the Previous Sibling of an Element
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 […]
jQuery Get Last Child
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 […]
Using jQuery to Get the Next Sibling of an Element
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 […]
Using jQuery to Get the Parent Div of an Element
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, […]
Using jQuery to Change the Font Size of a Paragraph
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 […]
Using jQuery to Change the Text Color of a Paragraph
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 […]
jQuery mouseleave – An Interactive Example of the mouseleave Method
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 […]
jQuery mouseout – An Interactive Example of the mouseout Method
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 […]
jQuery mouseover – An Interactive Example of the mouseover Method
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() […]
jQuery mouseenter – An Interactive Example of the mouseenter Method
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() […]
Using jQuery to Get the Current URL
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, […]
jQuery keydown Method
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() […]
jQuery keyup Method
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() […]
Check if Input is Empty Using jQuery
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 […]
Get the Window Scroll Position Using jQuery
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 […]
jQuery Compare Dates
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"); […]
Get the Height of a Div Using jQuery
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 […]
Using jQuery to Add id to div
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 […]
jQuery insertBefore – Insert Element Before Another Element
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 […]
jQuery insertAfter – Insert Element After Another Element
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 […]
Using jQuery to Disable a Button
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 $ […]
Using jQuery to Disable Input
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 […]
jQuery get img src – Get the Source of an Image Using jQuery
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'); […]
jQuery appendTo – Insert Element As Last Child
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, […]
Using jQuery prepend to Insert Element As First Child
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 […]
jQuery prependTo – Insert Element As First Child
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, […]
Using jQuery to Check if Element Has Class
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 […]
Using jQuery to Remove All Options From Select
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 […]
Using jQuery to Get Value of Select On Change
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 […]
jQuery get first child
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 […]
Using jQuery to Change Label Text
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 […]
Using jQuery to Change Div Text
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 […]
Using jQuery to Replace HTML Inside Div
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 […]
jQuery Random Number Generator Between Two Numbers
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 […]
Using jQuery to Change Inner HTML
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 […]
Get nth Child with jQuery
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 […]
Input Mask Phone Number Using jQuery
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 […]
jQuery on change
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 […]
Using jQuery to Change Text of HTML Element
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 […]
Using jQuery to Get Element by ID
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 […]
How to Set Checkbox Checked With jQuery
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: […]
Using jQuery to Toggle Class of HTML Element
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 […]
Get Selected Option from Dropdown Using jQuery
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"> […]
Add Style to HTML Element Using jQuery
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() […]
Using jQuery to Scroll to Top
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 […]
How to Check if Element Exists Using jQuery
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 […]
Using jQuery to Add Option to Select List
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() […]
Using jQuery to Remove Attribute from HTML Element
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 […]
Using jQuery to Check if Checkbox is Checked
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 […]
How to Use jQuery to Remove Element
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(); […]
Using jQuery to Remove Class from an HTML Element
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 […]
Using jQuery to Add Class to HTML Element
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() […]
Using jQuery to Change Image src
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 […]
How to Use jQuery to Change Button Text
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" […]
Using jQuery to Move Element Before Another
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 […]
Using jQuery to Move Element After Another
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 […]
How to Use jQuery to Change Span Text
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 […]
Using jQuery to Change Background Color
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 […]
onclick this jQuery
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 […]
Using jQuery to Hide a Div
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 […]
Using jQuery to Show a Div
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 […]
How to Filter a List of Divs with a Text Input Bar Using Javascript
Being able to add filtering functionality to lists using Javascript and jQuery can be very beneficial for the user experience of a web page. It is very common for a page to have a list of products, events, blogs, etc. which the user could want to sort or filter – depending on the purpose of […]
Sort List of Divs with Data Attribute with Radio Buttons Using Javascript
We can use Javascript and jQuery to sort a list of divs very easily by using the sort() Javascript function. Being able to add sorting functionality to lists using Javascript and jQuery can be very beneficial for the user experience of a web page. It is very common for a page to have a list […]