jQuery Cheatsheet - jQuery API & DOM Manipulation Reference

It is search depth. children("li") inspects only the direct children of the matched elements — one level, no deeper. find("li") walks all descendants at any depth. For markup div#box > ul > li > a, $("#box").children("li") returns nothing because the li is not a direct child of the box, while $("#box").find("li") finds them. So use children when you mean the immediate tier, such as the second level of a menu, and find when you mean any match within the subtree, such as every link inside a table. Form pseudo-selectors like $(":checkbox") and $(":input") can narrow the result further with filter.

Pick by the kind of value you want. html() returns the innerHTML of the first match and is what you use to write a rich fragment — $("#box").html("<p>content</p>") swaps out the old child nodes wholesale. text() returns merged plain text and is the safe choice for writing words because it sidesteps HTML escaping. val() is exclusively for the current value of a form control, so use it for inputs and selects. attr("data-id") reads the HTML attribute, working for custom and native attributes alike, and $("#box").attr("data-id", "123") attaches data for a callback to read. data("key") reads the element's data-key storage; jQuery caches it on first read, so later direct attribute edits do not sync — clear it with .removeData().

A handler bound directly to an element cannot work if the element did not exist at binding time. There are two ways out. Delegate to a stable ancestor: $(document).on("click", ".btn", fn), where ".btn" is the second argument; the match happens when the event bubbles up, so elements inserted later fire correctly too. Or wait for the DOM with $(document).ready(fn) (or the shorthand $(fn)) before binding — but that still does nothing for content added after the page is ready. Unbind with $("#btn").off("click"), and call off before re-binding to stop one click firing several times. For form events use $("input").change(fn) and $("form").submit(fn).

Version 3.x removed the success / error callback style from $.ajax() in favour of Promises. The shorthands still accept callbacks — $.get("/api/data", fn), $.post("/api/data", { key: "value" }, fn) and $.getJSON("/api/data", fn) — but if you want then/catch you must call $.ajax({ url, method, data, success }) in its full form and use the returned jqXHR. For headers, set them once globally with $.ajaxSetup({ headers: { "X-Token": token } }) so every request carries the token without repeating a headers object. As a rule of thumb: reach for the shorthands for plain GETs and JSON reads, and drop to $.ajax only when you need promise chaining, explicit method control, or shared configuration.

Decide by whether you want a transition. show(), hide() and toggle() switch visibility instantly, which suits plain expand/collapse logic such as dropdown menus and modals. When an animation is wanted, use fadeIn() / fadeOut() for opacity, or slideDown() / slideUp() for a vertical reveal — the latter fits accordions and detail expanders best because the height change looks natural rather than abrupt. For full control use animate({ left: "200px" }, 500), where the second argument is the duration in milliseconds and the object lists the properties to tween. If what you really need is a state flip, use the class methods: addClass("active"), removeClass("active") and toggleClass("active"), the last being the cheapest on/off switch.