-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery
150 lines (109 loc) · 5.7 KB
/
jquery
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
-----JQUERY-----
Functions:
- addClass() : adds classes to the objects
- removeClass() : ob
- css("attrb", "value") : changes the css of the elm
- prop(-do-) : changes the html props of the elm
- html() : adds html line b/w the elm
- text() : adds text and doesn't evaluate the html
- remove() : removes the element
- appendTo() that allows you to select HTML elements and append them to another element
- clone() that makes a copy of an element.
- parent() : parent of the elm
- children() : up and above
- Array.forEach():
- Write scripts inside <script> elem.
- document ready function, your code may run before your HTML is rendered, which would cause bugs.
$(document).ready(function(){ });
- All jQuery functions start with a $, usually referred to as a dollar sign operator, or simply as bling.
- jQuery often selects an HTML element with a selector, then does something to that element.
eg. This adds a bounce to buttons upon document ready.
$("button").addClass("animated bounce");
^ ^ (different classes)
$(class/elem/id).addClass("the required jQ act");
- target:nth-child(n) css selector allows you to select all the nth elements with the target class or element type.
JAVASCRIPT
- data types: which are undefined, null, boolean, string, symbol, number, and object.
- declaration:
var <varname> ;
$ or _ accepted in varname
- When JavaScript variables are declared, they have an initial value of undefined.
If you do a mathematical operation on an undefined variable your result will be NaN which means "Not a Number".
If you concatenate a string with an undefined variable, you will get a literal string of "undefined".
- str in js are immutable i.e. each elem of str can't be changed.
- typeof null returning 'object' is a bug that can’t be fixed, because it would break
existing code. It does not mean that null is an object.
- push(elm) ~ unshift(elm)
pop() (returns) ~ shift()
- delete obj.prop;
- Objects have their own attributes, called properties, and their own functions, called methods.(similar to classes)
- create instances of the object by using the keyword new
- Inside an object, the properties referred by "this. " is public while others are private.
var Car = function() {
// this is a private variable
var speed = 10;
// these are public methods
this.accelerate = function(change) {
speed += change;
}; //notice the semi-colon at the end
this.decelerate = function() {
speed -= 5;
};
this.getSpeed = function() {
return speed;
};
};
- map method is a convenient way to iterate through arrays.
var timesFour = oldArray.map(function(val){
return val * 4;
});
map each element of the array with the function argument
- To use reduce you pass in a callback whose arguments are an accumulator (in this case, previousVal) and the current value (currentVal).
var singleVal = array.reduce(function(previousVal, currentVal) {
return previousVal - currentVal;
}, 0);
^ optional argument to initialize previousVal with, else is 1st element.
- sort can be passed a compare function as a callback. The compare function should return a negative number if a should be before b, a positive number if a should be after b, or 0 if they are equal.
var array = [1, 12, 21, 2];
array.sort(function(a, b) {
return a - b;
});
- The substr() method returns the characters in a string beginning at the specified location through the specified number of characters.
str.substr(start[, length])
start
Location at which to begin extracting characters. If a negative number is given, it is treated as strLength + start where strLength is the length of the string (for example, if start is -3 it is treated as strLength - 3.)
length
Optional. The number of characters to extract.
- The slice() method extracts a section of a string and returns a new string.
str.slice(beginSlice[, endSlice])
also works with array.
- The splice() method changes the content of an array by removing existing elements and/or adding new elements.
array.splice(start, deleteCount[, item1[, item2[, ...]]])
item1, item2, ...
The elements to add to the array, beginning at the start index. If you don't specify any elements, splice() will only remove elements from the array.
Returns
An array containing the deleted elements. If only one element is removed, an array of one element is returned. If no elements are removed, an empty array is returned.
- The indexOf() method returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.
str.indexOf(searchValue[, fromIndex])
- The filter() method creates a new array with all elements that pass the test implemented by the provided function.
arr.filter(callback()[, thisArg])
APIs
- APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.`
APIs transfers data in form of JSON'
(The getJSON() method is used to get JSON data using an AJAX HTTP GET request.)
$(selector).getJSON(url,[data,[success(data,status,xhr)]])
e.g.
$.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
- JSON received is a collection of objects, i.e. an array of obj.
Object.keys(val) => gives the keys or ids of the object
- Every browser has a built in navigator that can give us this information.
The navigator will get our user's current longitude and latitude.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
- The spread operator ' ... ' : [ES6]
converts array to a list.