JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

How To Select Multiple Elements using JQuery Selector

May 7, 2014 by Krishna Srinivasan Leave a Comment

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

[code lang=”xml”]
$(“element1, element2…elementN”);
[/code]

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

JQuery Multiple Selector Example

[code lang=”xml”]
<!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>
[/code]

  • 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:

  • Run This Demo

JQuery Multiple Elements Selector

Filed Under: jQuery

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved