1

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

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

K Split X
  • 3,405
  • 7
  • 24
  • 49
  • I agree, but like in css, we do like "div:first". In jq, why is it "div".":first" ? its like 2 seperate commpands – K Split X Dec 27 '16 at 02:15
  • This is totally invalid: `$("div").(":first")` We use: `$("div:first")` in jQuery, not the other one. – Praveen Kumar Purushothaman Dec 27 '16 at 02:16
  • Those are not "DOM selector" like element tag name, class or id. These selectors are jQuery extensions and not purely CSS based. You can combine these selector prefixed by a "DOM selectors" like `$('div.my-class:visible')`. This tells jQuery to select all the divs that have the class `my-class` and that are visible. – Piou Dec 27 '16 at 02:17

5 Answers5

3

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").

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
1

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

charlietfl
  • 170,828
  • 13
  • 121
  • 150
1

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.

Piou
  • 1,056
  • 1
  • 7
  • 10
1

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").

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • 2
    jQuery pseudo selectors are not `css` selectors – guest271314 Dec 27 '16 at 02:28
  • @guest271314 Yes, but they are based on CSS selectors. Tried to clarify – Oriol Dec 27 '16 at 02:32
  • Note, was incorrect at previous comment; there is a [`:first`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first) `@page` pseudo class `css` selector, though is not same as jQuery `:first`. – guest271314 Dec 31 '16 at 05:20
  • 1
    @guest271314 Good point, but note that's a page selector which can only be used in `@page` rules, it's not a normal selector. – Oriol Dec 31 '16 at 17:50
  • Yes, posted previous comment as a correction to the statement made at a now deleted comment at your Answer, where incorrectly posited that `:first` is not a `css` selector, which is not entirely accurate. When become aware that have been incorrect as to a fact, have moral obligation, here, to acknowledge and address the incorrect statement presented as a true fact. And, if possible, show and prove the correct fact; without omitting correction of a previous erroneous statement made as to the fact. Strive to be right and exact, here; – guest271314 Dec 31 '16 at 18:02
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

Community
  • 1
  • 1
guest271314
  • 1
  • 15
  • 104
  • 177