javascript library. what is jquery jquery is a lightweight javascript library. the purpose is to...
TRANSCRIPT
![Page 1: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/1.jpg)
Lecture 15: jQueryJavaScript Library
![Page 2: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/2.jpg)
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.
![Page 3: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/3.jpg)
What jQuery DoesThe jQuery library contains the following features:
HTML/DOM manipulationCSS manipulationHTML event methodsAJAXEffects and animations
![Page 4: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/4.jpg)
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>
![Page 5: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/5.jpg)
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>
![Page 6: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/6.jpg)
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)
![Page 7: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/7.jpg)
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.
![Page 8: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/8.jpg)
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.
![Page 9: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/9.jpg)
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.
![Page 10: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/10.jpg)
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();});
![Page 11: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/11.jpg)
Examples$("input").focus(function(){
$(this).css("background-color","#cccccc");});
$("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!");});
![Page 12: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/12.jpg)
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
![Page 13: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/13.jpg)
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());});
![Page 14: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/14.jpg)
Getting Attributesattr() method is used to get attribute values.
For example:
$("button").click(function(){ alert($("#linkGoogle").attr("href"));
alert($(“#mainContent”).attr(“style”);});
![Page 15: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/16.jpg)
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");});
.
![Page 17: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/17.jpg)
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");});
.
![Page 18: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/18.jpg)
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");});
.
![Page 19: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/19.jpg)
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" });});
![Page 20: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/20.jpg)
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
![Page 21: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/21.jpg)
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”);
![Page 22: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/22.jpg)
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
![Page 23: JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website](https://reader036.vdocuments.site/reader036/viewer/2022062305/5697bf7d1a28abf838c84822/html5/thumbnails/23.jpg)
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");