Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
A really fairly simple guide to: mobile browser-based application development (part 4, JQuery & DOM) Chris Greenhalgh G54UBI / 2011-03-03 Chris Greenhalgh ([email protected]) 1 Contents • DOM concepts • JQuery – Selectors – Some common operations Chris Greenhalgh ([email protected]) 2 HTML describes a tree of elements <p style="font-size: 10"> Some 10-point text, <b> Bold </b> </p> Attributes: style “font-size: 10” p “Some 10-point text,” b “Bold” Chris Greenhalgh ([email protected]) 3 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 ([email protected]) 4 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 ([email protected]) 5 Setting up JQuery • Before you can use JQuery (or an Javascript library) 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 ([email protected]) 6 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: This is an anonymous (unnamed) function – just a wrapper for its statements $(document).ready( function() { alert(‘ready!’); } ); – i.e. “when the document is read, run the code for the given function” Chris Greenhalgh ([email protected]) 7 JQuery code structure • Most Jquery commands look something like this: $ ('#maindiv') . show('fast'); Global function Element selector Operation(s) (methods) Produces a list of elements to be operated on Chris Greenhalgh ([email protected]) 8 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 ([email protected]) 9 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 ([email protected]) 10 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 ([email protected]) 11