querySelector in javascript

Syntax

element = document.querySelector(selectors);

where

• selectors is a string containing one or more CSS selectors separated by commas.

Example

In this example, the first element in the document with the class "myclass" is returned:

var el = document.querySelector(".myclass");

Returns null if no matches are found; otherwise, it returns the first matching element.

If the selector matches an ID and this ID is erroneously used several times in the document, it returns the first matching element.

Throws a SYNTAX_ERR exception if the specified group of selectors is invalid.

querySelector() was introduced in the Selectors API.

The string argument pass to querySelector must follow the CSS syntax. To match ID or selectors that do not follow the CSS syntax (by using a colon or space inappropriately for example), it's mandatory to escape the wrong character with a double back slash:

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
document.querySelector('#foo\bar')    // Does not match anything
document.querySelector('#foo\\\\bar') // Match the first div
document.querySelector('#foo:bar')     // Does not match anything
document.querySelector('#foo\\:bar')   // Match the second div
</script>

set indeterminate checkbox using jquery

$("#checkall").prop("indeterminate",true);

jquery selecter tips

Increase Specificity from Left to Right

A little knowledge of jQuery’s selector engine is useful. It works from the last selector first so, in older browsers, a query such as:

$("p#intro em");

loads every em element into an array. It then works up the parents of each node and rejects those where p#intro cannot be found. The query will be particularly inefficient if you have hundreds of emtags on the page.

Depending on your document, the query can be optimized by retrieving the best-qualified selector first. It can then be used as a starting point for child selectors, e.g.

$("em", $("p#intro")); // or
$("p#intro").find("em");