Understanding JQuery for web development by software outsourcing company india
-
Upload
jignesh-aakoliya -
Category
Technology
-
view
51 -
download
2
Transcript of Understanding JQuery for web development by software outsourcing company india
![Page 1: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/1.jpg)
iFour Consultancy
JQuery
![Page 2: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/2.jpg)
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
![Page 3: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/3.jpg)
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
![Page 4: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/4.jpg)
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
![Page 5: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/5.jpg)
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
![Page 6: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/6.jpg)
Enable jQuery in your page
• jQuery can be enabled in your page by includingreference 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
![Page 7: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/7.jpg)
JavaScript vs jQuery
• Example 1 - Hide an element with id "textbox“//javascriptdocument.getElementById('textbox').style.display = "none";
//jQuery$(' #textbox' ).hide();
• Example 2 - Create a <h1> tag with "my text“//javascriptvar 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
![Page 8: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/8.jpg)
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
![Page 9: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/9.jpg)
Basic selectors
• TagNamedocument.getElementsByTagName("tagName"); (javascript)$("tagName") - $("div"), $("p"), $("div"),.....
• Tag IDdocument.getElementById("id"); (javascript)$("#id") - $("#name"), $("#address")
• Tag Classdocument.getElementsByClassName("className"); (javascript)$(".className") - $(".comment"), $(".code")
• To select all elements - $("*")
Custom Online Shop Developershttp://www.ifourtechnolab.com
![Page 10: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/10.jpg)
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
![Page 11: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/11.jpg)
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
![Page 12: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/12.jpg)
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
![Page 13: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/13.jpg)
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
![Page 14: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/14.jpg)
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
![Page 15: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/15.jpg)
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
![Page 16: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/16.jpg)
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
![Page 17: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/17.jpg)
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
![Page 18: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/18.jpg)
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
![Page 19: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/19.jpg)
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
![Page 20: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/20.jpg)
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
![Page 21: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/21.jpg)
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
![Page 22: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/22.jpg)
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
![Page 23: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/23.jpg)
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
![Page 24: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/24.jpg)
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
![Page 25: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/25.jpg)
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
![Page 26: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/26.jpg)
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
![Page 27: Understanding JQuery for web development by software outsourcing company india](https://reader035.fdocuments.in/reader035/viewer/2022070514/588189ea1a28ab0b398b6f51/html5/thumbnails/27.jpg)
Thank you
Software development company indiahttp://www.ifourtechnolab.com