- jQuery Tutorial
- jQuery - Home
- jQuery - Overview
- jQuery - Basics
- jQuery - Syntax
- jQuery - Selectors
- jQuery - Events
- jQuery - Attributes
- jQuery - AJAX
- jQuery DOM Manipulation
- jQuery - DOM
- jQuery - Add Elements
- jQuery - Remove Elements
- jQuery - Replace Elements
- jQuery CSS Manipulation
- jQuery - CSS Classes
- jQuery - Dimensions
- jQuery - CSS Properties
- jQuery Traversing
- jQuery - Traversing
- jQuery - Traversing Ancestors
- jQuery - Traversing Descendants
- jQuery References
- jQuery - Utilities
- jQuery Plugins
- jQuery - Plugins
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery Useful Resources
- jQuery - Questions and Answers
- jQuery - Quick Guide
- jQuery - Useful Resources
- jQuery - Discussion
jQuery - HTML/CSS Reference
Applying Styles
The addClass( classes ) method can be used to apply defined style sheets onto all the matched elements. You can specify multiple classes separated by space.
Example
Following is a simple example which sets class attribute of a para <p> tag −
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("em").addClass("selected"); $("#myid").addClass("highlight"); }); </script> <style> .selected { color:red; } .highlight { background:yellow; } </style> </head> <body> <em title = "Bold and Brave">This is first paragraph.</em> <p id = "myid">This is second paragraph.</p> </body> </html>
This will produce following result −
Attribute Methods
Following table lists down few useful methods which you can use to manipulate attributes and properties −
Sr.No. | Methods & Description |
---|---|
1 | attr( properties )
Set a key/value object as properties to all matched elements. |
2 | attr( key, fn )
Set a single property to a computed value, on all matched elements. |
3 | removeAttr( name )
Remove an attribute from each of the matched elements. |
4 | hasClass( class )
Returns true if the specified class is present on at least one of the set of matched elements. |
5 | removeClass( class )
Removes all or the specified class(es) from the set of matched elements. |
6 | toggleClass( class )
Adds the specified class if it is not present, removes the specified class if it is present. |
7 | html( )
Get the html contents (innerHTML) of the first matched element. |
8 | html( val )
Set the html contents of every matched element. |
9 | text( )
Get the combined text contents of all matched elements. |
10 | text( val )
Set the text contents of all matched elements. |
11 | val( )
Get the input value of the first matched element. |
12 | val( val )
Set the value attribute of every matched element if it is called on <input> but if it is called on <select> with the passed <option> value then passed option would be selected, if it is called on check box or radio box then all the matching check box and radiobox would be checked. |
Examples
Similar to above syntax and examples, following examples would give you understanding on using various attribute methods in different situation −
Sr.No. | Selector & Description |
---|---|
1 | $("#myID").attr("custom") This would return value of attribute custom for the first element matching with ID myID. |
2 | $("img").attr("alt", "Sample Image") This sets the alt attribute of all the images to a new value "Sample Image". |
3 | $("input").attr({ value: "", title: "Please enter a value" }); Sets the value of all <input> elements to the empty string, as well as sets The jQuery Example to the string Please enter a value. |
4 | $("a[href^=https://]").attr("target","_blank") Selects all links with an href attribute starting with https:// and set its target attribute to _blank. |
5 | $("a").removeAttr("target") This would remove target attribute of all the links. |
6 | $("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); This would modify the disabled attribute to the value "disabled" while clicking Submit button. |
7 | $("p:last").hasClass("selected") This return true if last <p> tag has associated classselected. |
8 | $("p").text() Returns string that contains the combined text contents of all matched <p> elements. |
9 | $("p").text("<i>Hello World</i>") This would set "<I>Hello World</I>" as text content of the matching <p> elements. |
10 | $("p").html() This returns the HTML content of the all matching paragraphs. |
11 | $("div").html("Hello World") This would set the HTML content of all matching <div> to Hello World. |
12 | $("input:checkbox:checked").val() Get the first value from a checked checkbox. |
13 | $("input:radio[name=bar]:checked").val() Get the first value from a set of radio buttons. |
14 | $("button").val("Hello") Sets the value attribute of every matched element <button>. |
15 | $("input").val("on") This would check all the radio or check box button whose value is "on". |
16 | $("select").val("Orange") This would select Orange option in a dropdown box with options Orange, Mango and Banana. |
17 | $("select").val("Orange", "Mango") This would select Orange and Mango options in a dropdown box with options Orange, Mango and Banana. |