jQuery Getting Started
Welcome message from author
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
jQueryGetting Started
What is Jquery
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is designed to change the way that you write JavaScript.
2
Advantages
Cross browser : Latest version supports: IE / FireFox / Safari / Opera /Chrome?
CSS-like syntax – easy for developers/non-developers to understand
Lightweight (compressed version)
Active developer community
Extensible - plugins3
Trends
Trends
What jQuery is not…
A substitute for knowing JavaScript jQuery is very useful, but you should still know how
JavaScript works and how to use it correctly. This means more than Googling a jQuery/JavaScript tutorial and calling yourself an expert.
The answer to every problem There is still plenty of functionality built into
JavaScript that should be utilized! Don’t turn every project into a quest to ‘jQuery-ize’ the problem, use jQuery where it makes sense. Create solutions in environments where they belong.
jQuery is a subset of Javascript
jQuery
Javascript
5 Things jQuery Provides
Select DOM (Document Object Model) elements on a page – one element or a group of them
Set properties of DOM elements, in groups (“Find something, do something with it”)
Creates, deletes, shows, hides DOM elements
Defines event behavior on a page (click, mouse movement, dynamic styles, animations, dynamic content)
AJAX calls
What pieces of Javascript do we need to understand?
Strings and numbers - basic pieces of information
Variables - where to store pieces of information
Functions - how to call reusable pieces of code
Callbacks - functions that get called in response to something else
Arrays - store a list of values (like a list of variables)
Objects - understand a little bit about these
Conditionals - controlling what parts of a program executes
What pieces of Javascript do we need to understand?
Strings and numbers - basic pieces of information
Variables - where to store pieces of information
Functions - how to call reusable pieces of code
Callbacks - functions that get called in response to something else
Arrays - store a list of values (like a list of variables)
Objects - understand a little bit about these
Conditionals - controlling what parts of a program executes
Where do we prefer?
Similar to CSS - the less 'inline' the better. (Generalization)
Downright Bad: Include as an event Even Less Good: Include in the <body> tag Less Good: Include in the <head> tag Best: Include external .js file
The DOM
jQuery is “DOM scripting”
The DOM is your html document code.
From the <!DOCTYPE> to the </html>
The DOM is "ready" when everything on the page has loaded.
• Stylesheets• JavaScripts• Images
The DOM
“The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in use.” Wikipedia
You can add and subtract DOM elements on the fly
You can change the properties and contents of DOM elements on the fly
DOM Ready
In order to make sure that jQuery can find the element you asked it for, your browser needs to have loaded it (the DOM needs to be ready).
Q. How can I be sure my code runs at DOM ready?
A. Wrap all your jQuery code with the document ready function:
$(document).ready(function(){// insert jQuery code here…
});
Or
Html:<p>Hello World! I'm Eric</p>
Script:$(function(){
$("p").addClass("isCool");//keep telling yourself that..
});Resulting html:<p class="isCool">Hello World! I'm
Eric</p>
Break It Down Now!
$(function(){ // = $(document).ready(function(){
});
$
Initiates the
jQuery function
$ =
jQuery
("p")
Grabs a DOM element using a CSS selector.
Selector is in quotes.
Creates a jQuery “Collection”
<p>
.addClass("isCool");
Built in method that adds a class to the jQuery Collection
Class is in quotes.
ends with a semicolon.
Uses the same syntax you use to style elements in CSS!
$("p")
<p>
$("div")
<div>
$("#foo")
id="foo"
$(".foo")
class="foo"
api.jquery.com/category/selectors/
Get Classy <p>
jQuery:$("p").addClass("sophisticated");
Before:<p>
After:<p class="sophisticated">
jsbin.com/ecayo3/18#slide22
This <p> Has No Class At All!
jQuery:$("p").removeClass("sophisticated");
Before:<p class="sophisticated">
After:<p class="">
jsbin.com/ecayo3/18#slide22
<div> Hide and Seek
jQuery:$("div").show();
Before:<div style="display:none;">
After:<div style="display:block;">
jQuery:$("#eric").text("Is Cool");
Before:<p id="eric">Is Lame</p>
After:<p id="eric">Is Cool</p>
jsbin.com/ecayo3/18#slide25
$("p").addClass("sophisticated").text("Hello World!").show();
Method Chaining
$("#eric").click(function(){$(this).text("Is Cool"); // this = #ericalert("Take that High School!");
});
$("#eric").click(function(event){$(this).text("Is Cool“); // this = #ericalert("Take that High School!");event.preventDefault(); //Prevents default action
});
Click Events
Some Basic Methods
•Show a hidden element.show()
•wrap an element with <a>.wrap("<a></a>")
•Select parent <p>.parent("p")
•Get/Set innerHTML.html()
•Get/Set Value.val()api.jquery.com/
Learn jQuery
Get it @ www.jquery.com Installation – download the appropriate
jquery.js file and put it in a folder
How to learn it http://learn.jquery.com/ docs.jquery.com www.visualjquery.com www.Jqueryfordesigners.com www.gscottolson.com/weblog/ - cheat sheet www.javascripttoolbox.com/jquery
jQuery Syntax
$(selector).function(…) or $.function(…) or $(selector).function1(…).function2(…).functionN(…);
$() or jQuery() JQuery objects are created by jQuery() or $() jQuery object is a wrapper for a selected node or group of DOM
nodes $(“p”) is a JQuery object containing all the “p” elements in the
document
selector reference to an element or many different elements on
in a document
Function - any jQuery supported method or plugin. (…) refers to function parameters Functions can be chained in sequence
What is a selector?
Think CSS!
jQuery has a built in DOM transversal engine.
$(selector) returns a list of elements on the page that match the “selector”.
Example: $(“input”) will return a list of ALL input elements on the page.
Using JQuery
Just add reference to Jquery JavaScript file from anywhere in your code.
Document.Ready is used to attach events and many other things using JQuery.
<html><head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript"> $(document).ready(function(){ alert(“Welcome to JQuery”);});
</script> </head> <body> <a
href="http://jquery.com/">jQuery</a>
</body> </html>
28
Document Ready enclosure
Document -> Ready is equivalent to body onload method and is executed when entire page and resources have been loaded in the DOM.
If you run the above code you will get a Javascript alert box on document load.
Look at the structure of the document.ready, it accepts a method as a parameter.
Look between the method braces
$(document).ready(function()
{ alert(“Welcome to JQuery”);});
function(){ alert(“Welcome to JQuery”);}
29
Decoding $$$$$$
By default, jQuery uses "$" as a shortcut for "jQuery“
$ is nothing but a shorthand notation for find method in JQuery. You can also use Jquery("") instead of $ ("") however use $ as it will be consistent.
$ accepts search selector. There are many search selector which helps in finding elements in DOM tree.
$ returns array of elements.30
Basic Search Selector
ID selector. Find DOM element by ID. Syntax: $("#myDiv") selects element with ID myDIV.
ID search requires # to be preFixed.
Element selector: Find all DOM element by element Type. Syntax: $("div") selects all DIV in the dom tree. Notice no prefix used.
CSS selector: Find all element with a CSS class. Syntax: $(".myClass") select all element with myClass. CSS class requires a dot.
You can also mix and match. $(“div.main”) // tag and class
$(“table#data”) // tag and id
$(“#content, .menu”) // find by id + by class
$(“h1, h2, h3, div.content”) // multiple combination Read : http://docs.jquery.com/Selectors
31
Event handling
Events in Jquery are bound to elements inside the document.ready method. The elements get bound when document.ready is fired.
$("a").click has 2 parts. 1st selector , 2nd event. The 1st part finds the element on which method is to be attached and 2nd part attaches method on the give event , in this example a Click.
Look at the syntax , event accepts a method as a parameter.
$(document).ready(function(){ $("a").click(function(){alert("Thanks for visiting!"); }); });
Read: http://docs.jquery.com
32
JQuery Events
jQuery abstracts events .click() .blur() .focus() .change() Etc…
Attached via selectors
$(<select0r>).eventname(<functionpointer> or inline);
$("a").click(function(){$(this).addClass(‘red’);});
33
Other JQuery Effects
.css(‘property’, ‘value’) .css({‘prop1’:‘value1’, ‘prop2’:’value2’…}) E.g. .css(‘color’, ‘red’)
$(“div”).show(); // just show
$(“div”).show(“slow”); // reveal slowly, slow=600ms
$(“div”).hide(“fast”); // hide fast, fast=200ms
$(“div”).toggle(100); // hide or show in 100ms
$(“div”).slideUp();
$(“div”).slideDown(“fast”);
$(“div”).slideToggle(1000);
$(“div”).fadeIn(“fast”);
$(“div”).fadeOut(“normal”);
$(“div”).fadeTo (“fast”, 0.5); // fade to a custom opacity34
Example – Show/Hide
Example – Show/Hide the old way
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of #foo</a>
function toggle_visibility(id) { var e =
document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }
Example – Show/Hide with jQuery
$().ready(function(){$("a").click(function(){
$("#more").toggle("slow");
return false; }); });
35
Considerations
Jquery can have performance implication dependent on how you write code.
Generalization is good but excess is bad. Remember every $/Find search using attribute /element ,parses the DOM for elements and excessive use can cause the browse to hang.
Use ID selector as much as possible or at least use nested selector using the ID as parent. To search all input element $("input") will perform slower than $("#tableName input") which will be faster.
Use JQuery methods only to change properties , get values and modify attribute s, to avoid cross browser issues.
Remember JQuery offers abstraction to provide a common interface for all cross browser method and members.
36
Course Resources
http://selfreliantpress.com/WP.htm – Book Website
http://jqfundamentals.com/chapter/jquery-basics - A guide to the basics of jQuery
http://www.codecademy.com/en/tracks/jquery - Learn how to make your websites interactive and create animations by using jQuery.
37
Related Documents
