Transcript jQuery - CIS Classes
jQuery
Javascript Query Language
What is jQuery?
• jQuery is a popular Javascript framework specialized for changing web page documents on the fly – create impressive animations and interactions – simple to understand and easy to use – cross-browser compatibility
jQuery versions
• jQuery, at its core, is a Javascript library designed for DOM manipulation – The DOM is a tree structure representation of all the elements of a web-page, and jQuery makes finding, selecting, and manipulating these DOM elements simple and convenient • jQuery Mobile is a version of the core, that is a touch-optimized HTML5 UI framework. It is designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices • jQuery UI is a version of the core, that is a widget and interaction library built on top of the jQuery JavaScript Library - used to build highly interactive web applications (drag, drop, datepicker, slider, tabs, etc.) jqueryui.com.
What do we mean by DOM?
HTML HEAD BODY UL TITLE DIV “My Pets” P “This is a picture of my pet” IMG LI Dog LI Cat LI Fish
Where do you get it?
• Requires jQuery library – Download at www.jQuery.com
– Refer to it in your page -OR – Refer to one of the online versions
How does it work?
• Takes advantage of CSS selectors
How jQuery interacts with elements • • • • CSS selectors TAGS – H1 { text-align: left;} CLASSES – .my_class { position:absolute;} ID’s – #my_id { color:#0033ff; } • • • jQuery selectors TAGS – $(“h1”).hide(); CLASSES – $(“.my_class”).slideUp(); • ID’s – $(“#my_id”).fadeOut();
jQuery selectors
jQuery using the #id selector
jQuery using the .class selector
jQuery actions
jQuery Animation effect functions
• • • • • • • • • slideUp() slideDown() slideToggle(speed – slow/fast) fadeIn(speed in ms) fadeout fadeTo fadeToggle Hide show
EXAMPLES
Launching code when document is ready window.onload = function() { alert(“the page is loaded”); } – Problem • code isn't run until all content is downloaded • jQuery checks the document and waits until it's ready to be manipulated $( document ).
ready (function() { alert(“the page is loaded”); } );
Assigning an action when page loads • Let’s say you have an element in your page with an id of “buynow” and you want to assign a click handler to the click event on that element :
jQuery makes it easy to control the DOM • To change the HTML INSIDE of 5 paragraphs on the page, you would code for (i=0;i<5;i++) { document.getElementByTagName(“p”)[i].innerHTML = “change text”; } • With jQuery: $(“p”).html(“change text”);