660 likes | 955 Vues
Agrani SPA Team. CIVIL GOVERNMENT SERVICES MINING & METALS OIL, GAS & CHEMICALS POWER. jquery. Agenda. Power of Script What is jquery What Good in jquery Browser Support Including the jquery Library Code in an HTML Page Traversing the DOM Selecting Element Using jquery Events
E N D
Agrani SPA Team CIVIL GOVERNMENT SERVICESMINING & METALSOIL, GAS & CHEMICALS POWER jquery
Agenda • Power of Script • What is jquery • What Good in jquery • Browser Support • Including the jquery Library Code in an HTML Page • Traversing the DOM • Selecting Element Using jquery • Events • Advanced Events • jQuery Plugins • jQuery and Ajax • Unit Testing
Power of script • To change your web pages on the fly, without reloading, you need to talk to your browser. • How do you pull that off ? With an HTML tag known as <script>.
What Good in jquery • Cross-browser Compatibility • It’s small (18 KB minified and 114 KB, uncompressed) • Lightweight Footprint • CSS3 Compliant • Short Learning curve & Great Documentation • Tons of Plugins • jquery UI • Save Development Time • Open source allows fast and dynamic growth • Traversing and Selection of DOM elements is easy • It plays well with AJAX
Browser Support • Firefox 2.0+ • Internet Explorer 6+ • Safari 3+ • Opera 10.6+ • Chrome 8+
jQuery makes the DOM less scary • The DOM can seem complex and intimidating, but luckily for us, jQuery keeps it simple. • When you want to control the DOM, jQuery makes it much easier
Including the jqueryLibrary Code in an HTML Page • Use the Google-hosted content delivery network (CDN) to include a version of jQuery • Download your own version of jQuery from jQuery.com and host it on your own server or local file system.
“HELLO WORLD” EXAMPLE • a minified version of jQuery is loaded from an online CDN over the Web • The jQuery function is called with the document object passed in as a parameter. • This creates a jQuery wrapper object which has a ready() method whose only argument is a function • This function is invoked when the browser has finished converting the HTML on the page into the document object model (or DOM). • At that moment, your function displays an alert, “Hello World.”
Selecting Elements • jQuery provides a myriad of ways to select DOM elements: you can select elements by attributes, element type, element position, CSS class, or a combination of these. The syntax for selecting elements is as follows: • Select Element By Id
Selecting Elements (Continue) • Select Element By Tag Name • Get all of the elements in the DOM
Selecting Elements (Continue) • Selecting by CSS Styles
Selecting Elements (Continue) • Selecting by Attributes
Selecting Elements (Continue) Selecting by Position Elements can also be selected by their relation to other elements (child/parent relationships), or by hierarchical position in a document li:evenreturns the even numbered members of the matched set. li:oddreturns the even numbered members of the matched set. li:firstreturns the first element of the matched set. li:lastreturns the last element of the matched set. li:eq(3) returns the 4th element in the matched set. li:gt(2) returns all elements of index greater than 2 in the matched set. li:lt(3) returns all elements of index less than 3 in the matched set.
Selecting Elements (Continue) • Selection Using Basic Filters
What is an Event • An event is a mechanism that allows you to run a piece of code when something happens on the page (like a user clicking a button). • The code that gets run is a function, and functions allow you to make your jQuery more efficient and reusable.
Triggering events • Events can be triggered by a wide variety of things on any given page. In fact, your entire browser is eventful, and pretty much any part of it can trigger events!
Removing an event • Just like binding events to elements, you often need to remove events from elements
What is Function • A function is a block of code, separate from the rest of your code, that you can execute wherever you want in your script. • jQuery provides a lot of functions for you, but you can also write your own custom functions to provide features not supplied by jQuery. • Custom functions allow you to organize a chunk of jQuery code by name so that it can be easily reused.
The anonymous function • Anonymous, or self-executing, functions don’t have a name, and they get called immediately when they’re encountered in the code. • Also, any variables declared inside these functions are available only when the function is running.
Passing a variable to a function • When variables are added (or passed) into functions, they are known as arguments. (Sometimes you may see them referred to as parameters too.)
Functions can return a value, too • Returning information from a function involves using the return keyword, followed by what should be returned. • The result is then returned to the code that called the function, so we can use it in the rest of our code.
Traversal methods climb the DOM • jQuery’s traversal methods allow us to get at those element relationships.
Chain methods to climb farther • What if we want to climb higher, lower, or deeper? Strap on the chains, man! jQuery offers us method chaining. Method chaining lets us manipulate and traverse our pages in a more effective way. Here’s how it works:
Insert HTML content into the DOM • Up to this point, we’ve either removed or replaced elements in the DOM. Fortunately for us, the creators of the jQuery library gave us many ways to insert stuff into the DOM. The ones we’ll look at are before and after.
The X factor • XML is an acronym for eXtensibleMarkup Language. It offers a widely adopted, standard way of representing text and data in a format that can be processed without much human interaction • XML is easy to create and edit; all you need is a simple text editor, and the XML declaration at the top of the file. • XML doesn’t DO anything : XML doesn’t really do much itself. XML structures and stores information for transportation. In fact, XML is really a meta language for describing markup languages. In other words, XML provides a facility to define tags and the structural relationships between them