View
226
Download
1
Category
Tags:
Preview:
Citation preview
Lecture 15: jQueryJavaScript Library
What is jQueryjQuery is a lightweight JavaScript library.
The purpose is to make it easier to use JavaScript code on your website
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
What jQuery DoesThe jQuery library contains the following features:
HTML/DOM manipulationCSS manipulationHTML event methodsAJAXEffects and animations
Adding jQuery to Your WebsiteDownloading jQuery Library to your computer
From jQery.com
The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag
for example:<head><script src="jquery-1.11.0.min.js"></script></head>
Another Method If you don't want to download and host jQuery yourself, you
can include it from a CDN (Content Delivery Network).
For example: getting jQuery Library from Google,
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script></head>
jQuery Syntax The jQuery syntax is tailor made for selecting HTML
elements and performing some action on the element(s).
Basic syntax is: $(selector).action()$ sign to define/access jQuery(selector) to “find" HTML elementsjQuery action() to be performed on the element(s)
Examples$("p").hide() - hides all <p> elements.$(".test").hide() - hides all elements with class="test".$("#test").hide() - hides the element with id="test".
Basically, you can use CSS style selector to find a particular element in your HTML document.
Document.ready() functiondocument.ready() is a function from jQeury.
$(document).ready(function(){ //your own jQeury code.
});
This is to prevent any jQuery code from running before the document is finished loading.
jQuery SelectorsjQuery selectors are used to find HTML elements based on their
id, classes, types, attributes, etc.
All selectors in jQuery start with the dollar sign and parentheses: $().
For example: $(“p”) , $(“.conclusion”), $(“#creditCard”)
This will find all of <p> elements in the HTML document.
jQuery Event HandlingIn jQuery, most DOM events have an equivalent jQuery
method.
To assign a click event to all paragraphs on a page, $("p").click();
Next, define how to react if the event happens:$("p").click(function(){ $(this).hide();});
Examples$("input").focus(function(){
$(this).css("background-color","#cccccc");});
$("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!");});
JQuery: get() functionThree simple jQuery methods for DOM manipulation are:
text() - Sets or returns the text content of selected elementshtml() - Sets or returns the content of selected elements
(including HTML markup)val() - Sets or returns the value of form fields
Examples of getting contents$("#btn1").click(function(){
alert("Text: " + $("#test").text());});
$("#btn2").click(function(){ alert("HTML: " + $("#test").html());});
$("#btn3").click(function(){ alert("Value: " + $("#firstname").val());});
Getting Attributesattr() method is used to get attribute values.
For example:
$("button").click(function(){ alert($("#linkGoogle").attr("href"));
alert($(“#mainContent”).attr(“style”);});
JQuery: set() functionWe will use the same three methods to set
content:text() - Sets or returns the text content of
selected elementshtml() - Sets or returns the content of selected
elements (including HTML markup)val() - Sets or returns the value of form fields
Examples of setting contents$("#btn1").click(function(){
$("#test1").text("Hello world!");});
$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>");});
$("#btn3").click(function(){ $("#test3").val(“Hello World");});
.
Examples of setting contents$("#btn1").click(function(){
$("#test1").text("Hello world!");});
$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>");});
$("#btn3").click(function(){ $("#test3").val(“Hello World");});
.
Examples of setting contents$("#btn1").click(function(){
$("#test1").text("Hello world!");});
$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>");});
$("#btn3").click(function(){ $("#test3").val(“Hello World");});
.
Example of setting attributesattr() - is used to set/change attribute value(s).
For example:
$("button").click(function(){ $("#mainContent").attr({ “style" : “background-color: yellow", “font-size” : “20pt" });});
jQuery: Add ElementsWe will look at four jQuery methods that are used to add
new content:append() - Inserts content at the end of the selected elementsprepend() - Inserts content at the beginning of the selected
elementsafter() - Inserts content after the selected elementsbefore() - Inserts content before the selected elements
ExamplesAppend() - inserts content at the END of the selected HTML
elements.$("p").append("Some appended text.");
prepend() - inserts content at the BEGINNING of the selected HTML elements.$("p").prepend("Some prepended text.");
after() - inserts content AFTER the selected HTML elements.$(“firstname”).after(“Guanyu”);
Remove ElementsTo remove elements and content, there are mainly two
jQuery methods:remove() - Removes the selected element (and its child
elements)empty() - Removes the child elements from the selected
element
Examplesremove() - removes the selected element(s) and its child
elements$("#div1").remove();
The jQuery empty() method removes the child elements of the selected element(s).$("#div1").empty();
remove() method also accepts one parameter, which allows you to filter the elements to be removed.$("p").remove(“#mainContent");
Recommended