jQuery for web development

iFour Consultancy

JQuery

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 India http://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




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




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




Enable jQuery in your pagejQuery 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});




JavaScript vs jQueryExample 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") ;




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




Positional SelectorsSyntax: 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)")




Basic selectors

Tag Namedocument.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 - $("*")




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")




Retrieve, Set and Remove attributeSyntax: 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“)




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")




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




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();

});





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();

});





mouseenter()• This method attaches an event handler function to an HTML element• The function is executed when the mouse pointer enters the HTML


$("#p1").mouseenter(function(){alert("You entered p1!");

});





mouseleave()• This method attaches an event handler function to an HTML element• The function is executed when the mouse pointer leaves the HTML


$("#p1").mouseleave(function(){ alert("Bye! You now leave p1!");});





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!");

});





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!");});





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!");});





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");});





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");});




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




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




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




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




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




jQuery UI : Interactions - Example (Draggable, Resizable)




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




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




Accordion

jQuery UI : Widgets - Examples




Autocomplete





Datepicker





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




Add Class and Remove Class

jQuery UI : Effects - Examples




http://www.w3schools.com/jquery/ https://www.tutorialspoint.com/jquery/

References




Questions?




jQuery for web development

Technology

Transcript of jQuery for web development