J query b_dotnet_ug_meet_12_may_2012


Published on

BDotNet UG Meet - May 12, 2012

Session 1:
Start Writing JQUERY
by Nasim

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

J query b_dotnet_ug_meet_12_may_2012

  1. 1. BDotNet UG MeetMay 12,2012Nasim Ahmad Ansarighnash@gmail.com
  2. 2.  … write ASP.net Application? … write non-ASP.net Application like PHP? … write javascript? … write cascading style sheets (css) … enjoy writing javascript? … write lots of client side script? … Ajax?
  3. 3.  JavaScript Library Functionality  DOM scripting & event handling  Ajax  User interface effects  Form validation All for Rapid Web Development
  4. 4.  Powerful JavaScript library  Simplify common JavaScript tasks  Access parts of a page ▪ using CSS or XPath-like expressions  Modify the appearance of a page  Alter the content of a page  Change the user’s interaction with a page  Add animation to a page  Provide AJAX support
  5. 5.  Lightweight – 32kb (Minified ) Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) jQuery rescues us by working the same in all browsers! CSS-like syntax – easy for developers/non-developers to understand Intellisense for VS. Active developer community Extensible – Plugins Active Community Easier to write jQuery than pure JavaScript Microsoft has even elected to distribute jQuery with its Visual Studio tool, and Nokia uses jQuery on all its phones that include their Web Runtime component. Compared with other toolkits that focus heavily on clever JavaScript techniques, jQuery aims to change the way that web developers think about creating rich functionality in their pages. Rather than spending time juggling the complexities of advanced JavaScript, designers can leverage their existing knowledge of Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), Extensible Hypertext Markup Language (XHTML), and good old straightforward JavaScript to manipulate page elements directly, making rapid development a reality. As jQuery tag line says “write less do more” 
  6. 6. John ResigJohn Resig is the Dean of Computer Scienceat Khan Academy and the creator ofthe jQuery JavaScript library.He’s also the author of thebooks Pro JavaScript Techniques andSecrets of the JavaScript Ninja.Currently, John is located in Boston, MA andenjoys studyingUkiyo-e (Japanese Woodblock Printing) inhis spare time.His Personal Website : http://ejohn.org
  7. 7.  John Resig says “I was, originally, going to use JSelect, but all the domain names were taken already. I then did a search before I decided to call the project jQuery”
  8. 8.  So now you know what is jQuery. So what’s next ? Are you curious and want to know how to get started? Then Lets See……. 
  9. 9.  Getting Started
  10. 10.  Download the latest jQuery file from http://jquery.com/
  11. 11.  Copy the jquery.js and the jquery-vsdoc.js into your application folder
  12. 12.  Locally  <script src="Scripts/jquery-1.7.2.js" ></script> Using CDN  Microsoft  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>  Google  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/ 1.7.2/jquery.min.js"></script>  Jquery  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  13. 13.  Download Faster (Performance) Caching What if the CDN is down? – Don’t worry there is way  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script type="text/javascript"> if(typeof jQuery==undefined) document.write(unscape("%3Cscript src=jQuery.js type=text/javascript%3E %3C/script%3E"));</script>
  14. 14.  $() function or jQuery() Ready Function $(document).ready() – use to detect when a page has loaded and is ready to use Object Wrapper $(document) Call Inline or Named Function – Your choice
  15. 15.  - by Tag Name - by ID - by Class Name - by Attribute Value - Input Nodes
  16. 16.  <div id="UserAreaDiv"> <span class="BoldText"> Nasim Ahmad </span> </div>Selector Syntax $(selectorExpression) jQuery(selectorExpression) Selectors allow Page elements to be selected Single or multiple elements are supported Selector identifies an HTML element/tag that will be manipulated wit jQuery Code
  17. 17.  Very compact than longer “getElementById” And its easy$(div) selects all <div> elements$(a) selects all <a> elements$(p) selects all <p> elements
  18. 18.  To reference multiple tags use the , character to separate the elements.$(div,span,p,a)this will select all div, span, paragraph and anchors elements
  19. 19.  $(ancestor descendant) selects all descendants of the ancestor.$(table tr) Selects all tr elements that are descendants of the table element Descendants are children, grandchildren etc of the designated ancestor element
  20. 20. Selecting by Element ID Use the # character to select elements by ID:$(#divId)selects <div id="divId"> element
  21. 21. Selecting Elements by Class Name Use the . character to select elements by class name$(.myClass)selects <div class="myClass"> element
  22. 22. Selecting By Attribute Value Use brackets [attribute] to select based on attribute name and/or attribute value $(a[title])selects all <a> elements that have title attribute$(a[title="BDotnet UG Link"]) selects all anchor element which has a "BDotnet UG Link" title attribute value
  23. 23. Selecting Input Elements $(:input) selects all input elements : input,select,textarea,button,image,radio , etc.. & more$(:input[type="radio"])
  24. 24. Modify CSS Classes Four methods for working with CSS Class attributes are: .addClass() .hasClass() .removeClass() .toggleClass()
  25. 25. Adding a CSS Classes .addClass() adds one or more class names to the class attribute of each matched element $(div).addClass(MyClass) More than one Class $(div).addClass(RedClass BlueClass)
  26. 26. Matching CSS Classes .hasClass() returns true if the selected element has a matching class. if($(p).hasClass(style)){ //Put your code }
  27. 27. Removing CSS Classes .removeClass() can remove one or more classes$(div).removeClass(RedClass BlueClass) Remove all class attributes for the matching selector $(div).removeClass()
  28. 28. Toggle CSS Classes .toggleClass() alternates adding or removing a class based on the current presented or absented of the class$(#UserInfo).toggleClass(setBackgroundColor) <style> .setBackgroundColor{background:blue;} </style>
  29. 29.  each(fn) traverses every selected element calling fn() var sum = 0; $(“div.number”).each( function(){ sum += (+this.innerHTML); });
  30. 30. // select > append to the end$(“h1”).append(“<li>Hello $!</li>”);// select > append to the beginning$(“ul”).prepend(“<li>Hello $!</li>”); // create > append/prepend to selector $(“<li/>”).html(“9”).appendTo(“ul”); $(“<li/>”).html(“1”).prependTo(“ul”);
  31. 31.  $(“h3”).each(function(){ $(this).replaceWith(“<div>” + $(this).html() + ”</div>”); });
  32. 32.  // remove all children $(“#DivId”).empty(); // remove all children $(“#DivId”).empty();
  33. 33.  // get window height var sWinHeight = $(window).height() //set element height $(#mainId).height(sWinHeight) .width() - element .innerWidth() - .width()+padding .outerWidth() - .innerWidth()+border .outerWidth(true) - include margin
  34. 34. When DOM is ready $(document).ready(function(){ // Write your Code }); It fires when the document is ready for Programming It uses advanced listeners for detecting window.onload() is a fallback.
  35. 35. Loading Content$("div").load("ContentPage.html"); Pass Parameters$("div").load("getData.aspx“,{"Catid":"10"});
  36. 36. GET/POST Requests$.get("getData.aspx",{Catid:10}, function(data){ //write your code })$.post("getData.aspx",{Catid:10}, function(data){ //write your code })
  37. 37. Retrieving JSON Data$.getJSON("getData.aspx",{CatId:10}, function(categories){ //alert(categories[0].Name);})
  38. 38. Questions ?