Skip to content

Commit 9151663

Browse files
committed
Remove incorrect information
Add extra explanation about jQuery/$
1 parent 8b1e81e commit 9151663

File tree

2 files changed

+9
-12
lines changed

2 files changed

+9
-12
lines changed

README.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22

33
## Objectives
44

5-
+ Link jQuery to HTML file
5+
+ Load jQuery in HTML file
66
+ Write inline jQuery to modify HTML
77
+ Explain how jQuery modifies HTML
88

99
## Inline jQuery
1010

11-
We're going to use jQuery to add some text to our HTML page.
11+
We're going to use jQuery to add some text to our HTML page.
1212

1313
### Include jQuery Link
1414

15-
In order to start writing jQuery, we need to include the library in our HTML. One way to do this would be to download a copy of the jQuery library and include it with our project. We can also link to the library hosted by a content delivery network, or CDN. For this example, we'll be loading jQuery from Google's CDN. You'll want to copy the code below and paste it `html/index.html` in between your head tags. This script tag links our HTML file to the jQuery library.
15+
In order to start writing jQuery, we need to include the library in our HTML. One way to do this would be to download a copy of the jQuery library and include it with our project. We can also link to the library hosted by a content delivery network, or CDN. For this example, we'll be loading jQuery from Google's CDN. Copy the code below and paste it `html/index.html` at the very bottom of the HTML `body` (right above the `</body>` close tag). This `script` tag links our HTML file to the jQuery library.
1616

1717
```html
1818
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
@@ -24,7 +24,7 @@ Go ahead and open `html/index.html` in the browser. You should see a really bori
2424

2525
We want to add the text `hey hey hey hey!!!!!` to end of our paragraph.
2626

27-
At the bottom of `index.html`, right before the closing `body` tag, we'll want to add an opening and a closing `script` tag:
27+
Below our `script` tag that loads jQuery, right before the closing `body` tag, we'll want to add an opening and a closing `script` tag:
2828

2929
```html
3030
<script>
@@ -41,10 +41,10 @@ $("#yo").append("hey hey hey hey!!!!!");
4141

4242
Save the changes to `html/index.html` and reload in the browser. You should see `yo yo yo yo yo yo yo hey hey hey hey!!!!!` on the page!!
4343

44-
The `$` tells our browser that we're using jQuery. The `("#yo")` is our jQuery selector -- we're selecting the HTML element with the ID `yo`. We're then using the jQuery `append` function, which adds text to an HTML element, and we're passing in `"hey hey hey hey!!!!!"` which is the text we want to add.
44+
The `$` is just a function — it's equivalent to `jQuery` (which is also a function that you can call). You might think of it as a fancy alias (with a few tricks up its sleeve) to `document.querySelectorAll`.
4545

46-
Don't worry too much about the mechanics of these selectors and functions, we'll go over those in way more detail. Just notice that the text appeared on the screen!
46+
`"#yo"` is our jQuery selector -- we're selecting the HTML element with the ID `yo`. We're then using the jQuery `append` function, which adds text to an HTML element, and we're passing in `"hey hey hey hey!!!!!"` which is the text we want to add.
4747

48-
<p data-visibility='hidden'>View <a href='https://learn.co/lessons/js-jquery-modify-html-readme' title='Modify HTML With jQuery'>Modify HTML With jQuery</a> on Learn.co and start learning to code for free.</p>
48+
Don't worry too much about the mechanics of these selectors and functions, we'll go over those in way more detail. Just notice that the text appeared on the screen, even though we didn't explicitly add it between the `p` tags.
4949

50-
<p class='util--hide'>View <a href='https://learn.co/lessons/js-jquery-modify-html-readme'>Modifying HTML with jQuery</a> on Learn.co and start learning to code for free.</p>
50+
<p data-visibility='hidden'>View <a href='https://learn.co/lessons/js-jquery-modify-html-readme' title='Modify HTML With jQuery'>Modify HTML With jQuery</a> on Learn.co and start learning to code for free.</p>

html/index.html

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,5 @@
22
<head>
33
</head>
44
<body>
5-
65
<p id="yo"> yo yo yo yo yo yo yo </p>
7-
8-
9-
</body>
6+
</body>

0 commit comments

Comments
 (0)