Date post: | 21-Jan-2018 |
Category: |
Internet |
Upload: | toni-kolev |
View: | 199 times |
Download: | 0 times |
today’s agenda01
02
03
04
05
06
What is jQuery?
jQuery basics
Searching the DOM
Chaining and Stacking
jQuery Plugins
LIVE DEMO
jQuery
What is jQuery?
STOP
Before studying jQuery you should have basic knowledge of HTML, CSS and JavaScript
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
Why is it so popular?
• It is easy to learn•Easy to extend – lots of jQuery plugins•Powerful DOM selection•Community Support
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
What jQuery can do?
•HTML/DOM manipulation•CSS manipulation•HTML event methods•Effects and animations•AJAX•Utilities
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
jQuery Syntax
How to write jQuery
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
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…
});
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 $()
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”)
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”)
The .class selector
The jQuery class selector finds elements with a specific class.
$(“.test”)
More examples of jQuery Selectors
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
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
});
Searching the DOM
More complex jQuery selectors
jQuery Traversing
•Traversing means “move through”•Used to “find” (or select) HTML elements based on their relation to other elements
•Ancestors, Descendants, Siblings, Filtering
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>
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()
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
Descendants
Descendants
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()
Selecting multiple elements
Chaining and Stacking
More complex jQuery selectors
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)
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);
StackingSome jQuery methods can chain and return a new collection of elements. For example .find() and .filter()
$(“#example”).find(“.pesho”).append(“text”);
jQuery Plugins
About 2700 plugins available
Plugins examples
http://chuckyglitch.twbbs.org/novacancy/http://dropthebit.com/demos/fancy_input/fancyInput.htmlhttp://danpalmer.me/jquery-complexify/http://harvesthq.github.io/chosen/
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.
jQuery Reference
• jQuery API documentation
http://api.jquery.com/
• jQuery Plugin Registry
http://plugins.jquery.com/