Week 12: JQuery Write less, do more.

JQuery Basics Lightweight JavaScript Library – Emphasizes interaction between JavaScript and HTML – Reduces technical knowledge needed to implement JavaScript – Is free and open source software

How it works … Download the JQuery library file from the Web site Save the file in your Web site directory/folder With the JQuery library linked, you can immediately call on functions

How it works … Jquery exists as a single JavaScript file – Contains all common document, event, effect, and Ajax functions – Can be linked to any Web page

How it works … Jquery exists as a single JavaScript file – Contains all common document, event, effect, and Ajax functions – Can be linked to any Web page

Create a Starting Document Learning JQuery Welcome My JQuery Test Page Jquery is cool!

Initializing JQuery Scripts In JavaScript, you launch code “onload” – After the page has loaded – Isn’t run until after all elements (including images) have loaded With Jquery, you launch code on “Document Ready” $(document).ready(function(){});

Document Ready Function $(document).ready(function(){});

Document Ready Function $(document).ready(function(){ // Your Code Goes Here });

Document Ready Function $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); });

Adding JQuery … Learning JQuery $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); }); …

JQuery Syntax $(“selector”).what(“details”); $(“h1”).addClass(“red”); $(“a”).click(function(){ alert(“hello World!”)};

Manipulating CSS … Learning JQuery $(document).ready(function(){ $(”h1").addclass(“red”); }); …

Manipulating CSS … Learning JQuery $(document).ready(function(){ $(”h1").addclass(“red”); });.red {color: red;} …

Where this really helps … … Lorem Ipsom Deolor Sit Amet Lorem Ipsom Deolor Sit Amet …CREATE 10 Rows

Add Some CSS Rules … Learning JQuery th {background-color: blue; color: white;} …

Create rules for highlights … Learning JQuery th {background-color: blue; color: white;} tr.alt td {background-color: #ccc;} tr.over td {background-color: #fcc;} …

Add Script to Make Style Apply … Learning JQuery $(document).ready(function(){ $(”tr").addclass(“alt”); }); th {background-color: blue; color: white;} tr.alt td {background-color: #ccc;} tr.over td {background-color: #fcc;} …

Make the Rows Alternate … Learning JQuery $(document).ready(function(){ $(”tr:even").addclass(“alt”); }); th {background-color: blue; color: white;} tr.alt td {background-color: #ccc;} tr.over td {background-color: #fcc;} …

Add a Highlight $(document).ready(function(){ $(”tr”).mouseover(function() { $(this).addClass(“over”); }); $(”tr”).mouseout(function() { $(this).removeClass(“over”); }); $(”tr:even").addclass(“alt”); }); th {background-color: blue; color: white;} tr.alt td {background-color: #ccc;} tr.over td {background-color: #fcc;}

Create a New Starting Document Learning JQuery Welcome My Second JQuery Test Page

In the Body, Add Some Content Welcome My Second JQuery Test Page Click Here …

In the Head, Add some CSS Learning JQuery span {color: red; cursor: pointer;} div {margin: 3px; width: 80px; height: 80px; display: none; float: left;} #one {background-color: #f00;} #two {background-color: #0f0;} #three {background-color: #00f;}

Add the JQuery Script to Work Learning JQuery span {color: red; cursor: pointer;} div {margin: 3px; width: 80px; height: 80px; display: none; float: left;} #one {background-color: #f00;} #two {background-color: #0f0;} #three {background-color: #00f;}

Add the JQuery Script to Work Learning JQuery $(document).ready(function(){ });...

Add the JQuery Script to Work Learning JQuery $(document).ready(function(){ $(document.body).click(function () { });...

Add the JQuery Script to Work Learning JQuery $(document).ready(function(){ $(document.body).click(function () { $("div:hidden:first").fadeIn("slow"); });...