iFour ConsultancyJQuery

 Introduction to JQuery
 Advantages of JQuery
 JQuery Syntax
 Enable JQuery
 Javascript vs Jquery
 Jquery Selectors
 Positional Selectors
 Basic Selectors
 Form Element Selector
 Events
 Event Functions
 Jquery UI : Interaction
 Jquery UI : Widgets
 Jquery UI : Effects
INDEX
http://www.ifourtechnolab.com/

 JavaScript Library
 Greatly simplifies JavaScript programming
 It is a lightweight, "write less, do more", JavaScript library
 Simplifies HTML document traversing, event handling, animating, and Ajax interactions
for rapid web development
 The purpose is to make it much easier to use JavaScript on your website
Introduction to JQuery
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 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
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 There are several ways to start using jQuery on your website
• 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
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

jQuery Syntax
 It 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
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

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 given function
$(document).ready(function(){
//Script goes here
});
OR
$(function(){
//Script goes here
});
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

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") ;
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 One of the most important parts of the jQuery library
 Allow you to select and manipulate HTML element(s)
 Used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more
 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
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

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)")
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

Basic selectors
Tag Name
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 - $("*")
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

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")
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

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“)
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

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")
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 All the different visitor's actions that a web page can respond to are called events
 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
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

Commonly Used jQuery Event Methods
 click()
• This 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();
});
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

Commonly Used jQuery Event Methods
 dblclick()
• This 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();
});
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

Commonly Used jQuery Event Methods
 mouseenter()
• This 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!");
});
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

Commonly Used jQuery Event Methods
 mouseleave()
• This 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!");
});
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

Commonly Used jQuery Event Methods
 mousedown()
• This 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!");
});
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

Commonly Used jQuery Event Methods
 mouseup()
• This 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!");
});
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

Commonly Used jQuery Event Methods
 hover()
• This 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!");
});
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

Commonly Used jQuery Event Methods
 focus()
• This 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");
});
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

Commonly Used jQuery Event Methods
 blur()
• This 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");
});
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

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
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

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
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 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
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 Collection of GUI widgets, animated visual effects, and themes implemented
with jQuery (a JavaScript library), Cascading Style Sheets, and HTML. Whether you're
building highly interactive web applications or you just need to add a date picker to a form
control, jQuery UI is the perfect choice.
 Features
 Interactions
 Widgets
 Effects
jQuery UI
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 Draggable : Allow elements to be moved using the mouse
 Droppable : Create targets for draggable elements
 Resizable : Change the size of an element using the mouse
 Selectable : Use the mouse to select elements, individually or in a group
 Sortable : Reorder elements in a list or grid using the mouse
jQuery UI : Interactions
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 Draggable : Allow elements to be moved using the mouse
 Droppable : Create targets for draggable elements
 Resizable : Change the size of an element using the mouse
 Selectable : Use the mouse to select elements, individually or in a group
 Sortable : Reorder elements in a list or grid using the mouse
jQuery UI : Interactions
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

jQuery UI : Interactions - Example (Draggable, Resizable)
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 Accordion : Displays collapsible content panels for presenting information in a limited
amount of space
 Autocomplete : Enables users to quickly find and select from a pre-populated list of values
as they type, leveraging searching and filtering
 Button : Enhances standard form elements like buttons, inputs and anchors to themeable
buttons with appropriate hover and active styles
 Checkboxradio : Enhances standard checkbox and radio input element to themeable
buttons with appropriate hover and active styles
 ControlGroup : Groups multiple buttons and other widgets into one visual set
 Datepicker : Select a date from a popup or inline calendar
jQuery UI : Widgets
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 Dialog : Open content in an interactive overlay
 Menu : Themeable menu with mouse and keyboard interactions for navigation
 Progressbar : Display status of a determinate or indeterminate process
 SelectMenu : Duplicates and extends the functionality of a native HTML select element to
overcome the limitations of the native control
 Slider : Drag a handle to select a numeric value
 Spinner : Enhance a text input for entering numeric values, with up/down buttons and
arrow key handling
 Tabs : A single content area with multiple panels, each associated with a header in a list
 Tooltip : Customizable, themeable tooltips, replacing native tooltips
jQuery UI : Widgets
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 Accordion
jQuery UI : Widgets - Examples
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 Autocomplete
jQuery UI : Widgets - Examples
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 Datepicker
jQuery UI : Widgets - Examples
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 Add Class : Adds class(es) to elements while animating all style changes
 Color Animation : Animate the properties of elements between colors
 Easing : Apply an easing equation to an animation
 Effect : Apply an animation effect to an element
 Hide : Hide elements using custom effects
 Remove Class : Removes class(es) from elements while animating all style changes
 Show : Display elements using custom effects
 Switch Class : Add and remove class(es) to elements while animating all style changes
 Toggle : Display or hide elements using custom effects
 Toggle Class : Toggle class(es) on elements while animating all style changes
jQuery UI : Effects
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 Add Class and Remove Class
jQuery UI : Effects - Examples
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

 http://www.w3schools.com/jquery/
 https://www.tutorialspoint.com/jquery/
References
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/

Questions?
ASP.NET Software Development Companies Indiahttp://www.ifourtechnolab.com/