jquery

1. Agrani SPA Team CIVIL GOVERNMENT SERVICESMINING & METALSOIL, GAS & CHEMICALS POWER jquery

2. 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

3. 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>.

4. Enter jQuery (and JavaScript)! • The language we use to give the browser directions is JavaScript. • Every browser comes with a built-in JavaScript interpreter that takes the directions you write in between the <script> tags and translates those directions into different kinds of action on the web page.

5. The hidden structure of a web page

6. What is jquery • jqueryis an open source JavaScript library that simplifies the interactions between an HTML document, or more precisely the Document Object Model (DOM), and JavaScript. • It was released in January 2006 at Bar Camp NYC by John Resig. • It is currently developed by a team of developers led by Dave Methvin. • Used by over 65% of the 10,000 most visited websites, • jqueryis the most popular JavaScript library in use today. • It has a great community, great documentation, tons of plugins, and it was recently adopted by Microsoft

7. 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

8. Browser Support • Firefox 2.0+ • Internet Explorer 6+ • Safari 3+ • Opera 10.6+ • Chrome 8+

9. 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

10. How does that work?

11. 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.

12. “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.”

13. jQuery Core Concepts

14. Selectors and Methods

15. Basic Selectors

16. 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

17. Selecting Elements (Continue) • Select Element By Tag Name • Get all of the elements in the DOM

18. Selecting Elements (Continue) • Selecting by CSS Styles

19. Selecting Elements (Continue) • Selecting by Attributes

20. 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.

21. Selecting Elements (Continue) • Selection Using Basic Filters

22. jQuery selectors and jQuery methods

23. jQuery events and functions

24. 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.

25. How an Event Works

26. Behind the scenes of an event listener • Event listeners are the browser’s way of paying attention to what a person does on a page, and then telling the JavaScript interpreter if it needs to do something or not. • jQuery gives us very easy ways to add event listeners to any element on the page, so users are no longer just clicking on links and buttons!

27. Binding an event • When we add an event to an element, we call this binding an event to that element. When we do this, the event listener knows to tell the JavaScript interpreter what function to call. • There are two ways of binding events to elements.

28. 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!

29. Removing an event • Just like binding events to elements, you often need to remove events from elements

30. 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.

31. The nuts and bolts of a function • To create a function, you need to use a consistent syntax that ties the name of the function with the code that it runs. This is the syntax for the most basic JavaScript function:

32. There are two ways to give names to functions.

33. 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.

34. 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.)

35. 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.

36. Use conditional logic to make decisions • jQuery uses JavaScript’s conditional logic features • Using conditional logic, you can run different code based on decisions you want your code to make, using information it already has.

37. Jquery Web Page Manipulation

38. Swinging through the DOM tree • DOM is built like a tree. • It has a root, branches, and nodes • The JavaScript interpreter in a browser can traverse (and then manipulate) the DOM, and jQuery is especially good at it. • DOM traversal simply means climbing up and down and across the DOM

39. Traversal methods climb the DOM • jQuery’s traversal methods allow us to get at those element relationships.

40. 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:

41. Variables can store elements, too • Variables must be pretty useful because we find ourselves needing them again. • Wouldn’t it be convenient if JavaScript variables could store our elements too?

42. There’s that dollar sign again…

43. Store elements in an array • When we select and detach the li elements and set a variable ($f) to the result, jQuery takes the elements the DOM returns and stores them neatly for us in a JavaScript array.

44. 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.

45. Use filter methods to narrow your selections (Part 1)

46. Use filter methods to narrow your selections (Part 2)

47. The each method loops through arrays

48. jQuery and Ajax

49. Understanding Ajax • Ajax, which stands for “Asynchronous JavaScript and XML,” is a way of passing data in a structured format between a web server and a browser, without interfering with the website visitor

50. 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