Monday, April 21, 2014

[Web Technology] jQuery

<jQuery>

Introduction of jQuery

jQuery is a light weight JavaScript library which provides fast and easy way of HTML DOM traversing (穿過) and manipulation (操作，運用), its event handling,its client side animations, etc.
One of the greatest features of jQuery is that jQuery supports an efficient way to implement AJAX applications because of its light weight nature and make normalize and efficient web programs.

Explain the features of jQuery?

Features of jQuery are :

  • Effects and animations
  • Ajax
  • Extensibility
  • DOM element selections functions
  • Events
  • CSS manipulation
  • Utilities - such as browser version and the each function.
  • JavaScript Plugins
  • DOM traversal and modification

Why is jQuery better than JavaScript?

  • jQuery is great library for developing ajax based application. 
  • It helps the programmers to keep code simple and concise and reusable. 
  • jQuery library simplifies the process of traversal of HTML DOM tree. 
  • jQuery can also handle events, perform animation, and add the Ajax support in web applications.

How to use jQuery?

jQuery can be easily used with other libraries so it should work out of the box with simple and complex JavaScript and Ajax.

What is jQuery connect?


jQuery Mobile

Basic Page Template 
This framework provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page  


<!doctype html>
<html>
    <head>     
          <title>My Page</title>         
         <meta name="viewport" content="width=device-width, initial-scale=1">     
         <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>     
    </head>
    <body>     
        <div data-role="page">     
            <div data-role="header">         
            <h1>My Title</h1>     
            </div><!-- /header --> 
 
            <div data-role="content">     
            <p>Hello world</p>     
            </div><!-- /content --> 
     
            <div data-role="footer">         
            <h4>My Footer</h4>         
            </div><!-- /footer --> 
        </div><!-- /page --> 
    </body>
</html>
In the <body>,
a div with a data-role of page is the wrapper used to delineate a page. A header bar (data-role="header"), a content region (data-role="content") and a footer bar (data-role="footer") are added inside to create a basic page (all three are optional). These data- attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.




Make a ListView



<ul data-role="listview" data-inset="true" data-filter="true">



    <li><a href="#">Acura</a></li> 
    <li><a href="#">Audi</a></li>




    <li><a href="#">BMW</a></li>



    <li><a href="#">Cadillac</a></li>




    <li><a href="#">Ferrari</a></li>



</ul>


Add a Slider




<form>



    <label for="slider-0">Input slider:</label>




    <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />



</form>
* Notes:
  • Here's a slider made with the new HTML5 input type of range
  • no data-role needed.
Make a Button


Choose a Theme Swatch 

Reference
http://learn.jquery.com

http://www.roseindia.net/ajax/jquery/index.shtml

http://www.w3schools.com/Jquery/default.asp
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)