| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Target Elements by Class Using jQuery | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Target Elements by Class Using jQuery
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | - You can find elements with the jQuery class selector. // $(.className) | 
					
						
							|  |  |  | - In this example, It allows you to select elements with the class ".well"  | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Solution
 | 
					
						
							|  |  |  | ```javascript | 
					
						
							|  |  |  | <script> | 
					
						
							|  |  |  |   $(document).ready(function() { | 
					
						
							|  |  |  |     $(".well").addClass("animated bounce"); | 
					
						
							|  |  |  |     $(".well").addClass("shake"); | 
					
						
							|  |  |  |   }); | 
					
						
							|  |  |  | </script> | 
					
						
							| 
									
										
										
										
											2019-03-09 03:34:01 +05:30
										 |  |  | 
 | 
					
						
							|  |  |  | <div class="container-fluid"> | 
					
						
							|  |  |  |   <h3 class="text-primary text-center">jQuery Playground</h3> | 
					
						
							|  |  |  |   <div class="row"> | 
					
						
							|  |  |  |     <div class="col-xs-6"> | 
					
						
							|  |  |  |       <h4>#left-well</h4> | 
					
						
							|  |  |  |       <div class="well" id="left-well"> | 
					
						
							|  |  |  |         <button class="btn btn-default target" id="target1">#target1</button> | 
					
						
							|  |  |  |         <button class="btn btn-default target" id="target2">#target2</button> | 
					
						
							|  |  |  |         <button class="btn btn-default target" id="target3">#target3</button> | 
					
						
							|  |  |  |       </div> | 
					
						
							|  |  |  |     </div> | 
					
						
							|  |  |  |     <div class="col-xs-6"> | 
					
						
							|  |  |  |       <h4>#right-well</h4> | 
					
						
							|  |  |  |       <div class="well" id="right-well"> | 
					
						
							|  |  |  |         <button class="btn btn-default target" id="target4">#target4</button> | 
					
						
							|  |  |  |         <button class="btn btn-default target" id="target5">#target5</button> | 
					
						
							|  |  |  |         <button class="btn btn-default target" id="target6">#target6</button> | 
					
						
							|  |  |  |       </div> | 
					
						
							|  |  |  |     </div> | 
					
						
							|  |  |  |   </div> | 
					
						
							|  |  |  | </div> | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | ``` |