1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
[jquery]
- learn here
-> http://learn.jquery.com/
- $(function() {} is same as $(document).ready(function() {},
$(window).load(function () {} comes later in rendering process when all
tags are ready such as images
-> DOM way, in case jQuery hasn't loaded yet and is undefined, e.g. jQuery gets loaded in footer
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
- stop the default action
e.g. you have an anchor and register a listener for a .click() event using
jquery, but you don't want default href="foo" behavior so you do:
event.preventDefault(); /* prevent href from doing its job */
return false; /* stops bubbling up */
- the $() is a constructor call, $ is a variable name, js doesn't prepend var names with $
-> find() is similar, and can be chained
- very common jquery uses
-> you make a selection using $('your search') and you wonder what you got back
- you loop with .each(function {});
- use .length, http://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/
e.g. if ($('$foo').length) /* heck yeah */ ;
- useful api funtions
-> trigger(), e.g. you want to click event to happen on some element at your will,
exmaple: ('div.clips a:first').trigger('click');
-> after(), append a new element after current, e.g. $('#foo').after('<div id="bar">hell</div>');
-> is(), e.g i used it to check if arr content of arr at some index is empty, below:
if (!$(transcripts_divs[ind]).is(':empty')) { /* do something awesome */ }
-> walking DOM tree
- parent(), parentUntil()
- next(), children()
|
