School of Computing and Information Systems CS 371 Web Application Programming jQuery

School of Computing and Information Systems CS 371 Web Application Programming Frameworks Most programmers "box up" code that is repeated (libraries) Sometimes programmers write code that is clever and general other programmers want to share it open source or third party products for the web, can be client side or server side frameworks

School of Computing and Information Systems CS 371 Web Application Programming Frameworks often provide templates caching security database access scaffolding url mapping ajax can enforce structure such as MVC or 3 tiered can also be a content management system (CMS)

School of Computing and Information Systems CS 371 Web Application Programming jQuery collection of javaScript functions does not really enforce any models or provide content management just a very useful javaScript library used by over 55% of the 10,000 most visited websites jQuery and jQuery UI

School of Computing and Information Systems CS 371 Web Application Programming jQuery – general concepts small size include it like any javaScript code library can be copied to server or use the google API site example goal is to separate structure (html) from behavior (js)

School of Computing and Information Systems CS 371 Web Application Programming jQuery - basics place code within script tags alongside any javaScript code basically select objects and then use jQuery functions $(select something).doSomething examples $(document).ready(handler) $('img').attr("src") $('#special').addClass("hairy")

School of Computing and Information Systems CS 371 Web Application Programming jQuery - selecting uses a combination of css selection and xpath examples $('#spec' > li)// li that are children of spec id $('.new td')// td's within class "new" tags $('li:even')//even rows of li tags ready function (when page is loaded) $(document).ready(handler) $(handler) example: $(function(){alert("it's loaded")});

School of Computing and Information Systems CS 371 Web Application Programming jQuery - basics can work with the DOM like in javaScript, but with much less code many effects like fading and animate manipulation like changing class, content and positioning event handling AJAX

School of Computing and Information Systems CS 371 Web Application Programming Attributes class: $('#someId').addClass("highlight"); $('li').removeClass("oldClass"); $('#myID').toggleClass("classA"); // remove if exists – add it otherwise content: use val() to get or val(data) to set controls use html(), html(data) to get/set html code attr("name") or attr("name","val")

School of Computing and Information Systems CS 371 Web Application Programming Traversal relations: $('table').children() parent, parents, parentsUntil, siblings… location: $('li').first() last, next, nextAll, nextUntil, prev, etc. filter: $("div").css("background", "#c8ebcc").filter(".middle").css("border-color", "red"); etc.

School of Computing and Information Systems CS 371 Web Application Programming Manipulation class and content (already covered) positioning (innerWidth, outerWidth, width, height, scrollLeft, etc. manipulating elements – clone, detach, empty, appendTo, insertAfter, remove, replaceAll, etc.

School of Computing and Information Systems CS 371 Web Application Programming Events $('td.hey').click(function(){//code here }); click, dblclick, change, blur, focus, hover load mouseup, mousedown mouseover, mouseout keydown, keyup, keypress off

School of Computing and Information Systems CS 371 Web Application Programming Effects hide, show fadeIn, fadeOut, fadeTo slideDown, slideUp, slideToggle queue, dequeue, clearQueue animate $("#go").click(function(){ $("#block").animate({ width: "70%", borderWidth: "10px" }, 1500 ); });

School of Computing and Information Systems CS 371 Web Application Programming AJAX var menuId = $("ul.nav").first().attr("id"); var request = $.ajax({ url: "script.php", type: "POST", data: {id : menuId}, dataType: "html" }); request.done(function(msg) { $("#log").html( msg ); }); request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); });

School of Computing and Information Systems CS 371 Web Application Programming jQuery UI make web apps more like desktop menus tabs dialogs themes controls datepicker sliders progressbar, etc.

School of Computing and Information Systems CS 371 Web Application Programming Plugins slidesJS – slideshow Jcrop – add cropping to app jqGrid – grid boxes Tablesorter – makes html table sortable many, many more