You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+8-8
Original file line number
Diff line number
Diff line change
@@ -2,17 +2,17 @@
2
2
3
3
## Objectives
4
4
5
-
+Link jQuery to HTML file
5
+
+Load jQuery in HTML file
6
6
+ Write inline jQuery to modify HTML
7
7
+ Explain how jQuery modifies HTML
8
8
9
9
## Inline jQuery
10
10
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.
12
12
13
13
### Include jQuery Link
14
14
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.
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!!
43
43
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`.
45
45
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.
47
47
48
-
<pdata-visibility='hidden'>View <ahref='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.
49
49
50
-
<pclass='util--hide'>View <ahref='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
+
<pdata-visibility='hidden'>View <ahref='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>
0 commit comments