Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
J Query - Your First Steps
1. jQuery: Love at first sight...or site! Bronson Quick sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
2. What we’ll cover The basics A brief intro into the jQuery including: Adding jQuery to a web page Calling jQuery after the DOM has loaded Basic selectors Basic events & callback functions Chaining Slide 2 of 14 rethink | redesign | results
5. Highly secured networkOnce you know the environment then you will know if you have to ship your app/page with jQuery or if you can use a Content Delivery Network (CDN). Slide 3 of 14 rethink | redesign | results
6. Using jQuery I was used! Use Google’s CDN <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> Given the number of pages using jQuery these days there is a good chance that jQuery will be already cached on the users browser. Speed up the page load time! Before we can add some jQuery sexiness we need to let the browser know that we are going to do something! The long way $(document).ready(function(){ alert(‘The world is a vampire!’); }); The ‘quick’ way $(function(){ alert(‘The world is a vampire!’); }); Slide 4 of 14 rethink | redesign | results
7. Selectors ID, classes & elements Get element by class name <ul> <li class="awesome">Google Search</li> <li class="awesome">Google Docs</li> <li>Google Chrome</li> </ul> $(function(){ $(“.awesome").css({ 'backgroundColor':'#652D90', 'color': '#fff' }); }); <div id=“yo”> <p>I like stuff. Do you like stuff?</p> </div> Get an element by ID $(function(){ $("#yo").css({ 'backgroundColor':'#652D90', 'color': '#fff' }); }); Slide 5 of 14 rethink | redesign | results
8. Selectors ID, classes & elements Pseudo class selectors <table> <tr><td>I'm even!</td></tr> <tr><td>I'm odd!</td></tr> <tr><td>I'm even!</td></tr> <tr><td>I'm odd!</td></tr> </table> $(function(){ $("td:even").css({ 'backgroundColor':'#652D90', 'color': '#fff' }); }); <h1>I am a heading!</h1> $(function(){ $(“h1").css({ 'backgroundColor':'#652D90', 'color': '#fff' }); }); Remember: This will get all HTML elements on the page so if you had multiple <h1>’s this change would apply to all of them. A great list of pseudo class selectors http://css-tricks.com/pseudo-class-selectors/ Slide 6 of 14 rethink | redesign | results
9. Events Lets interact with something Some handy events .click() .dblclick() .focus() .keypress() .mouseover() .hover() <h1>I am a heading!</h1> $(function(){ $("h1").click(function(){ $(this).css({ 'backgroundColor':'#652D90', 'color': '#fff' }); }); }); The full list of events http://api.jquery.com/category/events/ Slide 7 of 14 rethink | redesign | results