[go: up one dir, main page]
Scribd
Upload
38 views12 pages

Jquery - Simplify Your Javascript: Matthew Dawes Pacific Northwest National Laboratory Interlab 2007

jQuery is a JavaScript library that simplifies DOM scripting, event handling, Ajax interactions, and JavaScript effects and animations. It provides cross-browser compatibility and uses CSS-like syntax that is easier for developers and non-developers to understand compared to traditional JavaScript. jQuery plugins allow for extensibility, while its small file size of 14kb minimizes bandwidth usage. Examples demonstrate how jQuery can be used to toggle element visibility, manipulate the DOM, implement Ajax calls, and validate form fields in a simpler manner than traditional JavaScript approaches.

Uploaded by

Md Shahbaz Alam
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
38 views12 pages

Jquery - Simplify Your Javascript: Matthew Dawes Pacific Northwest National Laboratory Interlab 2007

jQuery is a JavaScript library that simplifies DOM scripting, event handling, Ajax interactions, and JavaScript effects and animations. It provides cross-browser compatibility and uses CSS-like syntax that is easier for developers and non-developers to understand compared to traditional JavaScript. jQuery plugins allow for extensibility, while its small file size of 14kb minimizes bandwidth usage. Examples demonstrate how jQuery can be used to toggle element visibility, manipulate the DOM, implement Ajax calls, and validate form fields in a simpler manner than traditional JavaScript approaches.

Uploaded by

Md Shahbaz Alam
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 12

jQuery Simplify your JavaScript

Matthew Dawes Pacific Northwest National Laboratory Interlab 2007

What is jQuery?
JavaScript Library Functionality

DOM scripting & event handling Ajax User interface effects Form validation

Why jQuery?
Lightweight 14kb (Minified and Gzipped) Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) CSS-like syntax easy for developers/nondevelopers to understand Active developer community Extensible - plugins

Example Show/Hide the old way


<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of #foo</a> function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }

Example Show/Hide with jQuery


$().ready(function(){ $("a").click(function(){ $("#more").toggle("slow"); return false; }); });

Example DOM manipulation


function showOneYr(str) { $("#main div").css("display","none"); $("#main div#"+str).css("display","block"); } $().ready(function() { showOneYr($('#main div').attr("id")); $("#main p").after("<h2>Choose a Year</h2><p id='yearLinks' class='centered smaller'>| </p>"); $("#main h3").each(function() { yrTxt = $(this).text(); $("#yearLinks").append('<a href="#">'+yrTxt+'</a> | '); }); $("#yearLinks a").click(function(){ showOneYr('yr'+$(this).text()); return false; }); });

Example Ajax the old way


function GetXmlHttpObject(handler) { var objXmlHttp = null; //Holds the local xmlHTTP object instance //Depending on the browser, try to create the xmlHttp object if (is_ie){ var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; try{ objXmlHttp = new ActiveXObject(strObjName); objXmlHttp.onreadystatechange = handler; } catch(e){ //Object creation errored alert('Verify that activescripting and activeX controls are enabled'); return; } } else{ // Mozilla | Netscape | Safari objXmlHttp = new XMLHttpRequest(); objXmlHttp.onload = handler; objXmlHttp.onerror = handler; } //Return the instantiated object return objXmlHttp; }
7

Example Ajax with jQuery


$.get("update_actions.aspx", {st: "yes", f: $(this).attr("ID")} );

Example Ajax with jQuery


$(document).ready(function() { $("td > img").click(function() { if($(this).attr('src') == "/images/red_x.jpg") { $(this).attr('src', "/images/green_tick.jpg").attr('alt', "Green Check").attr('title', "Complete"); $.get("update_actions.aspx", {st: "yes", f: $(this).attr("ID")} ); } else { $(this).attr('src', "/images/red_x.jpg").attr('alt', "Red X").attr('title', "Not Started"); $.get("update_actions.aspx", {st: "no", f: $(this).attr("ID")} ); } }); });

Example Form Validation


$().ready(function() { // validate the comment form when it is submitted $("#commentForm").validate(); }); <input id="cname" name="name" class="some other styles {required:true,minLength:2}" /> <input id="cemail" name="email" class="{required:true,email:true}" />

10

Panel Discussion My Questions


What JavaScript libraries are you using? How are you implementing them? (site by site as needed, central repository, etc.) How do you manage upgrades?

11

Useful jQuery links


www.jquery.com jQuery homepage www.learningjquery.com jQuery tutorial blog www.visualjquery.com jQuery documentation http://ui.jquery.com jQuery user interface http://bassistance.de/jquery-plugins/ - homepage of the author of several useful jQuery plugins.

12

You might also like