-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery_lesson.js
146 lines (121 loc) · 3.89 KB
/
jquery_lesson.js
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
//You can run the initial examples in yoru console.
//As you get further down the list, you may want to write the code
//into your document.ready function in index.html
//This will make the changes persistent.
//Example #1
//You can target html elements just like css.
$('h1');
$('div');
//Notice that '.content' returns an array of elements.
$('.content');
$('#one');
$('#two');
$('#three');
//Example 2
//You can add classes with addClass
$('.content').addClass('primary');
$('#two').addClass('second');
$('#three').addClass('third');
$('#four').addClass('fourth');
$('#five').addClass('fifth');
//You can remove classes with removeClass
$('.content').removeClass('primary');
$('#two').removeClass('second');
$('#three').removeClass('third');
$('#four').removeClass('fourth');
$('#five').removeClass('fifth');
//Example 3
//You can toggle classes with toggle class
$('.content').toggleClass('primary')
$('#two').toggleClass('second');
$('#three').toggleClass('third');
$('#four').toggleClass('fourth');
$('#five').toggleClass('fifth');
//Example 4
//You can make inline styles with .css
$('.content').css('background-color', 'white');
//Example 5
//You can change text content with .text
$('.content').text('You can add text using .text ()');
//Example 6
//You can change html content with .html
$('.content').html('<div class=small-square></div>');
//Example 7
//You can append elements with .append
$('#main').append('<div class="content blank"></div>');
//Example 8
//You can store elements in variables
var blankSquare = '<div class="content blank"></div>';
//You can reverse the syntax of append with appendTo
$(blankSquare).appendTo('#main');
//Example 9
//You can grabe the contents of html tags.
var textSquare= '<div class="content blank textSquare"> You can grab this text using .text()</div>';
$('#main').append(textSquare);
//What is the value of text after line 62?
var text = $('.textSquare').text();
$('.content').text(text);
//Example 10
//You can detach elements from the DOM and store them using .detach()
var one = $('#one').detach();
$('#main').append(one);
//Example 11
//Because jQuery selectors return an array, you can iterate over the returned elements.
var groupOfDivs = $('.content').detach();
var i = 0;
while(i<10){
$(groupOfDivs[i]).appendTo('#main');
i++;
}
//Example 12
//You can chain methods together.
var groupOfDivs = $('.content').detach();
var i = 0;
while(i<10){
$(groupOfDivs[i]).html('<h1>i</h1>').appendTo('#main');
i++;
}
//Example 12 fills all the square with the letter i,
//but we want to use i to number them. How do we do that?
//Example 13
//You can interpolate html and javascript
var i = 0;
while(i<10){
//We build a string using the value of the javascript variable i
$(groupOfDivs[i]).html('<h1>'+i+'</h1>').appendTo('#main');
i++;
}
//Example 14
//jQuery has animations. Visit the jQuery effects webpage to learn more about this
//https://api.jquery.com/category/effects/
//
$( ".content" ).animate(
{
left: "+=50",
top: "+=50",
opacity: 0.25
},
10000,
function() {
$(".content").html('<h1>Your animation has finished');
}
);
//Event handlers-Copy these into your document.ready function on index.html
//Event handlers allow you to create functions that only run when
//a certain event happens on the page, like the user clicking a button.
//Example 15: .on allows you to pass an event and a callback function
$('#show-divs').on('click', function(){
$('.content').toggleClass('primary');
});
//Example 16: .click simplifies the .on syntax
$('#add-div').click(function(){
$('#main').append('<div class="content"></div>');
});
//Example 17: Combining mouseenter and mousleave, we create a function that runs
//when the user hovers over an area of the page.
$('.content').on('mouseenter', function(){
$(this).html('<img class="gif" src="giphy.gif">');
});
$('.content').on('mouseleave', function(){
$(this).html('');
});