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:

<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

Your email address will not be published. Required fields are marked *