jQuery JavaScript is a powerful language but it is not always easy to work with. jQuery is a JavaScript library that helps with: – HTML document traversal – HTML manipulation – Event handling – Animation – Ajax Get it here: http://jquery.com/ Learn more here: http://learn.jquery.com
24
Embed
JQuery JavaScript is a powerful language but it is not always easy to work with. jQuery is a JavaScript library that helps with: – HTML document traversal.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
jQuery
JavaScript is a powerful language but it is not always easy to work with.
Just because you can use parent() doesn't mean you always should!
//Finds a specific element
$(“span”).parent().parent();
This code is easier to read:
//Finds the nearest ancestor
//li element
$(“span”).closest(“li”);
Change Text
Let's say you want to dynamically change the text in an h1 tag:
$(“h1”).text(“Hello!”);
Or maybe you just want to grab the text to do something with it later:
var text = $(“h1”).text();
Document ReadyIf you just write your JavaScript or jQuery in a script tag
without wrapping it in any functions, it will execute as soon as the browser reads it. But that would be before the DOM has finished loading, so it won't find your HTML elements.
You can execute code when the document has finished loading (not including images that may still be downloading) by using the “document ready” function:
$(document).ready(function() {
// Your code here.
});
Adding Elements
Create an element:
var listItem = $(“<li>Some Text</li>”);
Add an element to the DOM:
$(“ul”).append(listItem); //add as last child
$(“ul”).prepend(listItem); //add as first child
$(“ul”).before(listItem); //add before ul
$(“ul”).after(listItem); //add after ul
Adding Elements
One way:
$(“ul”).append(listItem); //add as last child
$(“ul”).prepend(listItem); //add as first child
$(“ul”).before(listItem); //add before ul
$(“ul”).after(listItem); //add after ul
Another way:
listItem.appendTo($(“ul”)); //add as last child
listItem.prependTo($(“ul”)); //add as first child
listItem.insertBefore($(“ul”)); //add before ul
listItem.insertAfter($(“ul”)); //add after ul
Removing Elements
Removing one or more elements is simple:
$(“li”).remove()
Event Handlers
Add a click event handler to all button elements:
$(“button”).click(function(event) {
});
Anonymous Function
Passing Functions as Arguments
If you wanted to pass arguments into the button's click function
Wrong
$(“button”).click(myFunction(myParam));
Right
$(“button”).click(function () {
myFunction(myParam);
});
Event Handlers – Prevent Default Behavior
You can prevent the default behavior of an event using the following:
$(“button”).click(function(event) {
event.preventDefault();
});
$(this)
Sometimes you will want to refer to the element that the event occurred on. In many languages, including JavaScript, there is a this keyword.
$(“button”).click(function(event) {
$(“button”).text(“Clicked”) //WRONG
this.text(“Clicked”); //WRONG
$(this).text(“Clicked”); //RIGHT
});
Changing CSS Classes
Add or Remove a CSS class:
$(“button”).addClass(“someClass”);
$(“button”).removeClass(“someClass”);
HTML 5 Data
HTML 5 added data attributes:
<div class=”product” data-price=”19.99”>
...
<button type=”button”>How Much?</button>
</div>
$(“button”).click(function() {
var price = $(this).closest(“.product”).data(“price”);
//do something with the price
});
HTML 5 Data
Another way to write it...
<div class=”product” data-price=”19.99”>
...
<button type=”button”>How Much?</button>
</div>
$(“.product”).on(“click”, “button”, function() {
var price = $(this).closest(“.product”).data(“price”);
//do something with the price
});
Form Data
To pull data out of an input box...
$(“#someInput”).val();
To set data in an input box...
$(“#someInput”).val(“new value”);
Show / Hide
Show or hide element(s). There are optional parameters for animation available.
A callback is a function that is called automatically at a later time. For example, if you make an AJAX request, it may take some time for the data to return (even if only a second). The beauty of AJAX is that it's asynchronous – in other words, code execution continues without waiting for the data to be returned.
You may, however, want to execute code when the AJAX request returns. You can specify a callback function to handle this need.