To use jQuery selectors on custom data attributes, you can use contains, starts with, and ends with for the HTML data attributes.ExampleOther than that, you can try to run the following code to learn how to use jQuery selectors on custom data attributes using HTML5:Live Demo $(document).ready(function(){   //stored selector   var group = $('ol[data-group="Subjects"]');   // starts with M   var maths = $('[data-subject^="M"]',group).css('color','green');   // contains the string graph   var graph = $('[data-subject*="graph"]',group).css('color','blue'); });   Maths   Science   Geography   History

For getting the id that begins or ends with a particular string in jQuery selectors, you shouldn’t use the wildcards $('#name*'), $('#name%'). Instead use the characters ^and $. The ^ is used is used to get all elements starting with a particular string. The $ is used is used to get all elements ending with a particular string.ExampleYou can try to run the following code to learn how to get id beginning and endingwith a particular string.Live Demo $(document).ready(function(){   $("[id$=new1]").css("background-color", "yellow");   $("[id^=myid]").css("background-color", "green"); }); Java HTML Ruby C++

To get the elements with an ID that ends with a given string, use attribute selector with $ character.ExampleYou can try to run the following code to learn how to to use jQuery selector for the elements with an ID that ends with a given string. Let’s say we are going for elements with an ID ending with the string “new1”.Live Demo $(document).ready(function(){   $("[id$=new]").css("background-color", "yellow");     }); Java HTML Ruby

To get the children of the $(this) selector in jQuery, use the find() method with each() method. Let us first see how to add jQuery:ExampleYou can try to run the following code to get the children of the $(this) selector:Live Demo           jQuery Example                      // Set the click handler on your div          $("body").off("click", "#mydiv").on("click", "#mydiv", function() {                      // Find the image using.find() and .each()            $(this).find("img").each(function() {                         var img = this;                      });          });                                #mydiv {             vertical-align: middle;             background-color: #Ffff76;             cursor: pointer;             padding: 20px;          }                                        

Wildcard or regular expressions can also be used with jQuery selector for id of element.ExampleYou can try to run the following code to use wildcard or regular expressions with jQuery selector:Live Demo $(document).ready(function(){    $("[id^=sub]").css("background-color", "green"); }); Java HTML Ruby

jQuery Attribute selector is used to select elements with the specified attribute and value. You can easily use it with a period (.) or a hash (#).ExampleYou can try to run the following code to learn how to use jQuery selector with a period:Live Demo $(document).ready(function(){    $( "div[myattr*='.']" ).css("background-color", "yellow");   }); Java HTML Ruby

To remove disabled attribute using jQuery, use the removeAttr() method. You need to first remove the property using the prop() method. It will set the underlying Boolean value to false.ExampleYou can try to run the following code to learn how to remove disabled attribute using jQuery:Live Demo $(document).ready(function(){     $('.disabledCheckboxes').prop("disabled", true);     $('.disabledCheckboxes').removeAttr("disabled");     $(document).ready(function(){         $('button').on('click', function() {           if (this.hasAttribute("disabled")) {              alert('The disabled attribute exists')           } else {              alert('The disabled attribute does not exist')           }         })     });  });    Result

To use # in jQuery attribute selector, include # under *= . This will find the attribute with #.ExampleYou can try to run the following code to learn how to use # in jQuery attribute selector:Live Demo     $(document).ready(function()  {        $( "div[myattr*='#']" ).css("background-color", "yellow");     }); Java HTML Ruby

Use the checked attribute to set the checkbox with jQuery. Also, the prop() method is used to get the property value.ExampleYou can try to run the following code to learn how to set checked for a checkbox:Live Demo   jQuery Example     b {      color: green;   }       Check/ Uncheck this checkbox   $( "input" ).change(function() {   var $input = $( this );   $( "p" ).html(     ".attr( \"checked\" ): " + $input.attr( "checked" ) + "" +     ".prop( \"checked\" ): " + $input.prop( "checked" ) + "" +     ".is( \":checked\" ): " + $input.is( ":checked" ) + "" ); }).change();  

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