Your SlideShare is downloading. ×
0
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
J query lecture 1
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

J query lecture 1

162

Published on

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

No Downloads
Views
Total Views
162
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
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. . ABDULLAH KHOKHAR
  • 2. WHAT IS JQUERY • JQuery is a fast, small, and feature-rich JavaScript library. • Simplifies the interaction between HTML and JavaScript. • It makes things like HTML document (DOM) – – – – – traversal manipulation event handling animation and Ajax • JQuery is a easy-to-use API that works across a multitude of browsers
  • 3. WHY JQUERY • Lightweight : 19KB in size (Minified and Gzipped) • CSS1 - 3 Complaint • Cross Browser – (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)
  • 4. JQUERY IS CROSS-BROWSER • A huge issue facing JavaScript is that no two browsers handle JavaScript in the same way. • The way you locate page elements so you can work with them in code varies from browser to browser in a way that makes programmers’ hair stand on end. • jQuery puts an end to that worry by giving you a common set of functions across all browsers.
  • 5. WHO’s USING JQUERY
  • 6. MOST POPULAR LIBRARIES • • • • • • • YUI Prototype Dojo Jquery Mootools ExtJS Underscore
  • 7. INITIAL REQUIREMENTS • JAVASCRIPT – A scripting language(client side mostly) • DOM – The way browser manipulates a web page in memory • HTML – A markup language for web page
  • 8. ADVANTAGES • DOM MANIPULATION – DOM element selections functions – DOM traversal and modification • CROSS BROWSER – CSS manipulation • EVENT MANAGEMENT • SIMPLIFIED AJAX • EFFECTS AND ANIMATIONS • JAVASCRIPT PLUGINS
  • 9. DOM TREE
  • 10. JQUERY IN YOUR PAGE <html> <head> <script src="path/to/jquery-x.x.js"></script> <script> $(document).ready(function(){ // Start here }); </script> </head> <body> … </body> </html>
  • 11. JQUERY PHILOSOPHY
  • 12. JQUERY PHILOSOPHY FIND SOME ELEMENTS } } $(“div”).addClass(“xyz”); Do something with them jQuery Object
  • 13. JQUERY HELLO WORLD EXAMPLE <html> <head> <title>jQuery Hello World</title> <script type="text/javascript" src="jquery-1.4.2.js"></script> </head> <script type="text/javascript"> $(document).ready(function(){ $(“p").html("Hello World !! (display due to jQuery)"); }); </script> <body> </html> <p></p> </body>
  • 14. EASIER TO WRITE JQUERY THAN PURE JAVASCRIPT
  • 15. JQUERY SELECTORS • • The jQuery selectors are one of the main feature in jQuery library. These selectors uses CSS syntax to allow page developer to easily identify the elements of page to operate upon with jQuery library methods. Note: For using JQuery library most effectively, you must be familiar with jQuery selectors. Syntax pattern of jQuery selector : $(selector).methodName(); • The selector is a string expression that identify the element on which the method has to be implemented. • Examples $("p").click(); $("p").hide();
  • 16. JQUERY AND SELECTORS Selector Name Description #id ID Selector Selects a single element with the specified ID. element Type Selector Selects all elements with the specified name. .class Class Selector Selects all elements with the specified class. * All Selector Selects all elements. selector1, selector2, selectorN Multiple /Compound selector Selects the combined results of all the selectors. ancestor descendant descendant selector Selects all elements that are descendants of a given ancestor. A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element. parent > child Child Selector Selects all direct child elements specified by child of elements specified by parent. previous + next next adjacent selector Selects all next elements matching "next" that are immediately preceded by a sibling "prev". previous ~ siblings next siblings selector Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector.
  • 17. JQUERY / DOM COMPARISON
  • 18. JQUERY / DOM COMPARISON
  • 19. JQUERY / DOM COMPARISON • HIDE DIVS WITH PURE JAVASCRIPT var divs = document.getElementByTagName('div'); for(i=0 ; i<=divs.length; i++){ Divs[ i ].style.display = 'none'; } • HIDE DIV WITH JQUERY $(‘div’).hide();
  • 20. JQUERY / DOM COMPARISON • SHOW/HIDE THE OLD WAY <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of #foo</a> function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }
  • 21. JQUERY / DOM COMPARISON $().ready(function(){ $("a").click(function(){ $("#more").toggle("slow"); return false; }); });
  • 22. JQUERY AND SELECTORS
  • 23. JQUERY AND SELECTORS • SELECT BY ID // Select By ID <div id=”foo”></div> <div></div> $(‘#foo’); <div id=”foo”></div> <div></div>
  • 24. JQUERY AND SELECTORS • SELECT BY CLASS // Select by class <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div> $(‘.myClass’) <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div>
  • 25. JQUERY AND SELECTORS • SELECT BY TAG // Select by tag <ul> <li>Apple</li> <li>Pear</li> </ul> $(“li”); <ul> </ul> <li>Apple</li> <li>Pear</li>
  • 26. JQUERY AND SELECTORS • COMPOUND SELECTORS <p class=”important”></p> <p></p> <p class=”warning”></p> <p class=”important warning”></p> $(‘p.important,p.warning’); <p class=”important”></p> <p></p> <p class=”warning”></p> <p class=”important warning”></p>
  • 27. JQUERY AND SELECTORS • DESCENDANT SELECTOR (“ancestor descendant”) <form> <label>Child:</label> <input name="name" /> <fieldset> <label>Grandchild:</label> <input name="newsletter" /> </fieldset> </form> Sibling to form: <input name="none" /> <script>$("form input").css("border", "2px dotted blue");</script>
  • 28. JQUERY AND SELECTORS • CHILD SELECTOR <ul class="topnav"> <li>Item 1</li> <li>Item 2 <ul> </ul> </ul> <li>Nested item 1</li> <li>Nested item 2</li> <li>Nested item 3</li> </li> <li>Item 3</li> <script>$("ul.topnav > li").css("border", "3px double red");</script>
  • 29. JQUERY AND SELECTORS • NEXT ADJACENT SELECTOR <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> <script>$("label + input").css("color", "blue").val("Labeled!")</script>
  • 30. JQUERY AND SELECTORS • NEXT SIBLINGS SELECTOR <div>div (doesn't match since before #prev)</div> <span id="prev">span#prev</span> <div>div sibling</div> <div>div sibling <div id="small">div niece</div></div> <span>span sibling (not div)</span> <div>div sibling</div> <script> $("#prev ~ div").css("border", "3px groove blue"); </script>
  • 31. JQUERY AND ATTRIBUTE SELECTORS Selector Description E[a] Selects all the elements E that have an attribute 'a' of any value. E[a=v] Selects all the elements E that have an attribute 'a' whose value is exactly 'v'. E[a^=v] Selects all the elements E that have an attribute 'a' whose value starts with 'v'. E[a$=v] Selects all the elements E that have an attribute 'a' whose value ends with 'v'. E[a*=v] Selects all the elements E that have an attribute 'a' whose value contains 'v'.
  • 32. JQUERY FILTERS
  • 33. JQUERY FILTERS Selector Description :first Selects the first selected element in the page. :last Selects the last selected element in the page. :not(selector) Removes all elements matching the specified selector. :even Selects even elements. :odd Selects odd elements. :eq(index) Selects a single element by its index number. :gt(index) Selects all elements with an index number greater than the specified one. :lt(index) Selects all elements with an index number less than the specified one. :header Selects all elements that are headers, such as h1, h2, and h3. :hidden Selects all elements that are hidden. :visible Selects all elements that are visible. :first-child Selects all elements that are the first child of their parents. :last-child Selects all elements that are the last child of their parents.
  • 34. JQUERY FILTERS Selector Description :input Selects all input elements. :text Selects all input elements of type text. :radio Selects all input elements of type radio. :checkbox Selects all input elements of type checkbox. :enabled Selects all elements that are enabled. :disabled Selects all elements that are disabled. :checked Selects all elements that are checked. :selected Selects all elements that are selected.
  • 35. JQUERY TRAVERSING
  • 36. TRAVERSING DOCUMENT INFORMATION • You can traverse the information returned from a document easily.
  • 37. TRAVERSING DOCUMENT INFORMATION EXAMPLE <script type="text/javascript"> $("document").ready(function() { // Inspect the length and size() of a result set alert("There are " + $("p").length + " <p> elements"); // use the get() and get(index) to retrieve DOM elements var elems = $("li").get(); alert("There are " + elems.length + " <li> tags"); alert($("li").get(0)); // use the find function $("ul").find("li.b").css("border", "3px solid red"); // use the each function var leftmargin = 0; var border = 3; $("p").each(function() { $(this).css("border", border+"px solid red"); $(this).css("margin-left", leftmargin); border += 2; leftmargin += 10; }); }); </script>
  • 38. METHOD CHAINING • One of JQuery’s most powerful feature is its ability to chain multiple functions together to perform several operations in one line of code • Example <script type="text/javascript"> $("#divTest2").text("Hello, world!").removeClass("blue").addClass("bold").css("color", "blue"); </script>

×