Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
iFour ConsultancyJQuery
 jQuery is a JavaScript Library.
 jQuery greatly simplifies JavaScript programming.
 jQuery is a lightweight, "write le...
 There are lots of other JavaScript frameworks out there, but jQuery seems to be
the most popular, and also the most exte...
 There are several ways to start using jQuery on your web site.
• Download the jQuery library from jQuery.com
• Include j...
jQuery Syntax
 The jQuery syntax is tailor made for selecting HTML elements and performing
some action on the element(s)....
Enable jQuery in your page
• jQuery can be enabled in your page by including
reference to jQuery library file
<script src=...
JavaScript vs jQuery
• Example 1 - Hide an element with id "textbox“
//javascript
document.getElementById('textbox').style...
 jQuery selectors are one of the most important parts of the jQuery library.
 jQuery selectors allow you to select and m...
Basic selectors
• TagName
document.getElementsByTagName("tagName"); (javascript)
$("tagName") - $("div"), $("p"), $("div")...
Positional Selectors
Syntax: Examples:
$("selector:first") $("p:first")
$("selector:last") $("p:last")
$("selector:odd") $...
Form Element(Custom) Selectors
$("selector:visible") $("selector:input")
$("selector:hidden") $("selector:text")
$("select...
Retrieve, Set and Remove attribute
Syntax: Examples:
• $("selector").attr("name") • $("img").attr("src")
• $("selector").a...
Class, HTML, Text, Value - Functions
• $("selector").hasClass("className")
• $("selector").addClass("className")
• $("sele...
 All the different visitor's actions that a web page can respond to are called events.
 An event represents the precise ...
Commonly Used jQuery Event Methods
 click()
• The click() method attaches an event handler function to an HTML
element.
•...
Commonly Used jQuery Event Methods
 dblclick()
• The dblclick() method attaches an event handler function to an HTML
elem...
Commonly Used jQuery Event Methods
 mouseenter()
• The mouseenter() method attaches an event handler function to an
HTML ...
Commonly Used jQuery Event Methods
 mouseleave()
• The mouseleave() method attaches an event handler function to an
HTML ...
Commonly Used jQuery Event Methods
 mousedown()
• The mousedown() method attaches an event handler function to an
HTML el...
Commonly Used jQuery Event Methods
 mouseup()
• The mouseup() method attaches an event handler function to an HTML
elemen...
Commonly Used jQuery Event Methods
 hover()
• The hover() method takes two functions and is a combination of the
mouseent...
Commonly Used jQuery Event Methods
 focus()
• The focus() method attaches an event handler function to an HTML form
field...
Commonly Used jQuery Event Methods
 blur()
• The blur() method attaches an event handler function to an HTML form
field.
...
Useful Event Functions
 .hide() display:true
 .show() display:none
 .toggle(func1, func2) first click calls func1, next...
Effects
• show()
Shows the selected elements
• Hide()
Hides the selected elements
• fadeIn()
Fades in the selected element...
 slideDown()
Slides-down (shows) the selected elements
 Finish()
Stops, removes and completes all queued animations for ...
Thank you
Software development company indiahttp://www.ifourtechnolab.com
Upcoming SlideShare
Loading in …5
×

Understanding JQuery for web development by software outsourcing company india

139 views

Published on

This is an overview of JQuery for website and web development - by software outsourcing company India, iFour Technolab Pvt. Ltd. - http://www.ifourtechnolab.com

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Understanding JQuery for web development by software outsourcing company india

  1. 1. iFour ConsultancyJQuery
  2. 2.  jQuery is a JavaScript Library.  jQuery greatly simplifies JavaScript programming.  jQuery is a lightweight, "write less, do more", JavaScript library.  jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.  The purpose of jQuery is to make it much easier to use JavaScript on your website. Introduction to JQuery Custom Online Shop Developershttp://www.ifourtechnolab.com
  3. 3.  There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.  Many of the biggest companies on the Web use jQuery, such as: • Google • Microsoft • IBM • Netflix Advantages of jQuery Custom Online Shop Developershttp://www.ifourtechnolab.com
  4. 4.  There are several ways to start using jQuery on your web site. • Download the jQuery library from jQuery.com • Include jQuery from a CDN, like Google  There are two versions of jQuery available for downloading: • Production version • Development version  If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).  Both Google and Microsoft host jQuery. How to Install Custom Online Shop Developershttp://www.ifourtechnolab.com
  5. 5. jQuery Syntax  The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).  Basic syntax is: $(selector).action(). • A $ sign to define/access jQuery. • A (selector) to "query (or find)" HTML elements. • A jQuery action() to be performed on the element(s).  The Document Ready event is used to prevent any jQuery code from running before the document is finished loading (is ready).  It is good practice to wait for the document to be fully loaded and ready before working with it. Custom Online Shop Developershttp://www.ifourtechnolab.com
  6. 6. Enable jQuery in your page • jQuery can be enabled in your page by including reference to jQuery library file <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> • Introduce a jQuery function by using the below below given function. $(document).ready(function(){ //Script goes here }); OR $(function(){ //Script goes here }); Custom Online Shop Developershttp://www.ifourtechnolab.com
  7. 7. JavaScript vs jQuery • Example 1 - Hide an element with id "textbox“ //javascript document.getElementById('textbox').style.display = "none"; //jQuery $(' #textbox' ).hide(); • Example 2 - Create a <h1> tag with "my text“ //javascript var h1 = document.CreateElement("h1"); h1.innerHTML = "my text"; document.getElementsByTagName('body')[0].appendChild(h1); //jQuery $(' body').append( $("<h1/>").html("my text") ; Custom Online Shop Developershttp://www.ifourtechnolab.com
  8. 8.  jQuery selectors are one of the most important parts of the jQuery library.  jQuery selectors allow you to select and manipulate HTML element(s).  jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more.  The jQuery element selector selects elements based on the element name.  The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.  The jQuery class selector finds elements with a specific class. jQuery Selectors Custom Online Shop Developershttp://www.ifourtechnolab.com
  9. 9. Basic selectors • TagName document.getElementsByTagName("tagName"); (javascript) $("tagName") - $("div"), $("p"), $("div"),..... • Tag ID document.getElementById("id"); (javascript) $("#id") - $("#name"), $("#address") • Tag Class document.getElementsByClassName("className"); (javascript) $(".className") - $(".comment"), $(".code") • To select all elements - $("*") Custom Online Shop Developershttp://www.ifourtechnolab.com
  10. 10. Positional Selectors Syntax: Examples: $("selector:first") $("p:first") $("selector:last") $("p:last") $("selector:odd") $("p:odd") $("selector:even") $("p:even") $("selector:eq(i)") $("p:eq(1)") $("selector:gt(i)") $("p:gt(1)") $("selector:lt(i)") $("p:lt(1)") Custom Online Shop Developershttp://www.ifourtechnolab.com
  11. 11. Form Element(Custom) Selectors $("selector:visible") $("selector:input") $("selector:hidden") $("selector:text") $("selector:disabled") $("selector:password") $("selector:enabled") $("selector:radio") $("selector:checked") $("selector:checkbox") $("selector:selected") $("selector:submit") $("selector:header") $("selector:reset") $("selector:animated") $("selector:image") $("selector:not(selector:not)") $("selector:file") $("selector:button") Custom Online Shop Developershttp://www.ifourtechnolab.com
  12. 12. Retrieve, Set and Remove attribute Syntax: Examples: • $("selector").attr("name") • $("img").attr("src") • $("selector").attr("key","val") • $("p").attr("class","source") • $("selector").attr("key",fn()) • $("img").attr("height",calHt()) • $("selector").attr(properties) • $("img").attr({"src":"/path/","title" : "My Img"}); • $("selector").removeAttr(attr) • $("div").removeAttr("class“) Custom Online Shop Developershttp://www.ifourtechnolab.com
  13. 13. Class, HTML, Text, Value - Functions • $("selector").hasClass("className") • $("selector").addClass("className") • $("selector").removeClass("className") • $("selector").toggleClass("className") • $("selector").html() • $("selector").html("html code") • $("selector").text() • $("selector").text("text content") • $("selector").val() • $("selector").val("value") Custom Online Shop Developershttp://www.ifourtechnolab.com
  14. 14.  All the different visitor's actions that a web page can respond to are called events.  An event represents the precise moment when something happens.  Examples: • moving a mouse over an element • selecting a radio button • clicking on an element  The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key". Events Custom Online Shop Developershttp://www.ifourtechnolab.com
  15. 15. Commonly Used jQuery Event Methods  click() • The click() method attaches an event handler function to an HTML element. • The function is executed when the user clicks on the HTML element. • The following example says: When a click event fires on a <p> element; hide the current <p> element: • Example: $("p").click(function(){ $(this).hide(); }); Custom Online Shop Developershttp://www.ifourtechnolab.com
  16. 16. Commonly Used jQuery Event Methods  dblclick() • The dblclick() method attaches an event handler function to an HTML element. • The function is executed when the user double-clicks on the HTML element: • Example: $("p").dblclick(function(){ $(this).hide(); }); Custom Online Shop Developershttp://www.ifourtechnolab.com
  17. 17. Commonly Used jQuery Event Methods  mouseenter() • The mouseenter() method attaches an event handler function to an HTML element. • The function is executed when the mouse pointer enters the HTML element: • Example: $("#p1").mouseenter(function(){ alert("You entered p1!"); }); Custom Online Shop Developershttp://www.ifourtechnolab.com
  18. 18. Commonly Used jQuery Event Methods  mouseleave() • The mouseleave() method attaches an event handler function to an HTML element. • The function is executed when the mouse pointer leaves the HTML element: • Example: $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); Custom Online Shop Developershttp://www.ifourtechnolab.com
  19. 19. Commonly Used jQuery Event Methods  mousedown() • The mousedown() method attaches an event handler function to an HTML element. • The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element: • Example: $("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); Custom Online Shop Developershttp://www.ifourtechnolab.com
  20. 20. Commonly Used jQuery Event Methods  mouseup() • The mouseup() method attaches an event handler function to an HTML element. • The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element: • Example: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); Custom Online Shop Developershttp://www.ifourtechnolab.com
  21. 21. Commonly Used jQuery Event Methods  hover() • The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. • The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: • Example: $("#p1").hover(function(){ alert("You hover p1!"); }); Custom Online Shop Developershttp://www.ifourtechnolab.com
  22. 22. Commonly Used jQuery Event Methods  focus() • The focus() method attaches an event handler function to an HTML form field. • The function is executed when the form field gets focus: • Example: $("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); Custom Online Shop Developershttp://www.ifourtechnolab.com
  23. 23. Commonly Used jQuery Event Methods  blur() • The blur() method attaches an event handler function to an HTML form field. • The function is executed when the form field loses focus: • Example: $("input").blur(function(){ $(this).css("background-color", "#ffffff"); }); Custom Online Shop Developershttp://www.ifourtechnolab.com
  24. 24. Useful Event Functions  .hide() display:true  .show() display:none  .toggle(func1, func2) first click calls func1, next click executes func2  .hover(over, out) mouseover, mouseout Custom Online Shop Developershttp://www.ifourtechnolab.com
  25. 25. Effects • show() Shows the selected elements • Hide() Hides the selected elements • fadeIn() Fades in the selected elements • fadeOut() Fades out the selected elements • fadeToggle() Toggles between the fadeIn() and fadeOut() methods • slideUp() Slides-up (hides) the selected elements Custom Online Shop Developershttp://www.ifourtechnolab.com
  26. 26.  slideDown() Slides-down (shows) the selected elements  Finish() Stops, removes and completes all queued animations for the selected elements  Delay() Sets a delay for all queued functions on the selected elements  Animate() Runs a custom animation on the selected elements  Stop() Stops the currently running animation for the selected elements  Dequeue() Removes the next function from the queue, and then executes the function Effects Custom Online Shop Developershttp://www.ifourtechnolab.com
  27. 27. Thank you Software development company indiahttp://www.ifourtechnolab.com

×