Skip to content

Updated code examples with comments. #553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Updated code examples with comments. #553

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 67 additions & 33 deletions page/about-jquery/how-jquery-works.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,35 @@ This is a basic tutorial, designed to help you get started using jQuery. If you

```
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>

// Your code goes here.

</script>
</body>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>

<!--Keep in mind, this text in here is all commented code.
It will be ignored -->

<!--This is where more html code could be written. -->

<!--Below you will see the script tage with an attribute src. Setting
src to a file gives access to everything in that file. -->

<script src="jquery.js"></script>
<script>
/*You are now looking at a comment in Javascript. Being inside
of a <script> means you are in Js. You can now use jQuery.*/

// Your code goes here.

</script>
</body>
</html>
```

The `src` attribute in the `<script>` element must point to a copy of jQuery. Download a copy of jQuery from the [Downloading jQuery](http://jquery.com/download/) page and store the `jquery.js` file in the same directory as your HTML file.
The `src` attribute in the `<script>` element must point to a copy of jQuery. Download a copy of jQuery from the [Downloading jQuery](http://jquery.com/download/) page and store the `jquery.js` file in the same directory as your HTML file. To make things easier, rename the downloaded jQuery file to 'jquery.js'. For example, if you downloaded 'jquery-2.1.1.min.js' rename it to 'jquery.js'.

### Launching Code on Document Ready

Expand Down Expand Up @@ -90,24 +101,47 @@ The following example illustrates the click handling code discussed above, embed
```
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>

$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});

</script>
</body>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>

<!--Keep in mind, this text is all commented code.
It will be ignored -->

<!--This is where more html code could be written. -->

<!--We need all of the elements to load completely so the jQuery
is put at the end of the body -->

<!--Depending on the jQuery that you downloaded, rename it to
jQuery.js and put it in the same folder/directory as the html
file -->

<!--Below you will see the script tage with an attribute src. Setting
src to a file gives access to everything in that file. -->

<script src="jquery.js"></script>
<script>
/*You are now looking at a comment in Javascript. Being inside
of a <script> means you are in Js. You can now use jQuery.*/

//The money sign is a call to an object - It will be explained
//later in the documentation.

$( document ).ready(function()
{
$( "a" ).click(function( event )
{
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});

</script>
</body>
</html>
```

Expand Down