jQuery - CIS Classes

download report

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”);

Last Example