Found 730 Articles for JQuery

jQuery :contains() Selector

AmitDiwan
Updated on 05-Nov-2019 07:03:51

505 Views

The :contain() selector in jQuery is used to select elements containing the specified text.SyntaxThe syntax is as follows −$(":contains(text)")Here, the parameter text is the text to find. The same elements are selected with the specified text.ExampleLet us now see an example to implement the :contains() selector −    .one {       color: brown;       background-color: orange;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){       $("p:contains(the)").addClass("one");    }); Examination Timings: 10AM - 1PM The examination hall details would be emailed to the students. OutputThis will produce the following output −

jQuery :checked Selector

AmitDiwan
Updated on 05-Nov-2019 07:00:05

334 Views

The :checked selector in jQuery is used to look for all the checked radio button or checkboxes and selects them.SyntaxThe syntax is as follows −$(":checked")ExampleLet us now implement the :checked selector in jQuery − Favourite Subject Maths: English    $( "input" ).on( "click", function() {       $( "#content" ).html( $( "input:checked" ).val() + " is the favourite subject" );    }); OutputThis will produce the following output −Select “Maths” radio button above −Now, select “English” radio button −

jQuery :checkbox Selector

AmitDiwan
Updated on 05-Nov-2019 06:56:05

439 Views

The jQuery :checkbox selector is used to select input elements with type checkbox.SyntaxThe syntax is as follows −$(":checkbox")ExampleLet us see an example to implement the :checkbox selector in jQuery −    $(document).ready(function(){       $(":checkbox").wrap("");    }); Fill the form ID: Rank: Fav. Subjects: Maths: English OutputThis will produce the following output −ExampleLet us see another example −    $(document).ready(function(){       $(":checkbox").wrap("");    }); Hobbies Player Name: Fav Sports Football: Cricket OutputThis will produce the following output −

jQuery :button Selector

AmitDiwan
Updated on 05-Nov-2019 06:54:51

496 Views

The jQuery :button selector is used to select button and input elements with type button.ExampleLet us now see an example to implement the :button selector −    $(document).ready(function(){       $(":button").css("border-width", "5px");    }); Username: Password: Demo Button OutputThis will produce the following output. The border of the “Demo Button” is changed using the :button selector −ExampleLet us now see another example −    .one {       color: white;       background-color: gray;       font-size: 16px;       border: 2px yellow dashed;    }    $(document).ready(function(){       $(":button").addClass( "one" );    }); ID: Rank: Demo Button OutputThis will produce the following output −

Bootstrap Collapsible list group

George John
Updated on 12-Jun-2020 19:18:25

4K+ Views

To create a collapsible list group, use the panel-collapse property with list-group property.ExampleThe list-group property lists items using the list-group-item property −Live Demo           Bootstrap Example                                          Questions/ Answers          Click below to learn about the technologies for which we provide Interview Questions.                                                                              Info                                                                                          Java                      PHP                      C++                      HTML5                      jQuery                                                                  

Bootstrap Labels

Samual Sam
Updated on 12-Jun-2020 18:22:09

175 Views

Labels are great for offering counts, tips, or other markups for pages.ExampleUse class .label to display labels and try to run the following codeLive Demo           Bootstrap Example                                 Tutorials                       150                       Quiz                       90                    

Get Bootstrap Jumbotron of full width and without rounded corners

karthikeya Boyini
Updated on 12-Jun-2020 17:48:04

345 Views

To get a jumbotron of full width, and without rounded corners use the .jumbotron class outside all .container classes and instead add a .container within.ExampleYou can try to run the following code to implement thisLive Demo           Bootstrap Example                                                       Welcome to landing page!             Example for jumbotron.                                               Click for more                                                

Hidden Bootstrap class

Anvi Jain
Updated on 21-Nov-2023 21:14:35

2K+ Views

To hide a Bootstrap class, use the .hidden class.Example You can try to run the following code to hide a class −           Bootstrap Example                                                       This class is visible.                                 This is an example for hide class. This will be hidden.                    

Bootstrap table-striped class

Nitya Raut
Updated on 12-Jun-2020 17:36:43

270 Views

To implement the table-striped class in Bootstrap, you can try to run the following code:ExampleLive Demo           Bootstrap Table                                                Footballer Rank                                      Footballer                Rank                Country                                

Bootstrap navbar-inverse class

Vrundesha Joshi
Updated on 12-Jun-2020 17:21:21

2K+ Views

To create an inverted navbar with a black background and with white text, simply add the .navbar-inverse class to the .navbar class.ExampleYou can try to run the following code to implement navbar-inverse class −Live Demo           Bootstrap Example                                                       TutorialsPoint                                                iOS                SVN                                                        Java                                                                                jmeter                      EJB                      Jasper Report                                            Separated link                                            One more separated link                                                                  

Advertisements