Download presentation
Presentation is loading. Please wait.
1
jQuery
2
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
3
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
4
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 min.js"></script> </head> <head> <script src=" </head>
5
Introducing jQuery functions
jQuery to work properly, needs the DOM to be fully loaded onto the browser. $(document).ready(function(){ //Script goes here });
6
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]’)
7
jQuery / DOM comparison
DOM method jQuery equivalent getElementById("id") $("#id") getElementsByTagName("tag") $("tag") getElementsByName("somename") $("[name='somename']") querySelector("selector") $("selector") querySelectorAll("selector")
8
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();
9
jQuery Tutorials Code Academy Code School:
Code School:
10
References http://www.w3resource.com/jquery-exercises/
Similar presentations
