Skip to content

Commit e7b5395

Browse files
committed
merge
2 parents 3c322ac + 27d5247 commit e7b5395

File tree

3 files changed

+54
-2
lines changed

3 files changed

+54
-2
lines changed

.learn

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
tags:
2-
- a tag
2+
- jquery
3+
- selectors
4+
- methods
35
languages:
4-
- a language
6+
- jQuery
57
resources:
68
- 0

README.md

+41
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,47 @@
22

33
## Objectives
44

5+
+ Link jQuery to HTML file
56
+ Write inline jQuery to modify HTML
67
+ Explain how jQuery modifies HTML
8+
9+
## Inline jQuery
10+
11+
We're going to use jQuery to add some text to our HTML page.
12+
13+
### Include jQuery Link
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.
16+
17+
```html
18+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
19+
```
20+
21+
### Adding Text
22+
23+
Go ahead and open `html/index.html` in the browser. You should see a really boring looking website with the text `yo yo yo yo yo yo yo`.
24+
25+
We want to add the text `hey hey hey hey!!!!!` to end of our paragraph.
26+
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:
28+
29+
```html
30+
<script>
31+
</script>
32+
```
33+
34+
Between these tags is where we want to write our inline jQuery. The script tags need to be at the bottom of the page because the code we're going to write it dependent on the `p` tag being already loaded in the browser. Our jQuery will error if there isn't a `p` tag to add text to.
35+
36+
And now, in between the script tags, add the following code:
37+
38+
```js
39+
$("#yo").append("hey hey hey hey!!!!!");
40+
```
41+
42+
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+
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.
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!
47+
748
<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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!doctype html>
2+
<head>
3+
</head>
4+
<body>
5+
6+
<p id="yo"> yo yo yo yo yo yo yo </p>
7+
8+
9+
</body>

0 commit comments

Comments
 (0)