How to handle or minimize tight coupling in jquery

Description

By design most jquery code leads to a lot of tight coupling, e.g. selectors assume a specific structure of html

var mySubnav = $("#navigation a.sub-menu");

If the corresponding html changes, for whatever reasons,

<a class="subMenu" .... </a>

functionality is broken.

Question

• What's the best way to handle tight coupling?
• What approaches exist to loosen it up?

Answers, Approaches

• use the html custom data attribute to separate css from js logic. e.g. add data-submenu="true" on the html and use var mySubnav = $("[data-submenu]"); on the js side.
• implement a solid testing environment
• couple as loose as possible, by using the least specific selectors, e.g. $("a.sub-menu'). See also
• Eliminate the actual string literals that represent CSS selectors from the body of your jQuery code by (1) retrieving references to static DOM elements beforehand, and (2) storing selector strings in one place (at the top of your code).
• use javascript frameworks, like Backbone, which decouple javascript from the DOM via views
• use delegate and live regarding coupling due to event management