Your SlideShare is downloading. ×
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JQuery

897

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
897
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
45
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery Er. Pradip Kharbuja
  • 2. jQuery - write less, do more... • jQuery is a fast, small and most popular JavaScript library. • It is a library for JavaScript that greatly simplifies and extends what it can do. • It helps in HTML document traversal and manipulation, event handling, animation, and Ajax which works across different browsers. • It is easier to write and perform many functions than in plain JavaScript. • wordpress, wikipedia, stackoverflow, etc are using jQuery
  • 3. How to use jQuery? • The best way is to download and install the library in a local directory. • <script type="text/javascript" src = "jquery.js"></script> • You can also use an external repository • <script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
  • 4. The structure of jQuery • jQuery provides an extension to the standard DOM model of JavaScript. In technical terms, it is a wrapper. It adapts the functionality of DOM. • jQuery provides for greater expressiveness when coding. The code statements you write in jQuery can be made to do a lot more than they would otherwise in plain JavaScript.
  • 5. Before Starting jQuery Example • We place jQuery code in an event handler called ready inside script tags. • This handler is triggered after the DOM is loaded, but before the page contents and images are placed on the document.
  • 6. jQuery Example <html> <head> <title>jQuery Demo</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ console.log("Document is ready!"); }); </script> </head> <body> </body> </html>
  • 7. jQuery Example Explained • The $ notation indicates that we want to make use of jQuery $(document) means access the document element via jQuery. • If we want to get an element with a specific tag, we use the $(tag) syntax, such as $("a"), $("p"), $("div"). $("a") gets all anchor tags and other similarly
  • 8. jQuery Example - 2 <html> <head><title>jQuery Demo</title></head> <body> <a href="http://www.nccedu.com/">NCC Education</a> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for clicking that link!"); }); }); </script> </body> </html>
  • 9. jQuery is JavaScript • jQuery is a library of JavaScript, which means we can use normal code within jQuery functions too : $(document).ready(function(){ for (i = 0; i < 10; i++) { console.log("Hello"); } });
  • 10. Manipulating HTML via jQuery • create new content dynamically and copying, deleting content 1. html( ) - gets the html content of first matched element 2. html( newContent ) - sets the HTML content of every matched element 3. text( ) 4. text( newText )
  • 11. Manipulating Attributes • jQuery even lets us change the attributes on elements. • This is done using the attr( ) function. 1. attr(name) 2. attr(name, value) 3. removeAttr(name)
  • 12. Adding CSS • We can add CSS ‘on the fly’ to elements using jQuery. • This is done using the css( ) function. • This can also be done using addClass( ), removeClass( ) 1. css(property) 2. css(property, value) 3. addClass(class) 4. removeClass(class)
  • 13. Effects in jQuery • We can make elements slowly appear, disappear, animate, and more. 1. show( ) 2. hide( ) 3. toggle( ) 4. slideDown( ) 5. slideUp( ) 6. slideToggle( ) 7. fadeIn( ) 8. fadeOut( ) 9. fadeTo( ) 10.animate( )
  • 14. Selectors • similar to CSS Selectors 1. Tag e.g. $("div"), $("a"), $("p"), etc. 2. Class ( . ) e.g. $(".error"), $(".success"), $(".info"), etc. 3. Id ( # ) e.g. $("#error"), $("#success"), $("#info"), etc.
  • 15. Selectors [Contd.] 1. $("input") 2. $(".message") 3. $("ul") 4. $("#result") 5. $("li") 6. $(".information") 7. $("p#result") 8. $("div.success") 9. $("li.a") 10.$(".myclass.otherclass") 11.$("div, p, span") 12.$("div, .error, #result")
  • 16. Selectors [Contd.] • $("p.success") vs $("p .success") $("p.success") selects all paragraphs that have a class success $("p .success") selects all the elements that are children of p and having class success This type of relationship is termed as parent-chlid or ancestor-descendent
  • 17. Selectors Examples jQuery
  • 18. Filters • jQuery also offers us a powerful mechanism for finding and manipulating elements which are filters. • e.g. :odd, :even • $("div:odd") selects odd division elements • $("div:even") selects even division elements
  • 19. Categories of Filters 1. Basic Filters 2. Content Filters 3. Visibility Filters 4. Attribute Filters 5. Child Filters 6. Form Filters
  • 20. Some More Filters... 1. :first 2. :last 3. :even 4. :eq(index) 5. :gt(index) 6. :lt(index) 7. :header 8. :not(selector) 9. :has(selector) 10.:visible 11.:hidden 12.:nth-child(index) 13.:first-child 14.:last-child 15.:input 16.:checkbox 17.:button 18.:enabled 19.:disabled 20.:checked 21.:selected
  • 21. jQuery Events 1. blur( ) 2. change( ) 3. click( ) 4. dblclick( ) 5. focus( ) 6. keydown( ) 7. keypress( ) 8. keyup( ) 9. load( ) 10.mousedown( ) 11.mousemove( ) 12.mouseout( ) 13.mouseover( ) 14.mouseup( ) 15.resize( ) 16.scroll( ) 17.select( ) 18.submit( )
  • 22. Assignment #1 • Develop different HTML pages implementing all filters discussed in previous slide. • Develop different HTML pages implementing at least 10 events discussed in previous slide. • Send to college.pradip@gmail.com before 5th September, Thursday. • If anyone fails to submit 3 assignments, his/her University Assignment marks will be 0.
  • 23. Callbacks • Most jQuery effects permit you to define a callback function to be called when the effect or animation is complete. • Callbacks allow us to be sure that our animations sync up correctly $('#btnFadeIn').click(function(e) { $('#image').fadeIn(1000, function(){ //callback function console.log("Image is visible."); }); });
  • 24. Animation... wow • We can do animation using jQuery. • The below example shows animating font size of the element. $("#btnAnimate").click (function() { $("#first").animate ({fontSize: '48px'}, 1000); });
  • 25. Benifits of jQuery jQuery is a cross browser library. Large library Ease of element selection and manipulation Simplified event handling Great documentation and tutorials Ajax support Supports plug-ins
  • 26. Questions ??? Er. Pradip Kharbuja

×