programming-cheatsheets/jQuery.js at master · ravic1995/programming-cheatsheets · GitHub

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* document ready */
	$(document).ready(function(){});
	$(function(){});	// shorthand: same as above

/* built-in animations */
	.show();
	.hide();
	.fadeTo('fast', <opacity value>); //  'fast' 'slow' or speed in ms
	.fadeIn('fast');
	.fadeOut('fast');
	.animate({left:'+=10px'}, 'fast');
	.slideToggle();

/* DOM manipulation*/
	.prepend('<HTML element>');
	.append('<HTML element>');
	('<HTML element>').prependTo('<selector>')
	('<HTML element>').appendTo('<selector>')
	var $p = $("p");			// existing element
	.after($p); 				// moves $p to position after selector
	.after($("p"));				// Same as above
	.empty(); 					// deletes an element's content and all its descendants. For instance, if you .empty() an 'ol', you'll also remove all its 'li's and their text.
	.remove(); 					// not only deletes an element's content, but deletes the element itself.
	.html();					// get the contents of the first element match it finds
	.html("I love jQuery!");	// get the HTML contents of the first div it finds, and set the contents of the first div it finds to "I love jQuery!"

/* CSS manipulation */
	.addClass('className');
	.removeClass('className');
	.toggleClass('className');	// toggles className
	.height("100px");
	.width("50px");
	.css("background-color","#008800");


$('input:checkbox:checked').val(); // .val() is used to get the value of form elements
var input = $('input[name=checkListItem]').val();

/*
For use when there is a need to bind actions on dom elements which are not yet present on document load
events: click,
*/
	$(document).on('event', 'selector', function() {
	    $(this) // Do something!
	});
	.mouseenter();
	.click();
	.dblclick();
	.hover(
	   // mouse in
	   function(){
	      $(this).addClass('highlight');
	   },
	   // mouse out
	   function(){
	      $(this).removeClass('highlight');
	   }
	);
	.focus(); // only works on elements that can receive focus i.e elements like <textarea> and <input>
	.keydown(function(key){});	// listens for keystrokes within the selector container

/* jQuery UI. Documentation at http://jqueryui.com/*/
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
	.effect('<effect>');
		.effect('explode');
		.effect('bounce', {times:2}, 200),
		.effect('slide')
	.accordion({collapsible: true, active: false});
	.sortable();
	.draggable();
	.resizable();
	.selectable();	// need CSS defintion for .ui-selected