0
jQuery
Er. Pradip Kharbuja
jQuery - write less, do more...
• jQuery is a fast, small and most popular JavaScript library.
• It is a library for JavaS...
How to use jQuery?
• The best way is to download and install the library in a local directory.
• <script type="text/javasc...
The structure of jQuery
• jQuery provides an extension to the standard DOM model of JavaScript.
In technical terms, it is...
Before Starting jQuery Example
• We place jQuery code in an event handler called ready inside script tags.
• This handler ...
jQuery Example
<html>
<head>
<title>jQuery Demo</title>
<script src="jquery.js" type="text/javascript"></script>
<script t...
jQuery Example Explained
• The $ notation indicates that we want to make use of jQuery
$(document) means access the docum...
jQuery Example - 2
<html>
<head><title>jQuery Demo</title></head>
<body>
<a href="http://www.nccedu.com/">NCC Education</a...
jQuery is JavaScript
• jQuery is a library of JavaScript, which means we can use normal code
within jQuery functions too :...
Manipulating HTML via jQuery
• create new content dynamically and copying, deleting content
1. html( ) - gets the html con...
Manipulating Attributes
• jQuery even lets us change the attributes on elements.
• This is done using the attr( ) function...
Adding CSS
• We can add CSS ‘on the fly’ to elements using jQuery.
• This is done using the css( ) function.
• This can al...
Effects in jQuery
• We can make elements slowly appear, disappear, animate, and more.
1. show( )
2. hide( )
3. toggle( )
4...
Selectors
• similar to CSS Selectors
1. Tag e.g. $("div"), $("a"), $("p"), etc.
2. Class ( . ) e.g. $(".error"), $(".succe...
Selectors [Contd.]
1. $("input")
2. $(".message")
3. $("ul")
4. $("#result")
5. $("li")
6. $(".information")
7. $("p#resul...
Selectors [Contd.]
• $("p.success") vs $("p .success")
$("p.success") selects all paragraphs that have a class success
$...
Selectors Examples
jQuery
Filters
• jQuery also offers us a powerful mechanism for finding and manipulating
elements which are filters.
• e.g. :odd,...
Categories of Filters
1. Basic Filters
2. Content Filters
3. Visibility Filters
4. Attribute Filters
5. Child Filters
6. F...
Some More Filters...
1. :first
2. :last
3. :even
4. :eq(index)
5. :gt(index)
6. :lt(index)
7. :header
8. :not(selector)
9....
jQuery Events
1. blur( )
2. change( )
3. click( )
4. dblclick( )
5. focus( )
6. keydown( )
7. keypress( )
8. keyup( )
9. l...
Assignment #1
• Develop different HTML pages implementing all filters discussed in previous
slide.
• Develop different HTM...
Callbacks
• Most jQuery effects permit you to define a callback function to be called when the
effect or animation is comp...
Animation... wow
• We can do animation using jQuery.
• The below example shows animating font size of the element.
$("#btn...
Benifits of jQuery
jQuery is a cross browser library.
Large library
Ease of element selection and manipulation
Simplif...
Questions ???
Er. Pradip Kharbuja
Upcoming SlideShare
Loading in...5
×

JQuery

915

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
915
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
45
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "JQuery"

  1. 1. jQuery Er. Pradip Kharbuja
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. Selectors Examples jQuery
  18. 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. 19. Categories of Filters 1. Basic Filters 2. Content Filters 3. Visibility Filters 4. Attribute Filters 5. Child Filters 6. Form Filters
  20. 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. 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. 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. 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. 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. 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. 26. Questions ??? Er. Pradip Kharbuja
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×