• Like
J query b_dotnet_ug_meet_12_may_2012
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

J query b_dotnet_ug_meet_12_may_2012


BDotNet UG Meet - May 12, 2012 …

BDotNet UG Meet - May 12, 2012

Session 1:
Start Writing JQUERY
by Nasim

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. BDotNet UG MeetMay 12,2012Nasim Ahmad Ansarighnash@gmail.com
  • 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.  JavaScript Library Functionality  DOM scripting & event handling  Ajax  User interface effects  Form validation All for Rapid Web Development
  • 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.  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. 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.  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.  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.  Getting Started
  • 10.  Download the latest jQuery file from http://jquery.com/
  • 11.  Copy the jquery.js and the jquery-vsdoc.js into your application folder
  • 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.  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.  $() 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.  - by Tag Name - by ID - by Class Name - by Attribute Value - Input Nodes
  • 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.  Very compact than longer “getElementById” And its easy$(div) selects all <div> elements$(a) selects all <a> elements$(p) selects all <p> elements
  • 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.  $(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. Selecting by Element ID Use the # character to select elements by ID:$(#divId)selects <div id="divId"> element
  • 21. Selecting Elements by Class Name Use the . character to select elements by class name$(.myClass)selects <div class="myClass"> element
  • 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. Selecting Input Elements $(:input) selects all input elements : input,select,textarea,button,image,radio , etc.. & more$(:input[type="radio"])
  • 24. Modify CSS Classes Four methods for working with CSS Class attributes are: .addClass() .hasClass() .removeClass() .toggleClass()
  • 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. Matching CSS Classes .hasClass() returns true if the selected element has a matching class. if($(p).hasClass(style)){ //Put your code }
  • 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. 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.  each(fn) traverses every selected element calling fn() var sum = 0; $(“div.number”).each( function(){ sum += (+this.innerHTML); });
  • 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.  $(“h3”).each(function(){ $(this).replaceWith(“<div>” + $(this).html() + ”</div>”); });
  • 32.  // remove all children $(“#DivId”).empty(); // remove all children $(“#DivId”).empty();
  • 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. 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. Loading Content$("div").load("ContentPage.html"); Pass Parameters$("div").load("getData.aspx“,{"Catid":"10"});
  • 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. Retrieving JSON Data$.getJSON("getData.aspx",{CatId:10}, function(categories){ //alert(categories[0].Name);})
  • 38. Questions ?