Quick Intro to JQuery and JQuery Mobile
0 likes1,181 views
This document provides an overview of JQuery, JQuery Mobile, and how they can be used together. JQuery is a popular JavaScript library that simplifies client-side scripting through DOM handling, animations, events, and AJAX. JQuery Mobile builds on JQuery to provide widgets and interfaces optimized for mobile devices. PhoneGap allows building hybrid mobile apps using HTML5, CSS, and JS that are wrapped in native containers, allowing access to device APIs. JQuery handles DOM and AJAX, JQuery Mobile provides the UI, and PhoneGap wraps the app as native.
![<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
jQuery(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
jQuery("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>](https://image.slidesharecdn.com/jqueryjquerymobile-131002012703-phpapp01/85/Quick-Intro-to-JQuery-and-JQuery-Mobile-6-320.jpg)
![<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
$(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
$("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>](https://image.slidesharecdn.com/jqueryjquerymobile-131002012703-phpapp01/85/Quick-Intro-to-JQuery-and-JQuery-Mobile-8-320.jpg)
![// USING ANONYMOUS FUNCTIONS
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready( function() {
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>](https://image.slidesharecdn.com/jqueryjquerymobile-131002012703-phpapp01/85/Quick-Intro-to-JQuery-and-JQuery-Mobile-9-320.jpg)
![// EVEN SHORTER SYNTAX, FORGET THE DOCUMENT PARAMETER
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$().ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>](https://image.slidesharecdn.com/jqueryjquerymobile-131002012703-phpapp01/85/Quick-Intro-to-JQuery-and-JQuery-Mobile-10-320.jpg)
![JQuery
and
Selectors
• Select
all
h1
elements
– $(“h1”)
• Select
the
first
one
– $(“h1”)[0]
• Add
contents
– $(“h1”)[0].innerHTML = “hello!”;
• Lot
of
different
selectors
– http://api.jquery.com/category/selectors/](https://image.slidesharecdn.com/jqueryjquerymobile-131002012703-phpapp01/85/Quick-Intro-to-JQuery-and-JQuery-Mobile-12-320.jpg)
Quick Intro to JQuery and JQuery Mobile
- 1. JQuery + JQuery Mobile Jussi Pohjolainen Tampere University of Applied Sciences
- 2. Overview • JQuery – Most popular JavaScript library to simplify client-‐side scripBng – DOM Handling, animaBons, events, AJAX – Hides browser differences! • JQuery UI – Desktop widgets, such as date picker, dialog, progress bar, tabs… – Built on top of JQuery • JQuery Mobile – Mobile app framework, mainly touch UI widgets – Support for all mobile operaBng systems – Built on top of JQuery • Possible to mix: JQuery (dom handling) + JQuery Mobile (UI).
- 3. PhoneGap? • PhoneGap (Adobe) framework allows to build hybrid apps for mobile plaTorms • Hybrid apps? – Web apps (HTML5+JS) that are wrapped inside of naBve WebView widget • Benefits – Can be sold in app stores – Can access naBve APIs • One possible stack for building cross plaTorm apps: – JQuery for DOM and AJAX Handling – JQuery Mobile for User Interface – PhoneGap for wrapping the app as naBve
- 4. JQUERY
- 5. Quick Start • Download JQuery file (hp://jquery.com/) – 1.x – 2.x • Smaller and faster, but does not support ie6, 7 or 8. • Windows Phone 8 plaTorm supports IE10. • Make your (x)html page and reference to the file in script block • Make your code and use JQuery funcBons!
- 6. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ // When document is ready to be manipulated jQuery(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked jQuery("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault(); } //]]> </script>
- 7. Some Basic Syntax • JQuery can be used in two ways: – JQuery() – Or – $() • $ is an alias to JQuery()! $ more commonly used
- 8. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ // When document is ready to be manipulated $(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked $("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault(); } //]]> </script>
- 9. // USING ANONYMOUS FUNCTIONS <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready( function() { $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); //]]> </script>
- 10. // EVEN SHORTER SYNTAX, FORGET THE DOCUMENT PARAMETER <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $().ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); //]]> </script>
- 11. Geers in the TradiBonal Way • getElementsById • getElementsByTagName • getAttribute
- 12. JQuery and Selectors • Select all h1 elements – $(“h1”) • Select the first one – $(“h1”)[0] • Add contents – $(“h1”)[0].innerHTML = “hello!”; • Lot of different selectors – http://api.jquery.com/category/selectors/
- 13. CreaBng Elements in TradiBonal Way • createElement • createTextNode • setAttribute • appendChild • removeChild
- 14. JQuery Insert $().ready(function(){ $("a").click(function(event){ // Insert the new element after element with id here $("<p>New Element</p>").insertAfter("#here"); event.preventDefault(); }); });
- 15. ManipulaBon FuncBons • .addClass() • .after() • .append() • .css() • … • See: http://api.jquery.com/category/ manipulation/
- 16. Some Effects: Lot of Anim FuncBons $('#clickme').click(function() { $('#book').slideUp('slow', function() { // Animation complete. }); });
- 17. JQUERY MOBILE
- 18. JQuery Mobile • UI for all popular mobile device plaTorms – hp://jquerymobile.com/ • Built on top of JQuery • Themes can be changed • See demo: – hp://view.jquerymobile.com/1.3.2/dist/demos/
- 19. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first jQuery Mobile code</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div data-role="page" data-theme="a"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-dividertheme="b"> <li data-role="list-divider">Options</li> <li><a href="option1.html">Option 1</a></li> <li><a href="option2.html">Option 2</a></li> <li><a href="option3.html">Option 3</a></li> <li><a href="option4.html">Option 4</a></li> </ul> </div> <div data-role="footer"> <h4>© 2013</h4> </div> </div> </body> </html>