1 / 27

Mastering jQuery Framework: Powerful Web Development Tool

Learn jQuery for consistent DOM manipulation, handling events, controlling styles, and improved cross-browser compatibility. Explore pre-built functionality and advanced techniques to enhance your web projects. Check the documentation for exhaustive guidance!

morpheus-zephyr
Download Presentation

Mastering jQuery Framework: Powerful Web Development Tool

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jQuery A Javascript Framework

  2. Why Learn Something New? • Consistent Access and Control • DOM • Events • Styles • Forget about difference between browsers • Define object behaviors before the objects exist • lots of binding of functions and listeners • Cool, pre-made functionality (plugins)

  3. Help http://docs.jquery.com/Main_Page • Core Functionality • Pluggins • Theming

  4. An Example

  5. CSS Selectors div p{} grabs all p tags within a div .info{} grabs all tags will a class of ‘info’

  6. Getting Elements with JS • document.getElementById("ID") • Returns DOM object with and id of ID • getElementsByTagName("TAG") • Returns an array of objects, all of type TAG

  7. jQuery to Select Elements $(“#id”) get element by ID $(“tag”) get element by tag $(".classname") get element by class returns array pointing at all HTML elements that match the select criteria

  8. jQuery to Select Elements JS: var ele = document.getElementById("MYID"); Jquery: var ele = $(“#MYID”);

  9. Aggregate Selects :first :last :even :odd :eq(n) $("div:first") gets all first children elements of any <div> tags

  10. XPATH-y/DOM-y Selects • Matches for • Parents • Children • Siblings $("div p") • gets all the <p> tags within any <div> tags

  11. Things you can do $("div p").html(‘Something new’); • Sets the innerHTML of all the Ps on the page to ‘something new’ var blah = $(“#myele").html(); • Assigns the HTML within the element with the ID ‘myele’ to the variable ‘blah’

  12. .each $(‘p').each(function(i) { this.prepend(“<span>P #” + i + “</span>”; }); • Creates an array of all P elements on the page • Loops over that array (each array item points to the HTML element in the DOM) • Adds P# 1, P#2….P#N to the top of each paragraph

  13. Manipulating Objects • object.html() • Returns object’s innerHTML • object.html(‘some html’) • Sets object’s html $(".alert").html(“I’m of class alert”); • Sets the html of all elements with a class of ‘alert’ to “I’m of class alert”

  14. Controlling CSS • object.css(property, value) • Also, a bunch of shortcut properties detailed • http://docs.jquery.com/CSS $(".notice").css(‘background-color’, ‘red’); • Sets the background color of all elements belonging to the ‘notice’ class to red

  15. AJAX $.ajax({ url: “myservice.php", success: function(data){ // executes when data from the server is finished being received alert(data); } });

  16. AJAX… $("#news").click(function(){ $.ajax({ url: “myservice.php", success: function(data){ alert(data); } }); });

  17. Instantiating jQuery • Link to the jQuery source Download: http://code.jquery.com/jquery-latest.js Save that file in your www or htdocs folder <script src="jquery-latest.js"></script>

  18. Document.ready Executes after the page has downloaded all referenced assets (when the page is stable) <script> $(document).ready(function(){ //code here will executed after //the page is completely loaded }); </script>

  19. An Example http://www.rpi.edu/~gillw3/websys/jq-example.txt

  20. Hello World • Create an HTML page with the following in the body • <div id=“output”></div> • In the ready function • Select the div with an id of ‘output’ • Set the HTML of that element with • ‘hello world!’

  21. Slider Plugin .slider(); creates a slider • Need to give the slider • Properties • Actions to run when events occur

  22. Slider Plugin Add the following scripts to your page <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> You might want to cache these files locally for more consistent performance To keep jQuery light, you add only the scripts for the functions that you need

  23. A home for the Slider • Add a 2 divs to the <body> of the page <div id=“myslider”></div> <div id=“display”></div>

  24. Slider • Add a document.ready function to the your page (inside a <script> tag in the head of your document) • Refer to the jQuery documenation • http://docs.jquery.com/UI/Slider

  25. Creating A Slider $("#myslider").css('width', '200px'); $("#myslider ").slider(); $("#myslider ").slider('option', 'min', 0); $("#myslider ").slider('option', 'max', 9); $("# myslider").bind('slide', function(event, ui) { $("#display").html(ui.value) });

  26. I want my stuff to look…. • Different • jQuery Theme manager • http://jqueryui.com/themeroller/

  27. In Class Work • Get the slider working • (such that as you slide it, it prints out the current value on the page • Print the word representation for the current slider value • Define an array (with normal js) at the top of the document

More Related