Jquery Basics


Published on

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

No notes for slide

Jquery Basics

  1. 1. Umeshwaran.V Expert Software Engineer
  2. 2.  Introduction to jQuery  jQuery function ◦ Ready ◦ Selectors ◦ DOM Interaction ◦ Event Handling ◦ Ajax interaction
  3. 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. 4.  Pre-defined library for jQery is downloadable in http://jquery.com/  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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head> ◦ Microsoft <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script> </head>
  5. 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. 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. 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. 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. 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. 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. 11. E-Mail - Umeshwaran.Vijayan@misys.com