Your SlideShare is downloading. ×
Jquery Basics
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jquery Basics


Published on

JQuery basics

JQuery basics

Published in: Technology
1 Like
  • Be the first to comment

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. Umeshwaran.V Expert Software Engineer
  • 2.  Introduction to jQuery  jQuery function ◦ Ready ◦ Selectors ◦ DOM Interaction ◦ Event Handling ◦ Ajax interaction
  • 3.  jQuery is a framework of Javascript. It not a language, but it is a well written JavaScript code.  jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.  It is a fast and concise JavaScript Library that simplifies ◦ HTML document traversing ◦ Event handling ◦ Animating ◦ Ajax interactions for rapid web development
  • 4.  Pre-defined library for jQery is downloadable in  Production version - this is for your live website because it has been minified and compressed  Development version - this is for testing and development (uncompressed and readable code)  The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section): <head> <script src="jquery-1.11.0.min.js“ type=“text/javascript”></script> </head>  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) ◦ E.g : - $("#test").hide() - hides the element with id="test“  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. ◦ Google <head> <script src=""></script> </head> ◦ Microsoft <head> <script src=""></script> </head>
  • 5.  Detecting When a Page has Loaded  Use $(document).ready() to detect when a page has loaded and is ready to use  Called once DOM hierarchy is loaded <script type="text/javascript"> $(document).ready(function(){ //Perform action here }); </script>
  • 6.  Select a element on page  Selectors can be basis of html Tags, ID or Class  Selector Syntax : $(selectorExpression) eg: $(‘div’).Action() To Select the specific tags use ,a $(‘div,p,span’) To select Descendants use space $(‘div span’) To select Tags by id prefix id with # $(‘#myDiv’) To select Tags by class prefix with class . $(‘.myClass’) Combine class with specific tag $(‘a.myClass’) Select by attribute, tag and attribute and specific attribute value, $(‘[title]’), $(‘div[title]’), $(‘[title=“MyTest”]’) and $(div[title=“MyTest”]’) Input Selectors $(‘:input’) select all input elements. $(‘:input’) :Contains – select elements that match the search $(‘div:contains(“C#”)’) :odd or :even – format the table rows $(‘tr:oddd’) or $(‘tr:even’) ^-Startwith $-Endswith *-contains stated value $(‘input[id$=“Name”]’)
  • 7.  Object Model – each element in the html is parsing as DOM.  jQuery provides set of function to interact the DOM. .each(function (index,element)) – is to iterate through jquery objects div.each(function(index,elem){ alert($(elem));}); this.propertyName=“value” is used to modify an object property directly $("div").each(function (i) {this.title = "My title " + I;}); .attr(attributeName) object attribute can be accessed Var title=$(‘#myDiv’).attr(“title”); .attr(attributeName,value) can modify the object attributes $(‘#myDiv’).attr(‘title’, ‘My New title’); .attr – modify multiple attributes pass json object contains name/value pairs $('#myDiv').attr({ title: 'My new Title‘, style: 'border:2px solid black;’ }); .css(key,value ) - Modifying styles and it can be passed as json object. $(‘div’).css(‘color’,’red’) Modifiying classes - .addClass(), .hasClass(), removeClass and toggleClass() $(‘#myDiv’).addClass(‘newClass’)
  • 8.  Events notify a program that a user performed some type of action  jQuery provides a cross-browser event model that works in IE, Chrome, Opera, FireFox, Safari and more  jQuery event model is simple to use and provides a compact syntax  click()  blur()  focus()  dblclick()  mousedown()  mouseup()  mouseover()  keydown(),  keypress() $(document).ready(function () { $('#clickButton').click(function () { alert($('#firstName').val()); }); }); Enter your name : <input type="text" id="firstName" /> <input type="button" id="clickButton" value="Click Me" /> <input type="button" id="clearButton" value="Clear" />
  • 9.  The on() function is a new replacement for the following: ◦ bind() ◦ delegate() ◦ live()  Multiple events and handlers can be defined in on() using a "map": $("#MyTable tr").on({ mouseenter: function(){ $(this).addClass("over"); }, mouseleave: function(){ $(this).removeClass("out"); } }); Hover events can be handled using hover(): $(selector).hover(hoverIn, hoverOut) $('div').on('click', function(){ alert('Clicked button!'); });
  • 10.  Ajax allow to make a call with out full page post back.  jQuery Ajax functions support cross-browser compatibility.  It supports Get and Post form actions  Load JSON, XML, HTML or even scripts.  jQuery provides several Ajax selectors cab be used to send and receive data. ◦ load(URL,data,callback)– Loads HTML data from the server ◦ $.get(URL,callback)- Requests data from a specified resource. The GET method may return cached data. ◦ $.post(URL,data,callback)– Submits data to be processed to a specified resource. It can also be used to get data, the POST method NEVER caches data, and is often used to send data along with the request. ◦ $.getJSON( url, data, callback ) – Get/Post and return JSON ◦ $.ajax( url [, settings ] ) – Provides core functionality
  • 11. E-Mail -