How To Select Multiple Elements using JQuery Selector

It is possible to select multiple elements by using jQuery Selector. As we know already, the wildcard * selector selects all elements in the document. The jQuery allows selecting multiple elements as user wants to select in the document. We can specify any number of elements separated with a comma which combines all the elements and display as single result.

JQuery Multiple Selector Syntax

$(“element1, element2...elementN”);

It contains number of elements which combines all the elements in the document and display into single result.

JQuery Multiple Selector Example

<!doctype html>
<head>
<title>JQuery multpile elements Selection</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery multpile elements Selection Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
	$("h3,h4,span,div").css("border-style", "double");
   });
</script>
<body>
   <h3>Hello world!!!</h3>
   <h3>jQuery is a JavaScript Library.</h3>
   <div>jQuery simplifies JavaScript programming.</div>
   <h4>It is also called universal selector...</h4>
   <p>jQuery is a lightweight,<span>write less, do more</span> JavaScript library.</p>
   <h5>It is easy to learn.</h5>
</body>
</html>

As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
$(“h3,h4,span,div”).css(“border-style”, “double”); statement defines multiple elements such as h3, h4, span and div elements. It uses CSS border property which specifies what kind of border to display. Here it will display the two borders as specified in the border style value.

When you run the above example, you would get the following output: