Tech Returners
JQUERY
jQuery
- jQuery is a lightweight, "write less, do more", JavaScript library.
- The purpose of jQuery is to make it much easier to use JavaScript on your website.
- jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish,
and wraps them into methods that you can call with a single line of code.
- The public announcement of jQuery was in January 14, 2006
- jQuery is just a JavaScript file that can be downloaded from the jQuery downloads page. Alternatively,
you can use the JQuery CDN, and link directly to their hosted online version.
- Compatible with older browsers
- For each version you can either get the normal production code, which is useful for your own
development, or the minified (jquery.min.js) production code, which has had all the space
(and some other unnecessary stuff) taken out to make it as small as possible, so it downloads
quicker.
- jQuery was originally called "JSelect" (for selecting elements out of the page, plus it started
with JS, which was nice). However the domain name jselect.com wasn’t available
- jQuery is still out there, widely used on productions sites. So you are likely to run into it
in the near future and for a quite bit after that as well.
-
https://code.jquery.com/
jQuery Syntax
The jQuery syntax is taylor-made for
selecting HTML elements and
performing some action on the element(s)
Basic Syntax is:
$(selector).action()
- A $ sign to define / access jQuery
- A selector to "query (or find)" HTML element(s)
- A jQuery
action() to be performed on the element(s)
Examples:
$this.hide() - hides the current element
$("p").hide() - hides all <p> elements
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
$this.hide() - hides the current element
$("p").hide() - hides all <p> elements
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
Task 1
Add jQuery into your website
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Linking a js file to your site
Add the js file wrapped in a <script> tag.
<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<link rel="stylesheet" href="Styles/style.css" type="">
</head>
<body>
...
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"</script>
<script> src="js/scripts.js"</script>
</body>
</html>