jQuery selectors

jQuery selectors;

List of jQuery selectors:

• :empty
• :hidden
• :visible
• :first
• :last
• :even
• :odd
• :nth-child(3n)
• :not(:even)
• :first-child
• :last-child
• :only-child

List of jQuery form selectors:

• :checked
• :disabled
• :enabled
• :focus
• :selected

jQuery selectors types:

• Multiple Attribute Selector [name="value"][name2="value2"]
• Multiple Selector ('.selector1, .selector2, .selectorN') - select elements which have one of these classes
• Next Adjacent Selector ('prev + next')
• Next Siblings Selector ('prev ~ siblings')
• $('.class1.class2') - select elements which have both classes

$(function() {

    $('.class_target').append(' <span class="label label-info">.class_target</span>'); // get element by class

    $('#id_target').append(' <span class="label label-info">#id_elem</span>'); // get element by id

    $('ol li.class_target').append(' <span class="label label-info">ul li.class_target</span>'); // get all elements of any html tag and classes

    $('[class="class_target"]').append(' <span class="label label-warning">equals a string [target]</span>'); // attr equals a string

    $('[class*="target"]').append(' <span class="label label-warning">contains a string [target]</span>'); // attr contains a string

    $('[class^="target"]').append(' <span class="label label-warning">starts with a string [target]</span>'); // attr starts with a string

    $('[class$="target"]').append(' <span class="label label-warning">ends with a string [target]</span>'); // attr ends with a string

    $('li:even').append(' <span class="label label-success">:even</span>');

    $('li:odd').append(' <span class="label label-success">:odd</span>');

    $('li:first').append(' <span class="label label-success">:first</span>');

    $('li:last').append(' <span class="label label-success">:last</span>');

    $('li:nth-child(3n)').append(' <span class="label label-success">:nth-child(3n)</span>');

    $('li:nth-child(4n-1)').append(' <span class="label label-success">:nth-child(4n-1)</span>');

    $('li:not(:even)').append(' <span class="label">:not(:even)</span>');

});​

html

<ol>

   <li>list item</li>

   <li>list item</li>

   <li id="id_target">list item <strong>id="id_elem"</strong></li>

   <li>list item</li>

   <li class="a_target_z">list item <strong>class="a_target_z"</strong></li>

   <li>list item</li>

   <li class="class_target">list item <strong>class="class_target"</strong></li>

   <li class="a_target">list item <strong>class="a_target"</strong></li>

   <li>list item</li>

   <li>list item</li>

   <li class="a_target_z">list item <strong>class="a_target_z"</strong></li>

   <li class="class_target">list item <strong>class="class_target"</strong></li>

   <li class="target_z">list item <strong>class="target_z"</strong></li>

   <li>list item</li>

</ol>​