1 / 11

Chris Greenhalgh G54UBI / 2011-03-03

A really fairly simple guide to: mobile browser-based application development (part 4, JQuery & DOM). Chris Greenhalgh G54UBI / 2011-03-03. Contents. DOM concepts JQuery Selectors Some common operations. HTML describes a tree of elements. < p style="font-size: 10 ">

wylie
Télécharger la présentation

Chris Greenhalgh G54UBI / 2011-03-03

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. A really fairly simple guide to:mobile browser-based application development (part 4, JQuery & DOM) Chris Greenhalgh G54UBI / 2011-03-03 Chris Greenhalgh (cmg@cs.nott.ac.uk)

  2. Contents • DOM concepts • JQuery • Selectors • Some common operations Chris Greenhalgh (cmg@cs.nott.ac.uk)

  3. HTML describes a tree of elements <p style="font-size: 10"> Some 10-point text, <b> Bold </b> </p> Attributes: p style “font-size: 10” “Some 10-point text,” b “Bold” Chris Greenhalgh (cmg@cs.nott.ac.uk)

  4. The Document Object Model • The DOM is an API onto the browser’s internal tree model of the web page • Allows Javascript in a web page to manipulate the page itself • Add, delete and move “nodes”, i.e. elements and text • Change attributes, including CSS styling • Exposed through the “document” object • The API is quite verbose and not completely consistent in different browsers Chris Greenhalgh (cmg@cs.nott.ac.uk)

  5. JQuery • JQuery is a Javascript library or framework which makes it easier to write dynamic web pages • http://jquery.com/ • (There are lots of others, too) • JQuery includes support for (amongst other things): • DOM and CSS manipulation • Network operations (AJAX) Chris Greenhalgh (cmg@cs.nott.ac.uk)

  6. Setting up JQuery • Before you can use JQuery (or an Javascriptlibrary) you must include it in your page… • Copy the javascript library, e.g. jquery-1.4.2.min.js • Add a script element to the HTML file header before any other scripts which depend on JQuery: <script type="text/javascript" src=" jquery-1.4.2.min.js"></script> Chris Greenhalgh (cmg@cs.nott.ac.uk)

  7. Ready? • Browsers are inconsistent in when Javascript runs and when the DOM is available • So JQuery provides a way to run code as soon as the DOM is ready: $(document).ready( function() { alert(‘ready!’);} ); • i.e. “when the document is read, run the code for the given function” This is an anonymous (unnamed) function – just a wrapper for its statements Chris Greenhalgh (cmg@cs.nott.ac.uk)

  8. JQuery code structure • Most Jquery commands look something like this: $ ('#maindiv') . show('fast'); Global function Element selector Operation(s) (methods) Produces a list of elementsto be operated on Chris Greenhalgh (cmg@cs.nott.ac.uk)

  9. JQuery Selectors • As with CSS, by • element (tag) name • E.g. “p” • ID attribute • E.g. “#Alice” • class attribute • E.g. “.sans” • And in a lot more ways • See JQuery“selectors” <p>A paragraph.</p> <p>Another paragraph.</p> <p class="sans"> Paragraph with class sans</p> <p class="sans"> Another paragraph with class sans</p> <p class="sans" id="Alice"> Paragraph with class sans and id Alice.</p> Chris Greenhalgh (cmg@cs.nott.ac.uk)

  10. JQuery operations • Show/hide an element (animation) • .show(‘fast'), .hide() • Get/set an attribute • .attr('value'), .attr('value','14'); • Get/set the HTML content of an element • .html(), .html('<p>Stuff…</p>'); • Get/set a CSS style property value • .css('width'), .attr('width','100px'); • Change CSS class • .addClass('boldc'), .removeClass('boldc'); • Lots more • See JQuery API documentation http://api.jquery.com/ Chris Greenhalgh (cmg@cs.nott.ac.uk)

  11. Summary • You should now be able to • Include JQuery in your browser app • Use JQuery to dynamically change the content and appearance of your application page • Showing and hiding elements • Changing content • Changing CSS styling Chris Greenhalgh (cmg@cs.nott.ac.uk)

More Related