Normal CSS selector vs find() (also see this)

Some selectors

List of selectors

`:gt(n)` / `:lt(n)`	greater/lesser than `n`
`:first` / `:last`
`[class]`	has class
`[class=myclass]`	has class 'myclass'
`[attrFilter1][attrFilter2]`	mitu atribuuti, nt `[name=email][type=email]`
`:input` `:text` `:password` `:radio` `:checkbox` `:image` `:file` `:submit` `:button` `:reset`
`:enabled` `:disabled` `:checked` (`:selected`*)	* [Instead of `:selected` use `option:checked` ](https://stackoverflow.com/a/44088820/9023518)
`:header`	`h1`-`h6`
`:animated`	element(s) in the process of being animated

Some methods

$('element').method()

`html([newvalue])`	returns/replaces selected html element
`text([value])`	contents of selected html
`$(element).append(NEWContent)`   also `prepend`/`after`/`before`	eg `$('div').append(' tere ')`
`$(NEWContent).appendTo(element)`   also `prependTo`/`insertAfter`/`insertBefore`	eg `$(' tere ').appendTo('div')`
`append` vs `after`	add content **into** (inside) the element add content **after** (outside) the element
`append` vs `clone`	`append` removes the element from the previous place in DOM
`wrap`/`wrapAll`/`wrapInner(element)` eg on ` Hello Goodbye `	`$('p').wrap(' ');`   ` Hello ` ` Goodbye `   `$('p').wrapInner(' ');`   ` Hello ` ` Goodbye `   `$('p').wrapAll(' '); `   ` ` ` Hello ` ` Goodbye ` ` `
`$(selectors).replaceWith(NEWcontent)` `$(NEWHTML).replaceAll(selectors)`	replaces element with text or html replaces element with new HTML (MUST contain tags or old element is deleted); text outside tags is truncated ("text" in ` text ` and ` text ` is okay tho)
`empty()` `remove()`	empty the contents, leave element in tact delete the entire element (tags and contents) NB! If it's the last element (in parent), avoid collapsing with `display: inline-block;` OR ` ` (afterwards). If the element has a *non*-percentage `height`, `display: block` seems to work better than `inline-block` which shifts around.
`clone([boolean])`	copies element unlike `append` (which moves the element (if new content is a selector))
`$(element).toggle()` `toggleClass(class,switch)`	show/hide element adds/removes class if **switch** is true/false
`offset()`⋅ / `position()` `scrollTop([val])` / `scrollLeft([val])` `height` / `innerHeight` / `outerHeight([val])`	element coordinates relative to the ..**document** / ..**offset parent** (incl its padding, excl margins-border) get/set scroll bar vertical/horizontal position (for the first matched selector) get/set height of selector ..without anything / with padding / with border (and optionally margin⋅)
[Instead of `bind()` and `live()` use `on()`](https://stackoverflow.com/questions/11847021/jquery-s-bind-vs-on)(deprecated & removed) `one()` `triggerHandler()` `trigger()`	same as `on()` except that it's executed at most once per element per event type trigger all handlers/behaviours for every matched element (for the given event type) also triggers event(s) default behavior ("native event" such as form submission)

## Shortcuts for .on(event,handler) eg instead of `.on(blur)` you can `.blur()`

hover(handlerIn,handlerOut)
toggle(options):     eg toggle(fn1, fn2, fn3)
toggle(boolean):     ..depending on boolean value
focus()
blur()

Animation-related

show/hide/fadeIn/fadeOut(speed,callback)

fadeTo(speed,opacity,callback)

slideDown/slideUp/slideToggle(speed,callback)

animate(properties[duration][easing][callback])
animate(properties,options)

stop():   end all animations
stop(false,true):   end animation + don't clear queue (false) + end immediately (true)