FFW Gabrovo PMG - jQuery
-
Upload
toni-kolev -
Category
Internet
-
view
199 -
download
0
Transcript of FFW Gabrovo PMG - jQuery
![Page 1: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/1.jpg)
![Page 3: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/3.jpg)
today’s agenda01
02
03
04
05
06
What is jQuery?
jQuery basics
Searching the DOM
Chaining and Stacking
jQuery Plugins
LIVE DEMO
![Page 4: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/4.jpg)
jQuery
What is jQuery?
![Page 5: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/5.jpg)
STOP
Before studying jQuery you should have basic knowledge of HTML, CSS and JavaScript
![Page 6: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/6.jpg)
jQuery Introduction
• jQuery is a cross-platform JavaScript library• Initial release 2006•Designed to simplify client-side scripting of HTML• Installed on 65% of top 10 million highest-trafficked sites• jQuery is free and open source
![Page 7: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/7.jpg)
Why is it so popular?
• It is easy to learn•Easy to extend – lots of jQuery plugins•Powerful DOM selection•Community Support
![Page 8: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/8.jpg)
Browser support
• jQuery 1.x, 2.x and 3.x versions• jQuery 1.x supports IE 6-8, Opera 12.1.x and Safari 5.1+•2.x and 3.x versions are used for modern browsers support
![Page 9: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/9.jpg)
What jQuery can do?
•HTML/DOM manipulation•CSS manipulation•HTML event methods•Effects and animations•AJAX•Utilities
![Page 10: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/10.jpg)
How to use jQuery?
• jQuery is a single JavaScript file and you can reference it with the HTML <script> tag
•Download jQuery from official site (mobile apps)•Self host it (websites)•Use it from CDN (content delivery network)- Microsoft, jQuery, Google CDNs
![Page 11: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/11.jpg)
jQuery Syntax
How to write jQuery
![Page 12: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/12.jpg)
How to write jQuery?With jQuery you select (query) HTML element(s) and perform actions on it/them
Basic syntax is $(selector).action()
• $ is used to access jQuery• (selector) to “query (find)” HTML element(s)• jQuery action() to be performed on the element(s)
$(“p”).hide() – will hide all <p> elements
![Page 13: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/13.jpg)
The Document Ready Event$(document).ready(function(){
// jQuery methods go here…
});
This is used to prevent any jQuery code from running before the document is finished loading (is ready). For example jQuery code will fail to hide an element that has not been created yet.
$(function(){
// jQuery methods go here…
});
![Page 14: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/14.jpg)
jQuery Selectors
• The most important part of jQuery library• Used to “find” (or select) HTML elements based on their
name, id, classes, types, attributes, values of attributes and more.
• It is based on the existing CSS selectors, and in addition it has some custom
• All selectors start with dollar sign and parentheses $()
![Page 15: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/15.jpg)
The element selector
The jQuery element selector selects elements based on the element name. You can select all <p> elements on a
page like this:
$(“p”)
![Page 16: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/16.jpg)
The #id selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use #id selector when you want to find a single, unique element. Example
$(“#test”)
![Page 17: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/17.jpg)
The .class selector
The jQuery class selector finds elements with a specific class.
$(“.test”)
![Page 18: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/18.jpg)
More examples of jQuery Selectors
![Page 19: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/19.jpg)
jQuery Event MethodsAll the different visitor’s actions that a web page can respond to are called events. An event represents the precise moment when something happens.
For example:• Moving a mouse over an element• Selecting a radio button• Clicking on an element
![Page 20: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/20.jpg)
Syntax for jQuery Event Methods
To assign a click event to all paragraphs on a page you can do this by:
$(“p”).click();
The next step is to define what should happen when the event fires. You must pass a function to the event:$(“p”).click(function(){
// action goes here
});
![Page 21: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/21.jpg)
Searching the DOM
More complex jQuery selectors
![Page 22: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/22.jpg)
jQuery Traversing
•Traversing means “move through”•Used to “find” (or select) HTML elements based on their relation to other elements
•Ancestors, Descendants, Siblings, Filtering
![Page 23: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/23.jpg)
jQuery Traversing
• The <div> element is the parent of <ul>, and an ancestor of everything inside of it• The <ul> element is the parent of both <li> elements, and a child of <div>• The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>• The <span> element is a child of the left <li> and a descendant of <ul> and <div>• The two <li> elements are siblings (they share the same parent)• The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>• The <b> element is a child of the right <li> and a descendant of <ul> and <div>
![Page 24: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/24.jpg)
Ancestors
An ancestor is a parent, grandparent, great-grand parent and so on. With jQuery you can traverse up the DOM tree to find ancestors of an element.
parent() – direct parent, single level upparents() – all parents all the way up to the root
(<html>)parentsUntil()
![Page 25: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/25.jpg)
DescendantsDescendant is a child, grandchild, great-grandchild and so on
.children() – this method returns all direct
children of the selected element. Traverses only a single level down the DOM tree.find() – returns descendant elements of the
selected element all the way down to the last descendant
![Page 26: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/26.jpg)
Descendants
![Page 27: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/27.jpg)
Descendants
![Page 28: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/28.jpg)
Siblings
Siblings share the same parent.
.siblings() – all siblings of an element
.next() – the next sibling of an element
.nextAll() – all next siblings
.nextUntil()
.prev(), .prevAll() & .prevUntill()
![Page 29: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/29.jpg)
Selecting multiple elements
![Page 30: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/30.jpg)
Chaining and Stacking
More complex jQuery selectors
![Page 31: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/31.jpg)
Chaining
In jQuery you can chain together actions/methods.
Chaining allows you to run multiple jQuery methods (on the same element) within single statement.
This way, browsers do not have to find the same element(s) more than once (saves time)
![Page 32: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/32.jpg)
Chaining (2)$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
To chain an action you simply append the action to the previous action.
When chaining the line of code could become long, however jQuery is not very strict on the syntax. You can format it like you want, including line breaks and indentations.
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
![Page 33: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/33.jpg)
StackingSome jQuery methods can chain and return a new collection of elements. For example .find() and .filter()
$(“#example”).find(“.pesho”).append(“text”);
![Page 34: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/34.jpg)
jQuery Plugins
About 2700 plugins available
![Page 35: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/35.jpg)
Plugins examples
http://chuckyglitch.twbbs.org/novacancy/http://dropthebit.com/demos/fancy_input/fancyInput.htmlhttp://danpalmer.me/jquery-complexify/http://harvesthq.github.io/chosen/
![Page 36: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/36.jpg)
LIVE DEMO
Now I will show you some live demo, using most of
the things we talked about today, so you can see
everything in action.
![Page 37: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/37.jpg)
jQuery Reference
• jQuery API documentation
http://api.jquery.com/
• jQuery Plugin Registry
http://plugins.jquery.com/
![Page 38: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/38.jpg)
![Page 39: FFW Gabrovo PMG - jQuery](https://reader034.fdocuments.us/reader034/viewer/2022042707/58f0f1f41a28abdb4f8b45c1/html5/thumbnails/39.jpg)