Your jQuery can read like English. Let your selectors tell the story.
\n\n\n\nThink in sentences when you write jQuery selectors
\n\n\n\nWe reach for jQuery every day, and with jQuery two landing this spring while many teams still ship on the one ten branch for old IE, selectors are back in the spotlight. The trick is to make them read like English. Start with a clear subject such as a list or a container, then add plain filters that match how you would say it out loud. Say what you want, then say where or how to find it. Use :contains, :visible, :has, and :not like adjectives. Your code becomes a sentence your future self can read without a second coffee.
\n\n\n\n// Read it out loud:\n// in the comments list pick items that contain TODO and are visible\nvar $todoItems = $('ul.comments li:contains("TODO"):visible');Chain verbs to guide the reader step by step
\n\n\n\nSelectors get easier when you anchor first then walk the page. Think of find, has, filter, not, first, and last as verbs. Start from a stable root like #app or a section, then narrow down in small steps that mirror your inner voice. Each step should answer a tiny question: which group, which ones inside, which ones stay. This style survives refactors because it tells a story rather than playing selector trivia. It also makes code reviews faster since the intent sits right next to the code.
\n\n\n\n// In the app find articles that have images and link out\nvar $outboundArticles = $('#app')\n .find('article.post')\n .has('img')\n .filter(function () {\n return $(this).find('a[href^="http"]').length > 0;\n })\n .addClass('hasOutbound');Write for speed and sanity without clever tricks
\n\n\n\nReadable selectors are not slow by default. The big wins come from anchoring early, caching what you reuse, and avoiding deep puzzles that look smart but age badly. Old IE still lives in a lot of cubicles, so prefer classes over heavy attribute puzzles when you can, and stash selections that repeat. Match behavior with event delegation that also reads like English. You listen up high, then describe the links you care about. This pairs well with Bootstrap buzz and the push to responsive work since markup shifts yet your sentences stay the same.
\n\n\n\n// Listen on the document for clicks on nav links that open a new tab\n$(document).on('click', 'nav a[target="_blank"]', function (e) {\n e.preventDefault();\n var $link = $(this);\n // say it: if the link is visible and not inside a disabled item, follow it\n if ($link.is(':visible') && !$link.closest('.disabled').length) {\n window.open($link.attr('href'));\n }\n});Tip sheet you can say out loud: pick a clear starting point, use find for scope, use has and filter for meaning, sprinkle :first or :last only when you truly want the edge of a set, and reach for not to say what stays out. When you feel tempted to craft a single mega selector, split it into two or three lines that explain themselves. Your teammate who just wrestled with jQuery one nine changes will thank you. And your future self will too.
\n\n\n\n// Another example that reads like English\n// from the feed pick even articles that do not have a summary\nvar $targets = $('#feed')\n .find('article')\n .even()\n .not(':has(.summary)');Write jQuery you can read out loud tomorrow and you will ship faster today.
\n