Found 10483 Articles for Web Development

How to pass a variable into a jQuery attribute-contains selector?

Amit D
Updated on 06-Dec-2019 11:09:32

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

What is the difference between switchClass() and toggleClass() methods in jQuery?

Amit D
Updated on 14-Feb-2020 05:30:24

436 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

How to use removeClass() method in jQuery?

Amit D
Updated on 14-Feb-2020 05:28:00

121 Views

To add a class on click of anchor tag using jQuery, use the addClass() method. To remove a class, use the removeClass() method.ExampleYou can try to run the following code to learn how to remove a class using jQuery −Live 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.    

How to use hasClass() method in jQuery?

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

146 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?    

How to 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                            

How to get the 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

How to get the input value of the 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          

What is the difference between text() and html() in jQuery?

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

514 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

How to get text contents of all matched elements using jQuery?

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

423 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    

How to get content of div which contains JavaScript script blocks?

Ricky Barnes
Updated on 27-Jun-2022 06:49:00

3K+ Views

To get the content of div which contains JavaScript script blocks, use the html() method. You can try to run the following code to get the content. With html(), get the content of div, which includes the JavaScript script.ExampleLive Demo                            $(document).ready(function(){            $("#button1").click(function(){              alert($("#demo").html());              });          });                                This is demo text.                       This is JavaScript                        Get    

Advertisements