Question

I know I can select elements using the following syntax, but what other ways are available? I didn’t know what to search for when trying to determine others. Also, are there ways to select elements via wildcard characters?

  //Selection by the element's ID
  $('#mybutton').on('click', function (e) {
     alert('mybutton clicked');
  });

  //Select by the element's css class
  $('.mybuttonclass').on('click', function (e) {
     alert('mybutton clicked');
  });

  //Selection of a tag with name of delete found within a table
  $('table').on('click','a[name=delete]', function (e) {
     alert('table link clicked');
  });

So, I can use name, ID or class. Are there other ways? A google search term or a link would be helpful.

EDIT:

I had found the selectors page in the documentation, but didn’t think this page applied. I had trouble making sense of the page, and thought that it was referring to something else. That’s why I was looking for another search term, because everything was bringing up ‘Selectors’, and I didn’t think that’s what I was needing. apparently I was in the right place after all.

Answer 1

    Selector    Example       Selects
    *           $("*")                All elements
    #id         $("#lastname")  The element with id=lastname
    .class  $(".intro") All elements with class="intro"
    element $("p")  All p elements
   .class.class $(".intro.demo")    All elements with the classes "intro" and "demo"

    :first  $("p:first")    The first p element
    :last   $("p:last") The last p element
    :even   $("tr:even")    All even tr elements
    :odd    $("tr:odd") All odd tr elements

    :eq(index)  $("ul li:eq(3)")    The fourth element in a list (index starts at 0)
    :gt(no) $("ul li:gt(3)")    List elements with an index greater than 3
    :lt(no) $("ul li:lt(3)")    List elements with an index less than 3
  :not(selector)$("input:not(:empty)")  All input elements that are not empty

    :header $(":header")    All header elements h1, h2 ...
    :animated   $(":animated")  All animated elements

 :contains(text)$(":contains('W3Schools')") All elements which contains the text
    :empty  $(":empty") All elements with no child (elements) nodes
    :hidden $("p:hidden")   All hidden p elements
    :visible    $("table:visible")  All visible tables

    s1,s2,s3    $("th,td,.intro")   All elements with matching selectors

[attribute] $("[href]") All elements with a href attribute
[attribute=value]$("[href='default.htm']")  All elements with a href attribute value equal to "default.htm"
[attribute!=value]$("[href!='default.htm']")    All elements with a href attribute value not equal to "default.htm"
[attribute$=value]$("[href$='.jpg']")   All elements with a href attribute value ending with ".jpg"

    :input  $(":input") All input elements
    :text   $(":text")  All input elements with type="text"
    :password   $(":password")  All input elements with type="password"
    :radio  $(":radio") All input elements with type="radio"
    :checkbox   $(":checkbox")  All input elements with type="checkbox"
    :submit $(":submit")    All input elements with type="submit"
    :reset  $(":reset") All input elements with type="reset"
    :button $(":button")    All input elements with type="button"
    :image  $(":image") All input elements with type="image"
    :file   $(":file")  All input elements with type="file"

    :enabled    $(":enabled")   All enabled input elements
    :disabled   $(":disabled")  All disabled input elements
    :selected   $(":selected")  All selected input elements
    :checked    $(":checked")   All checked input elements