MOCKSTACKS
EN
Questions And Answers

More Tutorials









Jquery Tutorial


Create a file hello.html with the following content:

<!DOCTYPE html>
<html>
<head>
 <title>Hello, World!</title>
</head>
<body>
 <div>
 <p id="hello">Some random text</p>
 </div>
 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 <script>
 $(document).ready(function() {
 $('#hello').text('Hello, World!');
 });
 </script>
</body>
</html>


Open this file in a web browser. As a result you will see a page with the text: Hello, World!

Explanation of code

1. Loads the jQuery library from the jQuery CDN:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>


This introduces the $ global variable, an alias for the jQuery function and namespace.
Be aware that one of the most common mistakes made when including jQuery is failing to load the library BEFORE any other scripts or libraries that may depend on or make use of it.

2. Defers a function to be executed when the DOM (Document Object Model) is detected to be "ready" by jQuery:

// When the `document` is `ready`, execute this function `...`
$(document).ready(function() { ... });
// A commonly used shorthand version (behaves the same as the above)
$(function() { ... });


3. Once the DOM is ready, jQuery executes the callback function shown above. Inside of our function, there is only one call which does 2 main things:

1. Gets the element with the id attribute equal to hello (our selector #hello). Using a selector as the passed argument is the core of jQuery's functionality and naming; the entire library essentially evolved from extending document.querySelectorAllMDN.

2. Set the text() inside the selected element to Hello, World!.
# ↓ - Pass a `selector` to `$` jQuery, returns our element

$('#hello').text('Hello, World!');


# ↑ - Set the Text on the element

Conclusion

In this page (written and validated by ) you learned about Jquery Tutorial . What's Next? If you are interested in completing Jquery tutorial, your next topic will be learning about: Jquery namespace collisions.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.