Next »
1899/1956
« Previous

Selector syntax

DOM Element Selection

The selector syntax used by jQuery is a combination of CSS1-3 and XPath selectors. With jQuery you can select elements by attributes, element type, element position, CSS class, or a combination of these. The syntax for selecting elements is as follows:

$(selector,[context])

or

jQuery(selector, [context])

To select elements by tag name, use the tag name in the selector. For example, $("div") retrieves all of the divs in a document.


<!DOCTYPE html> 
<html>
<head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script> 
        $(document).ready(function(){ <!-- w  w  w . j  a v a 2  s. c o  m-->
            var wrappedElements = $("div"); 
            document.writeln(wrappedElements.length); 
        });
    </script> 
</head> 
<body>
    <div id="1"></div> 
    <div id="2"></div> 
    <div id="3"></div>
</body> 
</html>

Click to view the demo

The code above generates the following result.

Selector syntax

selector context

By default, when selecting elements, jQuery searches through the entire DOM tree. To search through a subtree of the DOM, pass an optional second parameter to the jQuery function to give the selection a context.

$("a","#div"); retrieve from a series of links for a single div.

The following code sets the context to the document body.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script> 
    <script type="text/javascript">
    $(document).ready(function(){<!--  ww w . j  a  v  a 2s  .co  m-->
           alert($(":hidden", document.body).length);
    });
    </script>
  </head>
  <body>
      <span></span>
        <div></div>
        <div style="display:none;">Hider!</div>
        <div></div>
        <div></div>
        <form>
            <input type="hidden" />
            <input type="hidden" />
            <input type="hidden" />
        </form>
        <span></span>
  </body>
</html>

Click to view the demo

The code above generates the following result.

Selector syntax
Next »
« Previous