Introduction to JQuery
0 likes370 views
jQuery is a JavaScript library that makes it easier to write JavaScript code that runs on different browsers. It allows selecting DOM elements, traversing through them and manipulating them. jQuery simplifies tasks like handling events, animating elements, and making AJAX calls. Some key features include selecting elements by tag name, ID, or CSS class; traversing DOM elements; binding event handlers; animating elements with effects like show, hide, fade; and making asynchronous HTTP requests via AJAX.
![jQuery Traversing Examples$("span").get(0) $("span")[0] The .get() function allows you to select a single item inside a result set. Both lines of code search the DOM for all <span/> tags and return the first item inside the set of found items.var items = $("h2").size(); The .size function allows you to determine the number of elements in the result set. This code returns the number of found items and sets the value to a variable.$("h2").add("span").css("color", "green"); The .add() function allows you to add things to found items. This code finds all <h2/> elements and adds a <span/> tag with the cascading style sheet colorstyle set to green. You can use the .add() function to add selected elements, HTML fragments, another element, and more.$("h2").eq(1).css("color", "green"); The .eq() function allows you to cut down the size of your result set to a single item from the returned set. This code selects the second <h2/> item and turns it green. (Note that the index is zero based.)](https://image.slidesharecdn.com/introductiontojquery-110327084143-phpapp01/85/Introduction-to-JQuery-10-320.jpg)
Introduction to JQuery
- 1. Introduction to JQueryMuhammad AfzalMicrosoft Certified Technology Specialist
- 2. Introducing the jQuery LibraryjQuery is simply a file of JavaScript code that allows you to more easily write JavaScript code that runs in many different browsers.This code can do many things; it can work with UI styles,handleuser events, animate parts of your page, call back to the server via AJAX, and more.It is all about selecting the DOM elements , traversing through them and manipulating them.jQueryis one of the most popular and widely used framework. Even Microsoft has also contributed towards it.
- 4. Selection of DOM elementsSelect by element Finds all elements with a specified tag name and returns an array of those elements. You simply pass the name of the tag to the selector function, as in $("h2").Select by ID Allows you to select a single element by its ID. You use the pound (#) character to indicate that you are searching by ID. For example, the element, <span id="someId"> can be searched for by using the function call $("#someId").Select by cascading style sheet Allows you to find all tags with a specific cascading style sheet class name. You use a period (.) to indicate the class name. For example, to find all elements with the cascading style sheet class name of userInputStyle (as in <div class="userInputStyle">), you would use the $(".userInputStyle") selector.
- 5. Writing your first jQueryDemo1
- 6. jQuery Selector Examples$("h2:first") Used to find the first instance of the <h2> element. Similar syntax can be used for last, odd, and even.$("div:first-child") Used to select the all first child elements inside <div> tags on the page. Similar syntax can be used with last-child.$("#div1:nth-child(4)") Used to select the fourth child element inside the tag whose ID is div1.$("span:not(.sectionHead)") Used to select all <span/> tags that do not have the sectionHeadcascading style sheet class.$(":enabled") Returns all enabled elements on the page. The same syntax can also be used for disabled.$(":checked") Returns all checkbox elements on the page that are checked. Similar syntax can be used for selected items in a list.$("div:hidden") Returns all hidden <div/> tags on the page. Similar syntax can be used for visible.$(":contains(.docx)") Used to find all elements on the page that contain the text .docx.$("#div1 #div2") Finds any <div/> tags with the ID of div2 nested inside another <div/> tag with the ID of div1.$(":button") Used to find all elements of type button. You can use similar syntax with input, text, password, radio, submit, checkbox and image.
- 8. Traversing of DOM elementsThe result returned by a jQuery selector is a set of elements that match the selection criteria.Even if you only get a single element back in your selection, jQuery gives you a set of elements.This allows you to work with a single item or a collection of items by using the same syntax.Eg: $("h2").each(function (index) { ...
- 9. Traversing and manipulation of DOM elementsDemo2
- 10. jQuery Traversing Examples$("span").get(0) $("span")[0] The .get() function allows you to select a single item inside a result set. Both lines of code search the DOM for all <span/> tags and return the first item inside the set of found items.var items = $("h2").size(); The .size function allows you to determine the number of elements in the result set. This code returns the number of found items and sets the value to a variable.$("h2").add("span").css("color", "green"); The .add() function allows you to add things to found items. This code finds all <h2/> elements and adds a <span/> tag with the cascading style sheet colorstyle set to green. You can use the .add() function to add selected elements, HTML fragments, another element, and more.$("h2").eq(1).css("color", "green"); The .eq() function allows you to cut down the size of your result set to a single item from the returned set. This code selects the second <h2/> item and turns it green. (Note that the index is zero based.)
- 11. Handling Client side Events
- 12. Client side EventsThe jQuery language allows you to bind scripts to client-side events such as button clicks,mousemovement, and keyboard interaction.These are the simple event handler registration methodsjQuerydefines following eventsblur() focusin() mousedown() mouseup() change() focusout() mouseenter() resize() click() keydown() mouseleave() scroll() dblclick() keypress() mousemove() select() error() keyup() mouseout() submit() focus() load() mouseover() unload()To event registration syntax is simple $(“#elementname”).bind(“eventname”,”eventhandlder”)The unbind method can be used for deregistration of events.
- 14. Animations
- 15. Effects and AnimationsThe jQuery library provides methods for adding client-side effects to your elements such as show, hide, fade in, and more. These effects and animations are easy to use. You simply find your elements by using a jQuery search and then call the effect you want. You can also combine effects in a queue-like manner through method chaining. This is as simple as adding one method call after another, as in the following fadeIn().fadeOut().fadeIn()
- 17. Implementing Ajax with jQuery
- 18. Implementing AjaxThe jQuery.ajax() method enables you to call a web service and then update your page with the results. This method performs an asynchronous HTTP request, passes data to the request, and gets the results. You can use this method for a variety of tasks, including loading and executing a .js file, posting data to a web form, getting the HTML of a page, and sending and receiving XML data.This method takes several name-value pairs as a parameter, called settings. The settings include the URL of your request, the content-type, the HTTP method (GET or POST), and the user name and password of the request. In fact, there are more than 20 settings with which you can work.
- 19. Calling Webservice via jQueryDemo5
- 20. ResourcesjQuery official websitehttp://jquery.comMy Bloghttp://goldytech.wordpress.com
- 21. Questions?
Editor's Notes
- #2: This template can be used as a starter file for presenting training materials in a group setting.SectionsRight-click on a slide to add sections. Sections can help to organize your slides or facilitate collaboration between multiple authors.NotesUse the Notes section for delivery notes or to provide additional details for the audience. View these notes in Presentation View during your presentation. Keep in mind the font size (important for accessibility, visibility, videotaping, and online production)Coordinated colors Pay particular attention to the graphs, charts, and text boxes.Consider that attendees will print in black and white or grayscale. Run a test print to make sure your colors work when printed in pure black and white and grayscale.Graphics, tables, and graphsKeep it simple: If possible, use consistent, non-distracting styles and colors.Label all graphs and tables.
- #3: Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
- #4: This is another option for an Overview slides using transitions.
- #5: Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
- #7: Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
- #8: This is another option for an Overview slides using transitions.
- #9: Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
- #11: Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
- #12: This is another option for an Overview slides using transitions.
- #13: Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
- #15: This is another option for an Overview slides using transitions.
- #16: Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
- #18: This is another option for an Overview slides using transitions.
- #19: Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.