intro to jquery
intro to jquery
what is jquery
intro to jquery
resources
intro to jquery
- MDN
- jquery documentation
- stack overflow
objectives
intro to jquery
- Understand what Jquery does
- Understand what event handlers do
- Show hide and toggle HTML elements
- Understand the DOM and how js changes the displayed page, not the HTML
- Traverse and manipulate the dom
- Manipulate attributes of
html elements
What is Jquery
What is it used for?
intro to jquery
- JS Library
- Adding interactivity
Setting up Jquery
intro to jquery
set up a web project with css, js and and the index.html file
markup
intro to jquery
<div class="container">
<h1>HTML help</h1>
<p>
This is a very special page. If you click somewhere, it will
tell you what type of html element you clicked on
</p>
<p>
Look at this cute warlus!
</p>
<img src="images/warlus.jpg" alt="" />
</div>jquery
intro to jquery
jQuery("h1").click(function() {
alert("This is a header!");
});
jQuery("p").click(function() {
alert("This is a paragraph!");
});
jQuery("img").click(function() {
alert("This is an image!");
});you can wrap it all up
intro to jquery
jQuery(document).ready(function(){
jQuery("h1").click(function() {
alert("This is a header!");
});
jQuery("p").click(function() {
alert("This is a paragraph!");
});
jQuery("img").click(function() {
alert("This is an image!");
});
});
shortcut
intro to jquery
$(document).ready(function(){
$("h1").click(function() {
alert("This is a header!");
});
$("p").click(function() {
alert("This is a paragraph!");
});
$("img").click(function() {
alert("This is an image!");
});
});
markup
intro to jquery
<div>
<h1>Peek-a-Boo</h1>
<p>
Let's play peek-a-boo. Click here to see the surprise!
</p>
<img src="images/warlus.jpg" alt="" />
</div>css
intro to jquery
img{
display: none;
}
challenge
intro to jquery
make the image reappear on click
targetting specific elements
intro to jquery
$('{selector}').css('{property}', '{value}');use this to change color of all list items
intro to jquery
$('{selector}').css('{property}', '{value}');