Scribd Logo
Hochladen

Willkommen bei Scribd!

  • JQuery Tutorial - Brian Catalano 8pag (V) !

    Hochgeladen von

    Gheorghe Cotleţ
    24 Ansichten8 Seiten
    A guide to the fundamentals of the jquery Javascript library with examples and basic knowledge to get started. A text editor basic Javascript knowledge isn't necessarily required, but it makes things much easier if you understand how Javascript works "behind the scenes"

    Originalbeschreibung:

    Originaltitel

    JQuery Tutorial - Brian Catalano 8pag (v) !

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    A guide to the fundamentals of the jquery Javascript library with examples and basic knowledge to get started. A text editor basic Javascript knowledge isn't necessarily required, but it makes things much easier if you understand how Javascript works "behind the scenes"

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    24 Ansichten8 Seiten

    JQuery Tutorial - Brian Catalano 8pag (V) !

    Hochgeladen von

    Gheorghe Cotleţ
    A guide to the fundamentals of the jquery Javascript library with examples and basic knowledge to get started. A text editor basic Javascript knowledge isn't necessarily required, but it makes things much easier if you understand how Javascript works "behind the scenes"

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 8

    IT704

    Working With JQuery


    Brian Catalano
    A guide to the fundamentals of the JQuery Javascript library with examples and basic knowledge to get started.

    Brian Catalano 10/4/11 IT704

    What is JQuery? JQuery is a Javascripting library. What this does is takes core Javascript functions and combines them into a simpler context to decrease the amount of typed code and save time programming. It is free to download and fully open source, so you can modify and create your own instances of code to get exactly what you want out of it. JQuery is also designed out of the box to work cross-browser, so the functionalities remain consistent between each. What you need to get started The JQuery library Before you can do any work with JQuery you need to decide where you wish to access the source library. There are two ways of doing this with JQuery: 1.) Download it from http://jquery.com/. There are two versions here, uncompressed and minified. The uncompressed version is useful for local testing, but for actual network testing the minified version is more efficient (it just removes unnecessary characters so that it loads faster for the person browsing the site). 2.) Link to the library through Google Libraries here: http://code.google.com/apis/libraries/devguide.html#jquery. This is a more efficient way of linking for external users because it does not require users to download the JQuery library onto their machine to use the Javascript functionalities. A Text Editor Basic Javascript Knowledge This isnt necessarily required, but it makes things much easier if you understand the basic concepts of how Javascript works behind the scenes. JQuery has a very detailed API to help understand how to implement the functions and a good community support if further assistance is needed. JQuery Documentation: http://docs.jquery.com/Main_Page JQuery Community Forum: http://forum.jquery.com/ How to use JQuery in your website As mentioned above, going through the Google Library is the more efficient way of linking to the source. You will notice that there are two links associated with the path. The path ending with jquery.min.js is the minified version while the path ending in jquery.js is the uncompressed version. Choose the path ending in jquery.js for out the purpose of this tutorial as it will be all local testing (but remember to use the jquery.min.js version for actual implementation). Next you will need to insert following script element into the head of the HTML code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>

    This links to the library on Googles server, so there is no need for a user to download JQuery to use the sites full functionality. It should be noted that you can also use older and/or multiple versions or JQuery on the same document if needed, so you are not just limited to the newest version. Google Libraries even supplies the older versions, so just use the same format as above regardless of what version you wish to use. You are now set to start some actual coding with JQuery. Some Basics As a very simple example I will begin by showing the difference between normal Javascript coding and JQuery coding in adding an element (a paragraph to be specific) to the DOM of a site. Raw Javascript example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuery Tutorial</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> </head> <body> <h1>Result Below</h1> <script> function addP(){ var filler = document.createElement("p"); var text = document.createTextNode("Normal Javascript takes 7 lines!"); filler.appendChild(text); document.body.appendChild(filler); } addP(); </script> </body> </html>

    Notice all the steps it took to complete this task. Just adding a new paragraph element takes 7 lines of coding in raw Javascript as you need to create the element, the text node, append children to both the document and the element, and finally call the function. That is a lot of steps for a relatively small task. JQuery example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuery Tutorial</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> </head> <body> <h1>Result Below</h1> <script> $("h1").add("<p>The JQuery added this in one line!</p>").appendTo(document.body); </script> </body> </html>

    Notice the immediate difference that JQuery made to the code. In what took raw Javascript 7 lines, JQuery was able to achieve the same task in just one. It is very easy to see how this could save a programmer time and effort. Some things to note in this example: 1.) The $ represents JQuery and is used whenever calling to use one of its methods 2.) Append only needed to be used once and the creating of the text and page elements did not need to be explicitly stated Another useful keyword in JQuery is ready. It is the equivalent of raw Javascripts onload method (makes sure Javascript doesnt execute until the page is loaded). For more useful keywords and methods visit http://docs.jquery.com/Main_Page Plugins JQuery also supports a vast array of plugins, built from the community, which can help to save even more time in creating your web page: http://plugins.jquery.com/ This contains a breakdown sorted by the type of plugins contained inside. There are thousands of them within this listing so it can be a bit overwhelming to find exactly what you might be looking for, as well as some plugins that do similar things, so it can be a bit tricky to find the right one for your project.

    Implementing the plugins is easy, but also differs depending on how the author decided on posting them. Most of the ones that I had experience with are contained in a rar archve and are simply .js files within. For .js files simply use this format within the head: <script type="text/javascript" src="*** "></script> Where *** is the name of the file. This simply tells the browser that this file is part of the website. It is also important to note that some of the plugins require some action on your end to make them work properly. In most cases the plugins that require extra coding will come with a readme file that explicitly states this. Plugin Example: <!DOCTYPE html> <html> <head> <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> <style type="text/css"> #box1 { width: 100px; height: 100px; background: Green; Color:white; } #box2 { width: 100px; height: 100px; background: Red; Color:white; } #box3 { width: 100px; height: 100px; background: Blue; Color:white; } </style> <script> $(document).ready(function() { $("#box1").resizable(); }); $(document).ready(function() { $("#box2").draggable(); }); $(document).ready(function() { $("#box3").resizable(); }); $(document).ready(function() { $("#box3").draggable(); });

    </script> </head> <body> <div id="box1">Resize Me!</div> <div id="box2">Drag Me!</div> <div id="box3">Resize and Drag Me!</div> </body> </html> What this example illustrates is the power of the JQuery plugins. With just a few lines of code I am able to take CSS objects and manipulate their position, their size/shape, or both. To achieve this I took the source code of both the draggable plugin and the resizable plugin and coded them together to produce one working plugin. Each box does a different thing (green resize, red drag, blue both). This is the beauty of open source, you can take pieces of code from separate projects and modify them together into one working plugin. Original Draggable plugin: http://docs.jquery.com/UI/Draggable Original Resizable plugin: http://docs.jquery.com/UI/Resizable You may have noticed two new additions to this code that the first example did not have: 1.) The path contained in the link tag. What this is a target to a JQuery theme. 2.) The second Script tag. This is a path to the JQuery UI Library. What this does is add functionality for animations, effects, interaction, and widgets. More info on JQuery UI at: http://jqueryui.com/ This is only the beginning The depth of JQuery far exceeds what any one tutorial could possibly convey. This tutorials main goal was to give a taste of how much time it can save a programmer I a Javascript-heavy project and how useful the syntax is. JQuery is the biggest Javascript library in the world and the community continues to develop for it daily so its usefulness only continues to expand.

    Recommended Reading: JQuery Documentation http://docs.jquery.com/Main_Page 51+ Best of JQuery Tutorials and Examples http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html How JQuery Works http://docs.jquery.com/Tutorials:How_jQuery_Works

    Works Cited

    1.) "JQuery." Wikipedia, the Free Encyclopedia. Web. 04 Oct. 2011. <http://en.wikipedia.org/wiki/JQuery>. 2.) JQuery: The Write Less, Do More, JavaScript Library. Web. 04 Oct. 2011. <http://jquery.com/>. 3.) Resig, John. "Tutorials:How JQuery Works - JQuery JavaScript Library." Main Page - JQuery JavaScript Library. Web. 04 Oct. 2011. <http://docs.jquery.com/Tutorials:How_jQuery_Works>. 4.) Monis, Sydney. "51 Best of JQuery Tutorials and Examples - Noupe." Noupe - The Curious Side of Smashing Magazine. Web. 04 Oct. 2011. <http://www.noupe.com/tutorial/51-best-of-jquery-tutorialsand-examples.html>. 5.) Main Page - JQuery JavaScript Library. Web. 04 Oct. 2011. <http://docs.jquery.com/Main_Page>. 6.) "Google Libraries API - Developer's Guide - Google Libraries API." Google Code. Web. 04 Oct. 2011. <http://code.google.com/apis/libraries/devguide.html>.

    Das könnte Ihnen auch gefallen