- jQuery - A Conceptual Overview
- How to Get jQuery
- Selecting Elements
- Adding, Removing, and Moving Elements with jQuery
All your work and code for the jQuery One exercises, below, will go in the index.html file of the jquery-one project. Let's get setup to work:
- In your website's workspace, open up the index.html at projects/jquery-one/index.html. You'll code in here.
- To work on the exercise, have 3 tabs open, one tab with your workspace, one tab serving the index.html page of the jquery-one project, and one with the directions. Follow the the direcitons on this page, switch back to your workspace, code the step, save, switch back to the index.html page, refresh. Rinse, repeat...
- If your webserver is running, your index.html should be available here.... If it's not, ask for help!
- In your website's workspace, open up the index.html at projects/jquery-one/index.html. You'll code in here.
You will have already completed the following steps of linking to the jQuery library AND creating the necessary markup in our index.html page IF you followed the setup steps in both Getting jQuery and Selecting Elements.
If you've completed those setup steps of linking jquery and adding the markup to your <body>
tag of the index.html page, you can checkoff all the steps in this 1.1 : Add Markup: section, and move on to the next section, 1. 2 : Accessing Elements Using JavaScript and jQuery.
- Add a with an ID of "container"
- Give that
- Give each of those two s a class attribute with the value "holder"
- Give one of the
elements an id attribute with the value "target"
- Give each an unordered list as a child element.
- Add an empty <script> tag just before the tag. Give it a "src" attribute with the value "https://code.jquery.com/jquery-2.1.1.js"
- Make sure jQuery is working by typing
jQuery
into the browser console. It should return a function and not throw an error.
- Add a second <script> tag just before the ending tag. Your JavaScript will be written within this <script></script> tag tag
- Within the <script> tag, create a new variable called "allDIVs" and assign to it a jQuery object containing reference all the tags on the page.
- assign a jQuery object containing reference all the
- s to a variable "allULs"
- Turn all
tags' text blue // hint: http://api.jquery.com/css/
- turn #container's 'background-color' to 'red'
- change .holder's 'border' to '1px solid black'
You haven't been taught how to do this yet, but maybe you can figure it out...
(hint: http://www.w3schools.com/cssref/css_selectors.asp, http://api.jquery.com/not/, http://www.w3schools.com/css/css_display_visibility.asp)
- Change every
- which inside a
- 's 'font-weight' to 'bold'
- Make the
tag which does not have an id of "target" disappear
Resource: Adding, Removing, and Moving Elements
-
Prepend a new
with the text "hello" to div#container -
Append a new
with the text "goodbye" to div#container -
Prepend a new
the body, append a newafter. How is this different than above? -
Place a new div#first before the first div.holder
-
Place a new div#last with text after the second div.holder
-
Create a
newDetachedDiv
var which is a jQuery object of a newwith some text in it -
Change some of its css properties. Is it on the page yet?
-
now append it. Is it on the page yet?
-
Run this code:
$('div').remove();
What does it do? -
Reload the page and do this: $('#container').empty(); How is that different than above
-
What does this code do?
var orphanNode = $('#target').detach();
-
Now try adding:
$('#container').append(orphanNode);
Why would this be useful? -
Use the
.find()
method to do something interesting: http://api.jquery.com/find/ -
Play around with the
.parent()
and.children()
methods: http://api.jquery.com/ // (hint: [CMD + F] and search "parent") // var parentNode = $('#target').parent(); // var childrenNodes = parentNode.children();
- Combine setTimeout and/or setInterval with '.css' make various parts of your page change styles over time.
- Make your own version of Background Randomizer or Mondrian Maker (hint: [CMD+OPTION+U] to read the source code)
- Watch more of these videos about jQuery and try the exercises* Or try a similar resource from CodeSchool
- Make the
- Turn all