Shopify jQuery selectors.

selectors.js

/* 
  To test things out, in your JavaScript console, use selector followed by
  .css('outline','1px solid red');
  to see what you get.
  A sandbox to test all this:
  https://shopify-selectors.myshopify.com/admin/themes
*/

/*====================================
  Product Page and Quick View
====================================== */

// Add to cart form(s)
jQuery('form[action="/cart/add"]')

// Add to cart button(s)
jQuery('form[action="/cart/add"]')
  .find('input[type="submit"], button, input[type="image"]')

// Quantity box(es)
jQuery('[name="quantity"]')

// Product thumbnails
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard
jQuery('img[src*="/products/"]')        /* All product images */
  .not('#related-products img')         /* Except related products, thumbnails not clickable */
  .not('a[href^="/collections/"] img')  /* Except related products */
  .not('a[href^="/products/"] img')     /* Except mini-cart products */
  .not('header img')                    /* Except mini-cart products, thumbnails not clickable */
  .not('#drawer img')                   /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
  .not(':first')                        /* Except first one, i.e the main image */

// Main image
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard
jQuery('img[src*="/products/"]')        /* All product images */
  .not('a[href^="/collections/"] img')  /* Except related products */
  .not('a[href^="/products/"] img')     /* Except mini-cart products */
  .not('header img')                    /* Except mini-cart products, thumbnails not clickable */
  .not('#drawer img')                   /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
  .first()

// Quick View.
// In selectCallback function.
// How to access the associated add to Cart form:
jQuery('#' + selector.domIdPrefix).closest('form');
// How to access the associated quantity:
jQuery('#' + selector.domIdPrefix).closest('form').find('[name="quantity"]');
// How to access the variant id (just checking if your paying attention):
variant.id

/*====================================
  Cart and Cart Page
====================================== */

// Cart count selector
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Retina, Simple, Radiance, Minimal, Supply, New Standard
jQuery('#cart-item-count-wrap, #cart-count, .cart-count, #cart-target, .cart-target, #item_count, .num-items-in-cart span, .toolbar .cart, #cartCount')

/* The selected element may contain more than just a number, so if you update its content only update the number,
see example below. Run it in your console. */
var cartCount = jQuery('#cart-item-count-wrap, #cart-count, .cart-count, #cart-target, .cart-target, #item_count, .num-items-in-cart span, .toolbar .cart, #cartCount');
var newCartItemCount = 3;
if (cartCount.size()) {
  cartCount.html(cartCount.html().replace(/[0-9]+/, newCartItemCount));
}

// Cart Total selector
/* Covers: Editions, New Standard. Other tested themes don't show a total. */
jQuery('#cart-amount-wrap, cart-price')

// Cart form
jQuery('form[action="/cart"]')

// Cart form quantity field by variant ID
jQuery('#updates_' + variantId)

// All quantity fields
jQuery('[name^=updates]')

// Checkout buttons
// Good for regular checkout button, Paypal button, and Google Wallet button.
jQuery('[name="checkout"], [name="goto_pp"], [name="goto_gc"]')

// How to access the variant id (just checking if your paying attention):
variant.id

Nice try! It's more like:

// Accessing the variant id
jQuery('form[action="/cart/add"]').find("[name=id]").eq(0).not(":disabled").val();

Note: when selected options do not correspond to an existing variant (i.e., unavailable), then above will return undefined. Sold out variants w/ backordering disallowed may return [] - empty Array