Use hasClass Method in jQuery

David Meador
Updated on 14-Feb-2020 05:26:57

167 Views

The hasClass() method is used to check if an element has a class. You can try to run the following code to learn how to use hasClass() method in jQuery −ExampleLive Demo                          $(document).ready(function(){              $("button").click(function(){                  alert($("h1").hasClass("myclass"));              });          });                      .myclass {            color: blue;          }                     Heading       This is demo text.       Check: The h1 element has 'myclass' class?    

Get and Set Form Element Values with jQuery

David Meador
Updated on 14-Feb-2020 05:24:52

12K+ Views

To get a form value with jQuery, you need to use the val() function. To set a form value with jQuery, you need to use the val() function, but to pass it a new value.ExampleYou can try to run the following code to learn how to get and set form element values with jQuery −Live Demo                          $(document).ready(function(){                        $("#buttonSet").click(function () {                  $("#txtBox").val("Amit");                  $("input:radio").val(["male"]);                  $("#buttonGet").removeAttr('disabled');             });              $("#buttonGet").click(function () {                 $("#result").html(                     $("#txtBox").val() + "" +                     $("input:radio[name=rd]:checked").val()                 );             });          });                     Name                   Gender       Male       Female                            

Get Closest Input Value from Clicked Element with jQuery

David Meador
Updated on 14-Feb-2020 05:23:03

9K+ Views

To get the closest input value from clicked element with jQuery, follow the steps −You need to use closest to find the closest ancestor matching the given.Now, find the input with the given name using the attribute equals selector.The last step is to use val() metjod to retrieve the value of the input.Let’s first see how to add jQuery −ExampleYou can try to run the following code to get closest input value from clicked element with jQuery −Live Demo                          $(document).ready(function(){           ... Read More

Get Input Value of First Matched Element Using jQuery

David Meador
Updated on 14-Feb-2020 05:21:14

1K+ Views

To get the input value of the first matched element using jQuery, use the .first() method.ExampleYou can try to run the following code to get the input value of the first matched element using jQuery −Live Demo                          $(document).ready(function(){            $( "li" ).first().css( "background-color", "blue" );          });                              One          Two          Three          Four          

Difference Between Text and HTML in jQuery

David Meador
Updated on 14-Feb-2020 05:18:33

558 Views

jQuery comes with a lot of methods to manipulate attributes. These are DOM related methods. The attributes include, text() and html() too,text() – This method sets or returns the text content of elements selected.html() – This method sets or returns the content of elements selected.ExampleYou can try to run the following code to learn how to manipulate attributes with text() and html() methods −Live Demo $(document).ready(function(){    $("#button1").click(function(){       alert("Using text()- " + $("#demo").text());    });    $("#button2").click(function(){       alert("Using html()- " + $("#demo").html());    }); }); This is demo text. Text HTML

Get Text Contents of All Matched Elements Using jQuery

David Meador
Updated on 14-Feb-2020 05:15:22

447 Views

To get the text contents of all matched elements using jQuery, use the text() method. You can try to run the following code to get text contents of all matched elements using jQuery −ExampleLive Demo           The Selector Example                          $(document).ready(function() {            $("#button1").click(function(){              var content = $("#pid2").text();              alert(content);            });          });                            .red {          color:red;        }        .green {          color:green;        }                         This is first paragraph.       This is second paragraph.       Get    

Get innerHTML of a DIV Tag using jQuery

Ricky Barnes
Updated on 14-Feb-2020 05:11:51

4K+ Views

To get the innerHTML of a div tag in jQuery, use the class with innerHTML. You can try to run the following code to learn how to get innerHTML of a div tag using jQuery −ExampleLive Demo  $(document).ready(function(){    $("#button1").click(function(){      var one = $('.a').innerHTML;      alert(one);    });  });    Value one    Get

Replace innerHTML of a div Tag using jQuery

Ricky Barnes
Updated on 14-Feb-2020 05:10:41

3K+ Views

To replace innerHTML of a div tag, use the html() method. The dot notation calls the html() method to replace the inner html with  the parameter placed between, i.e. Demo here. The html() here modifies the .innerhtml.ExampleYou can try to run the following code to to replace innerHTML of a div tag using jQuery −Live Demo          $( document ).ready(function() {        $('.myclass').html('Demo');      });  Hello World

HTML Method in jQuery

Ricky Barnes
Updated on 14-Feb-2020 05:09:35

187 Views

The html() method sets or returns the content of elements selected. jQuery has a some methods to manipulate attributes, including the html() method. These are DOM related methods. The attributes include, text() – This method sets or returns the text content of elements selected.html() – This method sets or returns the content of elements selected.val() – This method sets or returns the value of form fields.ExampleYou can try to run the following code to learn how to work with html() method −Live Demo $(document).ready(function(){     $("#button1").click(function(){         alert("Using text- " + $("#demo").text()); ... Read More

Toggle Between Two Classes in jQuery

Ricky Barnes
Updated on 14-Feb-2020 05:07:17

844 Views

To toggle between two classes in jQuery, use the addClass() and removeClass() method. You can try to run the following code to toggle between two classes in jQuery −ExampleLive Demo                          $(document).ready(function(){           $("a").click(function(){              $("a.active").removeClass("active");              $(this).addClass("active");           });          });                      .active {             font-size: 22px;            }                     One       Two       Click any of the link above and you can see the changes.    

Advertisements