Selectors
*********

.. highlight:: javascript

Links
=====

- http://api.jquery.com/category/selectors/

Methods
=======

find
----

``find`` is useful when you already have a jQuery object (passed to function,
declared earlier etc)::

  var item = jQuery('li.item-ii');
  // do something
  item.find('li').css('background-color', 'red');

::

  function(table) {
      jQuery(table).find('tbody')

Selectors
=========

a href
------

If you'd like to select an element by attribute rather than by HTML elements,
you can use XPath expressions to select elements with a specific attribute:

+-------------------------+------------------------------------------------------------------------+
| Attribute Selector      | Description                                                            |
+=========================+========================================================================+
| ``$("[href]")``         | select all elements with href attribute                                |
+-------------------------+------------------------------------------------------------------------+
| ``$("[href='#']")``     | select all elements with href value **equal** to "#"                   |
+-------------------------+------------------------------------------------------------------------+
| ``$("[href!='#']")``    | select all elements with href attribute **NOT** equal to "#"           |
+-------------------------+------------------------------------------------------------------------+
| ``$("[href$='.png']")`` | select all elements with an href attribute that **ends with** ".png"   |
+-------------------------+------------------------------------------------------------------------+

For attributes:

+--------+----------------------+
| ``=``  | is exactly equal     |
+--------+----------------------+
| ``!=`` | is not equal         |
+--------+----------------------+
| ``^=`` | starts with          |
+--------+----------------------+
| ``$=`` | ends with            |
+--------+----------------------+
| ``*=`` | contains             |
+--------+----------------------+

For example:

::

  $('a[href$="ABC"]:first').attr('title');

...will return the title of the first link that has a URL which ends with
"ABC".

Elements
--------

You can use special selectors to choose specific HTML elements:

+-------------------------+------------------------------------------------------------------------+
| Element Selector        | Description                                                            |
+=========================+========================================================================+
| ``$("p")``              | select all ``<p>`` elements                                            |
+-------------------------+------------------------------------------------------------------------+
| ``$("p.test")``         | select all ``<p>`` elements with ``class="test"``                      |
+-------------------------+------------------------------------------------------------------------+
| ``$("p#wrapper")``      | select all ``<p>`` elements with ``id="wrapper"``                      |
+-------------------------+------------------------------------------------------------------------+
| ``$(this)``             | selects the current HTML element                                       |
+-------------------------+------------------------------------------------------------------------+

Exists
------

To test whether an element exists, use the ``length`` property of the jQuery
collection returned by your selector:

::

  if ( $('#myDiv').length )
      $('#myDiv').show();

Note: that it isn't always necessary to test whether an element exists.  The
following code will show the element if it exists, and do nothing (with no
errors) if it does not:

::

  $('#myDiv').show();