jQuery selectors – web-profile

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

<script>
$(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>');
});
</script>

<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>

Leave a Reply Cancel reply