CODEWITHSUNDEEP
javascriptjqueryhtmlcss
K Split X
K Split X

Reputation: 4757

Why does jQuery put the colon before the keyword?

For example, we have like is(":visible") or $("div").(":first")

Why is the colon in the front and what is it's purpose?

Upvotes: 1

Views: 316

Answers (5)

guest271314
guest271314

Reputation: 1

Note, jQuery pseudo selectors are not css selectors. The selector expression is created using either $.expr[":"] or $.expr.createPseudo() and parsed internally for a match by jQuery() or Sizzle.

See

Upvotes: 1

Oriol
Oriol

Reputation: 288470

In CSS, the colon introduces a pseudo-class:

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class and optionally by a value between parentheses.

For example, the selector a selects all elements of type a, and a:visited visited restricts that to the ones which are visited links.

jQuery extends the CSS syntax with some non-standard pseudo-classes like :first, but it's not recommended to use them:

Because :first is a jQuery extension and not part of the CSS specification, queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :first to select elements, first select the elements using a pure CSS selector, then use .filter(":first").

Upvotes: 1

Piou
Piou

Reputation: 1066

From jQuery documentation for :visible

Additional Notes:

  • Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").
  • Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance.

You'll find almost the same for :first and all other not pure CSS selectors.

This helps us to picture that you we using a selector that can have big impact on jQuery selection. As said in the quote, it is prefered to use them prefixed with pure CSS selectors in order to boost performances by restricting the number of elements this selector is run against.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

They are jQuery Selector Extensions which give you boolean output, and it has nothing to do with CSS Specifications. This is totally invalid:

$("div").(":first")

We use:

$("div:first")

in jQuery, not the other one. For the boolean output, we use:

if ($("div").is(":first"))
if ($("div").is(":visible"))
if ($("div").is(":empty"))

The above are few examples. It is also documented there:

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

Upvotes: 3

charlietfl
charlietfl

Reputation: 171689

Those are used for what jQuery calls selector extensions. Your usage of them however is incorrect in the second case

They are basically pseudo selectors

You can read about them in the selector api docs here

Upvotes: 1

Related Questions