Instructobit
jQuery is a useful library that mainly handles interactions with the HTML document object model (DOM). This can be used to find elements, add new ones and delete them, and so much more.
To start with you will need to
, right click on the compressed production version and click "save as" and name the file "jquery.js". Move the file into your website directory.
To include it in your HTML document, add a script tag with the link to your jQuery file.
<script src="jquery.js"></script>
Now that is it included we can start using jquery.
To select elements with jQuery we use the function "$()". As a parameter we must provide a string containing a selector for the element or elements we wish to select, this method will return an array of elements that match the given selector. The provided selector uses the same syntax as CSS selectors (eg. "#main_div" to select element with id="main_div"). If you are unfamiliar with CSS selectors or need practice, visit
HTML:
<div>
<span id="test_span_1">test content 1</span>
<span id="test_span_2">test content 2</span>
<span id="test_span_3">test content 3</span>
</div>
Javascript:
$("span"); // returns an array of the 3 span elements in the HTML
$("#test_span_2"); // returns an array with a single element (the second span)
Once we have selected our element we can retrieve and edit the inner content of those elements just like you would with document.getElementById().innerHTML. For this we can use .html() to retrieve or set the HTML content or .text() to retrieve just the text content. Because the $() element selector returns all elements that match, it will effect all elements in the array.
HTML:
<div>
<div id="test_div_1"><p>test content 1</p></div>
<div id="test_div_2"><p>test content 2</p></div>
<div id="test_div_3"><p>test content 3</p></div>
</div>
Javascript:
div2HTML = $("#test_span_2").html(); // returns inner HTML "<p>test content 2</p>"
div2Text = $("#test_span_2").text(); // returns inner text "test content 2"
$("#test_span_2").html("<h1>new content</h1>"); // sets element's inner HTML to "<h1>new content</h1>"
jQuery also allows us to hide and show elements with the use of the hide() and show() methods, it is also possible to animate this by giving a number (in milliseconds) as a parameter, which will animate the element(s) into view with the given delay. The toggle() method will detect whether an element is displayed or not and will either hide or show it depending on its current state.
jQuery also allows us to fade elements in and out of visibility with fadeIn() fadeOut() and fadeToggle(). This works similarly to hide() and show(), and can be given a time in milliseconds to animate the effect.
HTML:
<div>
<div id="test_div_1"><p>test content 1</p></div>
<div id="test_div_2"><p>test content 2</p></div>
<div id="test_div_3"><p>test content 3</p></div>
</div>
Javascript:
$("#test_div_2").hide() // Hides the element from the user's display
$("#test_div_2").show() // Displays the element after is has been hidden (has not effect if already displayed)
$("#test_div_2").hide(500) // Hides the element with a half second animation
$("#test_div_2").show(500) // Displays the element with a half second animation
$("#test_div_2").toggle() // Hides or displays the element depending on its state
$("#test_div_2").fadeOut() // Fades out the element till it is no longer visible
$("#test_div_2").fadeIn() // Fades the element back into visibility
$("#test_div_2").fadeToggle() // Toggles the elements visibility with the fade effect
Adding and removing elements with jQuery is one of its most critical functions. A few of the most common methods that allow you to do this is append(), prepend() and remove().
-append() allows you to add HTML content to the end of a desired element
-prepend() allows you to add HTML content before all other content in the desired element
-remove() deletes the desired element entirely
HTML:
<div>
<div id="test_div_1"><p>test content 1</p></div>
<div id="test_div_2"><p>test content 2</p></div>
<div id="test_div_3"><p>test content 3</p></div>
</div>
Javascript:
$("#test_div_1").append("<p>second line</p>"); // adds this paragraph after the existing one
$("#test_div_1").prepend("<p>first line</p>"); // adds this paragraph before the existing one
$("#test_div_2").remove(); // deletes this element entirely
#test_div_1 will now have an inner HTML content of:
"<p>first line</p><p>test content 1</p><p>second line</p>"
jQuery gives us a few different methods of changing the style of an element. One such way is to change the class of the element with the methods addClass() and removeClass(). We can specify different classes within a CSS file and assign or remove them from elements, which will change the style of the element accordingly.
jQuery also allows us to directly manipulate an element's CSS properties with the css() method, which accepts the name of the property (eg. "display", "background" etc.) and the new value for that property.
HTML:
<div>
<span id="test_span_1" class="blue_span">test content 1</span>
<span id="test_span_2" class="red_span">test content 2</span>
<span id="test_span_3" class="green_span">test content 3</span>
</div>
Javascript:
$("#test_span_2").removeClass("red_span"); // removes the elements current class
$("#test_span_2").addClass("blue_span"); // adds a new class to the element
$("#test_span_3").css("background","yellow"); // changes the element's background to yellow
With jQuery we can create new event handlers at any point after the document has loaded, instead of having to add static event handlers in the HTML (eg. onclick, keypress etc.).
$(document).ready(function(){
$("#test_span_2").click(function(){
//your code here
});
});
In the above example we add an event handler for when an element is clicked. Within the click() method we include a function that is called when the element is clicked, this function can contain your code that you wish to execute with the event.
Other event methods we can use besides click include:
-keypress (activates upon the press of a key)
-mouseenter (activates when mouse enters an element)
-mouseleave (activates when mouse leaves an element)
-dblclick (activates on double click)
-focus (activates when the element is in focus)
There are also many others, but these are among the most used.
