jQuery is a JavaScript library that makes writing JavaScript for websites easier and more browser friendly.
jQuery is used to make your website more dynamic! Write less, do more.
Before you can start coding jQuery, the library needs to be added to your site.
It should go in the head section of your HTML. Take a second to add this line of code to your site.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
A Content Delivery Network
Also called a content distribution network, is an interconnected system of cache servers that use geographical proximity as a criteria for delivering web content.
In order for jQuery to manipulate HTML, it needs to make sure that the HTML is fully loaded before running the jQuery.
$(document).ready(function(event){
// jQuery code goes in here
});
So whenever you write jQuery, you'll need to wrap that code in a document.ready function, as shown below:
$() is a shortcut for jQuery(). The $() is made for selecting an element and then returning that element to perform an action on it.
The following code selects the element that has the ID header in the HTML.
This is how you access HTML elements with jQuery. Once you have the element in the jQuery object, you can do stuff to it.
Create a new JavaScript file in Editey called main.js. Save it to your project folder.
Add the following line of code to your index.html file right BEFORE the closing </body> tag.
<script src="main.js"></script>
$(document).ready(function(event){
alert('it works!');
});
Just like in HTML and CSS, comments are for developers and are not interpreted by the browser.
Your code has two sets of comments. They show the two different ways of formatting comments.
One is to surround the comment by /* on one side and */ on the other. These comments can be multiple lines long.
/* This comment
is three
lines long. */
Two is to have // before the comment. This kind of comment can only be one line long.
// This comment is only one line long.
Because jQuery is widely used, a lot of people have created jQuery code(plugins) that you can download and easily add to your own site.
jQuery plugins will come with an external file that you will need to download and reference in your site. Then you 'initialize' their jQuery by connecting it to one of your own HTML elements.
Now we're going to step through together how to add a slideshow jQuery plugin.
Start by Googling 'Owl Slider' or go to: https://owlcarousel2.github.io/OwlCarousel2/
In the head tag section of your HTML, add these 2 stylesheets:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" />
AFTER your jQuery script tag in the head tag of your project, add the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
In your HTML, add the following HTML where you want your slider to appear.
<div class="owl-carousel owl-theme slideshow">
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
Download 3 images from the internet and put them in your project folder.
Each time it says 'Content' in the HTML, replace the word Content with an img tag.
<div class="owl-carousel owl-theme slideshow">
<div><img src="captain.png" /></div>
<div><img src="hyperlink.png" /></div>
<div><img src="cape.png" /></div>
</div>
In your main.js file, add the following code:
/* Get The Document Ready! */
$(document).ready(function(event){
// Owl Slider
$('.slideshow').owlCarousel({
item: 1
});
});
Funtions are a way of reusing code in JavaScript.
The .owlCarousel function lets you reuse all the owl carousel code to create a slider.
jQuery plugins have options which allow you to customize the way the plugin works and displays on the page.
The plugin documentation explains what options there are and what values you can put in them. Sometimes the documentation refers to options as settings.
Explore the Owl Slider options and update your slider.
Add one of these jQuery Plugins to your site: