- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 10711 Articles for Web Development
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
200 Views
To get the value of html attribute, use the val() method.ExampleYou can try to run the following code to learn how to use jQuery to get the value of HTML attribute of elements:Live Demo $(document).ready(function() { $("#buttonSet").click(function () { $("#buttonGet").removeAttr('disabled'); }); $("#buttonGet").click(function () { $("#result").html( $("#txtBox").val() + "" + $("input:radio[name=rd]:checked").val() ); }); }); Name Gender Male Female
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
904 Views
Use the attr() method to add an attribute into specific HTML tags in jQuery.ExampleYou can try to run the following code to learn how to add an attribute into specific HTML tags:Live Demo $(document).ready(function(){ $(document).ready(function(){ $("button.button1").attr("myid", "myvalue"); $('button').on('click', function() { if (this.hasAttribute("myid")) { alert('True: The new attribute added successfully.') } else { alert('False') } }) }); }); Button 1
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
94 Views
To find a certain attribute exists or not for a selected item in jQuery, use the hasAttribute() method.ExampleYou can try to run the following code to learn how to find a certain attribute exists or not:Live Demo $(document).ready(function(){ $('button').on('click', function() { if (this.hasAttribute("myattr")) { alert('True - myattr attribute exists') } else { alert('False - myattr attribute does not exist') } }) }); Button One Button Two
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
385 Views
The *= operator is used to filter elements for attribute containing the given value.ExampleYou can try to run the following code to learn how to *= operator to filter attributes on the basis of text:Live Demo $(document).ready(function(){ $( "div[myattr*='subject']" ).css("background-color", "yellow"); }); Java HTML Ruby
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
430 Views
To find an element based on a data-attribute value using jQuery is quite easy.ExampleYou can try to run the following code to learn how to find an element based on a data-attribute value using jQuery:Live Demo $(document).ready(function() { $('[data-slide="2"]').addClass('demo'); }); .demo { font-size: 200%; color: green; } One Two Three
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
136 Views
Use comma to work with OR operation in jQuery Attribute Selector.ExampleYou can try to run the following code to learn how to use OR operation in jQuery attribute selector:Live Demo $(document).ready(function(){ $('[myattr=demo][myid="sub1"],[myattr=demo][myid="sub3"]').css("background-color", "yellow"); }); Java HTML Ruby
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
2K+ Views
Use jQuery hasAttribute() method to see if there is an attribute for an element.ExampleYou can try to run the following code to learn how to use hasAttribute() method:Live Demo $(document).ready(function(){ $('button').on('click', function() { if (this.hasAttribute("style")) { alert('True') } else { alert('False') } }) }); Check for attribute in the button element Button Button 2
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
866 Views
To make jQuery attribute selector case insensitive, create two buttons and manipulate the input with attribute selector.ExampleYou can try to run the following code to make jQuery attribute selector case insensitive:Live Demo $(document).ready(function(){ $("button").click(function(){ $( "input[name*='myclass' i]" ).css("background-color", "yellow"); }); $("#insensitive").click(function(){ $( "input[name*='myclass' i]" ).css("background-color", "blue"); }); // myclass input blue $("#sensitive").click(function(){ $( "input[name*='myclass']" ).css("background-color", "blue"); }); }); Case insensitive Case sensitive
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
3K+ Views
Yes, it is possible to pass a variable into a jQuery attribute-contains selector. The [attribute*=value] selector is used to select each element with a specific attribute and a value containing a string.ExampleYou can try to run the following code to learn how to pass a variable into a jQuery attribute-contains selector:Live Demo $(function() { var testString = "vp-485858383"; $('[data-vp*="id: ' + testString + '"]').css('color', 'blue'); }); Hello World
![Amit D](https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg)
319 Views
The switchClass() is used to switch class from an element. Use it, to replace one class with another. Add jQuery UI library to the web page to use switchClass().ExampleYou can try to run the following code to learn how to work with switch class −Live Demo $(document).ready(function(){ $("a").click(function(){ $("a.active").removeClass("active"); $(this).addClass("active"); }); }); ... Read More