jQuery
What is jQuery? jQuery is a Javascript Framework Widely used as an Abstraction layer Writing less code to do more functionality Mostly used for: DOM manipulation AJAX calling
What is available with jQuery? Cross browser support and detection AJAX functions CSS functions DOM manipulation and traversion Plugins for pre built user interfaces, advanced animations, and form validation Custom plugins
How to add jQuery to your website Download the jQuery library from the official website jQuery.com Include jQuery from a CDN Google: <head> <script src="jQuery-1.12.2.min.js"></script> </head> <head> <script src="https://ajax.googleapis.com/ajax/libs/jQuery/1.12.2/jQuery.min.js"></script> </head>
Introducing jQuery functions jQuery to work properly, needs the DOM to be fully loaded onto the browser. $(document).ready(function(){ //Script goes here });
Syntax $ (selector).action() HTML element: Paragraph element $ (‘p’) Define/ access jQuery Find HTML element jQuery action HTML element: Paragraph element $ (‘p’) Classes: Class =“deals” $(‘.deals’) ID: ID =“firstName” $(‘#firstName’) Attribute: Paragraph with [Name] attribute = “opening” $(‘p:[name=opening]’)
jQuery / DOM comparison DOM method jQuery equivalent getElementById("id") $("#id") getElementsByTagName("tag") $("tag") getElementsByName("somename") $("[name='somename']") querySelector("selector") $("selector") querySelectorAll("selector")
Syntax Examples Hide/show an element with id ‘textbox’: //jQuery //javascript document.getElementByID(‘textbox’).style.display(‘hide’); Document.getElementbyID(‘textbox’).style.display(‘show’); //jQuery $(‘#textbox’).hide(); $(‘#textbox’).show();
jQuery Tutorials Code Academy Code School: http://www.codecademy.com/courses/you-and-jQuery/0?curriculum_id=4fc3018f74258b0003001f0f#!/exercises/0 Code School: http://www.codeschool.com/courses/jQuery-air-first-flight
References http://www.w3resource.com/jquery-exercises/ http://www.w3schools.com/jquery/default.asp https://learn.jquery.com/about-jquery/ http://www.slideshare.net/arulmr/jquery-forbeginners