之前已经有很多方法可以通过angular进行本地数据的读取。以前的例子中，大多数情况都是将数据存放到模块的$scope变量中，或者直接利用ng-init定义初始化的数据。但是这些方法都只为了演示其他功能的效果。这次来学习一下如何将Angular和PHP相结合，从后台读取数据。 首先，利用PHP，我们定义了一组后台数据，代码如下（test.php）： ~~~ <?php header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; charset=UTF-8"); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $result = $conn->query("SELECT CompanyName, City, Country FROM Customers"); $outp = ""; while($rs = $result->fetch_array(MYSQLI_ASSOC)) { if ($outp != "") {$outp .= ",";} $outp .= '{"Name":"' . $rs["CompanyName"] . '",'; $outp .= '"City":"' . $rs["City"] . '",'; $outp .= '"Country":"'. $rs["Country"] . '"}'; } $outp ='{"records":['.$outp.']}'; $conn->close(); echo($outp); ?> ~~~ 这段代码含义比较简单，连接数据库后，从数据库中利用sql语句选择相应的数据（$conn->query("SELECT CompanyName, City,Country FROM Customers")）。之后，利用循环结构，将取出的数据以键值对的形式保存在$outp变量中。 接下来，在js中操作如下： ~~~ <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("test.php") .success(function (response) {$scope.names = response.records;}); }); </script> ~~~ 这里仍然应用了$http服务进行数据的读取，传入数据文件对应的url路径，成功后返回数据，并绑定到$scope.names变量上。

AngularJS中为我们提供了众多的内置服务，通过这些内置服务可以轻松的实现一些常用功能。下面对Angular中常用的内置服务进行一下总结。 1.$location服务 $location服务用于返回当前页面的URL地址，示例代码如下： ~~~ var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); }); ~~~ 这里为$scope对象定义了myUrl变量，然后利用$location服务读取到了URL地址并存储到myUrl中。 2..$http服务 $http 是 AngularJS 中最常用的服务，它经常用于服务器的数据传输。下面的例子中服务向服务器发送请求，应用响应服务器传送过来的数据。 ~~~ var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); }); ~~~ 3.$timeout()服务和$interval()服务 这两个服务的功能对应的是javascript中的setTimeout()和setTimeInterval函数。一个简单的实时更新时间例子如下： ~~~ app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); }); ~~~ 除了Angular中提供的内置服务外，我们也可以自己定义服务，利用service即可，下面是一个定义服务的基本代码框架： ~~~ app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); ~~~ 定义好服务后，我们可以像使用内置的Angular服务一样使用它： ~~~ app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255); }); ~~~

表单是最常用的一种组建。在Angular.js中，其实并没有单独的为表单添加多少特殊功能。但是，利用Angular.js框架本身的特点，可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的。 1.根据输入域数据实时更新输出数据 下面代吗实现了一个简易的计算表单，它能将用户输入的数据进行处理，并且实时显示在表单输出域中： ~~~ <div ng-app="" ng-init="quantity=1;price=5"> 数量： <input type="number" ng-model="quantity"> 价格： <input type="number" ng-model="price"> <p><b>总价：</b> {{ quantity * price }}</p> </div> ~~~ 通过定义两个ng-model，将用户输入的数据进行实时监听，并且利用{{}}进行数据的调用，拥几行代码就完成了一个建议的计算表单功能。 2.实现表单重置功能 下面的代码实现了一个表单中经常使用的功能：重置表单。 HTML代码： ~~~ <div ng-app="myApp" ng-controller="formCtrl"> <form> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p>form = {{user}}</p> </div> ~~~ JS代码： ~~~ var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.master = {firstName: "John", lastName: "Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); ~~~ 在JS控制器代码中，我们定义了master对象，用来存放初始时刻表单输入框的值。我们定义了一个reset()方法，该方法执行后，利用angular.copy方法，将master中的值赋值给user，利用这样的方法实现了表单域的重置。在HTML代码中，我们使用ng-click鼠标点击事件触发reset()函数，从而实现我们的功能。 3.实现表单下拉菜单选择域功能 在Angular中，实现下拉菜单很简单。我们可以利用ng-repeat指令来方便的实现一个下拉菜单： 首先，在js的模型中定义数据，数据格式如下： ~~~ var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"]; }); ~~~ 然后，我们在html中，利用ng-repeat进行模型中数据的读取（具体含义见之前博客） ~~~ <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"> </select> </div> ~~~ 关于下拉菜单，还涉及到从数据库、远程等读取数据，此外还有其他方法实现下拉菜单。这些将在之后进行讨论。

~~~ <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">angular.js中，指令是最基础的也是最重要的工具之一。angular.js指令指的是以ng为前缀的HTML属性。在之前的ng-app、ng-model等，都属于指令。</span> ~~~ angular.js中的基本指令包括如下内容： 1.ng-app/ng-model ng-app指令用于声明angular,js的作用范围，ng-model用于声明模型。这些在之前都已经进行过详细介绍。 2.ng-init 这个指令用于进行模块的初始化，一个最简单的使用方法是利用这个指令进行数据初始化，代码如下： ~~~ <div ng-app="" ng-init="cost=5"> <p>单价： {{ cost }}</p> </div> ~~~ 上述代码中，利用ng-init初始化了cost变量的值，在之后利用{{}}（angular中的数据绑定方式之一）进行调用。但是这种数据初始化的方式并不推荐。 3.ng-bind 这个指令可以用来进行数据绑定，它的功能就和我们之前提到的{{}}作用相同。在如下代码中，我们不用{{}}方式，而改用ng-bind指令进行数据绑定，代码如下： ~~~ <div ng-app="" ng-init="cost=5"> <p>单价： <span ng-bind= "cost"></span></p> </div> ~~~ 4.ng-repear ng-repeat指令用于进行反复输出，一般用于对数组的遍历，示例代码如下： ~~~ <div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>循环对象：</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> ~~~ 这里对names内的所有徐对象进行遍历，并分别按照规定的模板进行输出，类似于php中的foreach语句。x in names表示将names数组中的每一个对象都赋值给x，然后输出，没循环一次进行一次这个操作，直到将数组遍历结束。 以上给出的都是AngularJS中自己预先定义的指令。我们在angular.js中还可以自己进行指令的定义，需要使用directive方法。一个简单的指令定义代码如下： ~~~ var app = angular.module("myApp", []); app.directive("hello", function() { return { template : "<h1>自定义指令!</h1>"//tempate指定该指令渲染的模板 }; }); ~~~ 上面的代码中我们定义了一个hello指令，template定义了该指令的模板，即我们使用这个指令时，需要在html中呈现出什么样的内容。定义好指令后，就可以像之前一样进行调用了。 上面对指令的调用只给出了作为html属性的调用方式。其实angular.js中提供了四种进行指令调用的方法。它们分别为元素名调用、属性调用、类名调用和注释调用。它们的形式如下（按顺序）： ~~~ <runoob-directive>runoob-directive>   ~~~ ~~~ <div runoob-directive>div>   ~~~ ~~~ <div class="runoob-directive">div>   ~~~ angular中，为了更清楚的表示这四种调用，每个调用都为其设定了一个英文字母的标识，用于在指令定义时限定它们的被调用方式，分别为： E 只限元素名使用 A 只限属性使用 C 只限类名使用 M 只限注释使用 下面的例子说明了如何在定义指令时使用这些限制： ~~~ var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "A", template : "<h1>自定义指令!</h1>" }; }); ~~~ 当然，这些标识也可以放在一起使用，默认的restrict为EA，表示可以元素名调用或者属性调用。

~~~ <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">关于CSS定位，有人很多时候都是随便用用，符合自己的要求就行。但是CSS中的position等属性确实有很多需要认真考究的地方。</span> ~~~ 1.position:static static属性是position的默认值，也就是说，当一个元素没有为其设定position属性时，它的默认值就是static。 2.position:absolute 这是一个经常会被用到的position属性值。如果为某个元素设定了absolute，则该元素脱离原来的文档流。形象一些说，比如a元素被定义了position:absolute，那么这个元素就不会与这个页面中的其他元素发生位置上的关系，而是凌驾于整个页面之上的漂浮状态。页面中的其他元素的位置变化、大小变化等，都不会影响a元素的位置，相当于一个局外人。 3.position:relative relative是最有用的定义方法。设置了relative属性表示，该元素相对于自己原来位置发生的变化。比如，我们定义了一个b元素，给它设定如下css样式： ~~~ #b{ position: relative; width:100px; height:100px; top:100px; } ~~~ 该段代码定义的b元素，它的位置为相对于没有定义position属性的位置向下移动100px的距离。relative属性值的定义就是这样的定位模式。 4.position:fixed fixed定位用的不多，但是它非常适用于固定模式的部分制作，比如顶部菜单。定义了fixed属性后，元素的位置不会随着任何行为发生变化。 5.relative+position 同时使用这两个定位，是一种很常用的手法，新手也可能会在此处遇见很多麻烦。总体来说，如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。比如，下面的代码利用二者的结合实现了一个两列布局; ~~~ <span style="white-space:pre"> </span>#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } ~~~ 内部的两个子div会根据其外部定位为relative的元素为参照进行绝对定位。 6.clear:both清除浮动 有的时候定位会出现塌陷现象，即子元素在父元素中，但是父元素的大小不会随着子元素的大小而被“”撑开“，导致了父元素的塌陷效果。这种bug的出现是由于子元素设定了 float属性，导致父元素的坍塌。要想解决这种bug，需要为父元素设定清除浮动。示例代码如下： ~~~ <span style="white-space:pre"> </span> #div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; } ~~~

Jquery Mobile中提供了丰富的事件处理和检测机制。 1.滚动事件 在Jquery Mobile中，使用scrollStart和scrollStop事件来监听用户开始滚动和停止滚动的事件。以scrollStart为例，使用代码如下： ~~~ $(document).on("scrollstart",function(){ alert("开始滚动！"); }); ~~~ 2.界面相关的事件 一个页面从激活到加载完毕，在jquery mobile中共被分为四个部分的事件，它们分别是： Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后 Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时 Page Transition - 在页面过渡之前和之后 Page Change - 当页面被更改，或遭遇失败时 其中，在页面初始化的部分，jquery mobile又将其分为页面创建前(pagebeforecreate)/页面创建(pagecreate)/页面初始化(pageinit)这三个阶段，在每个阶段中都可以执行相应的动作，示例代码如下： ~~~ $(document).on("pagebeforecreate",function(event){ alert(" pagebeforecreate "); }); $(document).on("pagecreate",function(event){ alert(" pagecreate "); }); $(document).on("pageinit",function(event){ alert(" pageinit ") }); ~~~ 3.关于设备方向 下面是来自w3cschool的实例代码，可以监听设备方向的变化，并在设备方向变化后设置不同的样式; ~~~ $(window).on("orientationchange",function(){ if(window.orientation == 0) // Portrait { $("p").css({"background-color":"yellow","font-size":"300%"}); } else // Landscape { $("p").css({"background-color":"pink","font-size":"200%"}); } }); ~~~

Angular.js中index.html简单结构： ~~~ <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}! </body> </html> ~~~ ng-app属性是angular.js的标志语句，它标记了angular.js的作用域。ng-app可以添加在很多地方，像上面那样添加到html标签上，说明angular脚本对整个页面都起作用。也可以在局部添加ng-app属性，比如在某一个div内添加ng-app，则表明接下来的整个div区域使用angular脚本解析，而其他位置则不适用angular脚本解析。 ng-model表示建立一个数据模型。这里在input输入姓名的输入框内，我们把该定义了一个yourname数据模型。定义了该模型后，我们可以在下面进行调用，方法是利用{{}}。这样就完成了数据绑定，当我们在输入框内输入内容时，会同步到下面的Hello语句块中。 ng-model定义的数据模型不仅可以用于上述场景，还能在许多情况下得到广泛应用。 1、设置filter，实现搜索功能 在下面的代码中，我们利用一个简单的数据模型定义+filter就可以完成一个列表搜索功能。（这是中文网上的实例代码，先不需要管不清楚的部分） ~~~ <div class="container-fluid"> <div class="row-fluid"> <div class="span2"> Search: <input ng-model="query"> </div> <div class="span10"> <ul class="phones"> <li ng-repeat="phone in phones | filter:query"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </div> </div> </div> ~~~ 上述代码中，为搜索框的input标签绑定了数据模型query。这样，用户输入的信息会被同步到query数据模型中。在下面的li中，使用filter:query就可以实现列表中的数据过滤功能，按照用户的输入信息进行filter过滤。 2、设置orderBy，实现列表排序功能 在下面的代码中，与filter同理，使用orderBy为列表添加一个排序功能： ~~~ Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> ~~~

Jquery Mobile中提供了制作列表的组建，它的data-view为listview。下面是一个典型的Jquery Mobile列表，代码如下： ~~~ <div data-role="page"id="pageone">    <div data-role="content">      <h2>有序列表：h2>      <ol data-role="listview">        <li>a href="#">列表项a>li>        <li>a href="#">列表项a>li>        <li>a href="#">列表项a>li>      <ol>      <h2>无序列表：h2>      <ul data-role="listview">        <li>a href="#">列表项a>li>        <li>a href="#">列表项a>li>        <li>a href="#">列表项a>li>      <ul>    <div>   <div>   ~~~ 上面我们定义了两种类型的列表，一个是有序列表(ul)，另一个是无序列表(ol)。这两种列表的定义和HTML相同，只要在相应的标签中添加data-role="listview"属性即可。 在这些最基本的功能之上，我们可以继续添加Jquery Mobile中为我们提供定制好的样式或者功能。下面的代码中我们利用data-inset属性为列表添加圆角和外边距： ~~~ <ul data-role="listview"data-inset="true">   ~~~ 我们经常看到一种列表，它们对内容进行了分组，即相同列表的选项放在同一个大标题下。Jquery Mobile中也为我们提供了实现这种功能的简单组建，list-divider： ~~~ <ul data-role="listview">    <li data-role="list-divider">欧洲li>    <li>a href="#">法国a>li>    <li>a href="#">德国a>li>   <ul>   ~~~ 可以设定自动排序，比如所有的都是字母通过autodividers可以自动按首字母排序,代码如下： ~~~ <ul data-role="listview"data-autodividers="true">    <li>a href="#">Adama>li>    <li>a href="#">Angelaa>li>    <li>a href="#">Billa>li>    <li>a href="#">Calvina>li>     ...   ul>   ~~~ 如果我们想为列表添加搜索功能，可以将data-filter属性设置为true，这样列表就会自动根据用户输入的信息显示删选后的结果。与此配套的data-filter-placeholder可以设定搜索框默认占位符： ~~~ <ul data-role="listview"data-filter="true" data-filter-placeholder="搜索姓名">   ~~~ 在jquery Mobile中，我们为列表添加图片的时候，图片会自动适应列表的大小，变成80*80像素，代码如下： ~~~ 1. <ul data-role="listview">   2.  <li>a href="#">img src="chrome.png">a>li>   3. <ul>   ~~~ 如果想想使用16*16px的小图标，在img的class上添加ui-li-icon即可： ~~~ <li>a href="#">imgsrcimgsrc="us.png" alt="USA"class="ui-li-icon">USAa>li>   ~~~ 最后，现在手机上比较流行的列表数量提示效果，也可以通过Jquery Mobile实现，代码如下： ~~~ <ul data-role="listview">    <li>a href="#">Inboxspanclassspanclass="ui-li-count">335span>a>li>    <li>a href="#">Sentspanclassspanclass="ui-li-count">123span>a>li>    <li>a href="#">Trashspanclassspanclass="ui-li-count">7span>a>li>   <ul>   ~~~

在网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码，大家可以在自己的电脑中查看效果： ~~~ <html lang="en" xmlns="http://www.w3.org/1999/xhtml">   <head>       <meta charset="utf-8" />       <title>title>       <style>           .box {               margin: 80px 30px;               width: 200px;               height: 200px;               position: relative;               background: #fff;               float: left;           }               .box:before {                   content: '';                   z-index: -1;                   position: absolute;                   width: 220px;                   height: 220px;                   top: -10px;                   left: -10px;               }           .first:before {               background-image: linear-gradient(90deg, yellow, gold);           }           .second:before {               background-image: linear-gradient(0deg, orange, red);           }           .third:before {               background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);           }       <style>   <head>   <body>       <div class="box first">div>       <div class="box second">div>       <div class="box third">div>   <body>   <html>   ~~~ 有代码可以看出，其实我们并没有使用border，那么这种边框效果是怎么实现的呢？ 总体思路是，我们先定义一个白色的div，在定义一个白色方块大一圈的带颜色的div。两个重叠一下，并且让白色的div覆盖彩色div，就实现了边框的效果。 这里面用到的css知识点很多。 1、:before伪类 通过上面的代码我们看出，其实我们在定义的白色div中定义了一个:before伪类，把彩色方块所有的样式都放在了这里。这是因为使用:before定义可以使得定位更加方便，只要调整top和left为边框的宽度就可以了。同时也是的二者成为一个整体。 2、linear-gradient 现在很多浏览器都支持这个css方法。该方法有以下三种使用模式： ①background:linear-gradient(top,#fff,#000) 这段代码的意思是，从上部开始为白色，到底部为黑色进行过度。 ②background:linear-gradient(top,right,#fff,#000) 这段代码关于位置传递了两个参数，top和right，表示从右上放开始，到左下方变化，其他道理与第一个相同。 ③background:linear-gradient(30deg,#fff,#000) 这段代码的第一个参数传递的是角度，其实道理和位置是一样的，只是不是从标准的位置开始变化了。那么角度和位置的对应关系是什么呢？根据实验，0度对应bottom，90度对应left，180度对应top，360度对应right。 以上就是利用linear方法实现绚丽边框的代码和解释，大家可以在本地进行实现，以此发现更多新奇的组合实现方法。

对于复杂的数据库，HTML5使用本地数据库进行操作。这是一个浏览器端的数据库。在本地数据库中我们可以直接利用JavaScript创建数据库，并利用SQL语句执行相关的数据库操作。下面分别介绍本地数据库的各个API及其使用方法。 1、利用openDatabase创建数据库 我们可以利用openDatabase方法创建数据库。openDatabase方法传递五个参数，分别是：数据库名、数据库版本号（可省略）、对数据库的描述、设置分配的数据库的大小、回调函数。 如果我们要创建一个本地数据库，可以执行如下代码： ~~~ var myWebDatabase = openDatabase(“user”, ”1.0”, “user info”, 1024*1024, function(){});   ~~~ 这样就创建了一个用户信息表。之后可以对创建的本地数据库是否成功进行验证： ~~~ if(!dataBase){   alert(“The database has been created successfully!”);   }else{   alert(“The database has not been successfully created.”)   }if(!dataBase){   alert(“The database has been created successfully!”);   }else{   alert(“The database has not been successfully created.”)   }   ~~~ 2、利用executeSql方法执行sql语句 使用executeSql方法，我们可以直接执行正常的sql语句，如下： context.executeSql(‘INSERT INTO testTable(id,name) VALUES (1,”Martin”)’); 当然，这里只体现了executeSql的功能，并没有确切说明executeSql方法怎么用，用在哪里。要想使用该方法就必须介绍transaction。 3、利用transaction处理事务、 该方法用来处理事务，可以传递三个参数：包含事务内容的一个方法、执行成功的回调函数、执行失败的回调函数（后两者可以省略）。 结合transaction和executeSql，我们就可在我们之前创建的数据库中添加创建数据表并添加数据了，代码如下： ~~~ myWebDatabase.transaction(function (context) {              context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');              context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');              context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');              context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');            });   ~~~ sql语句的含义不多解释，但从这里已经可以很明白的看出如何在本地数据库中，想在一般数据库中一样创建数据库数据表并添加数据了。

本地缓存是HTML5出现的新技术，这个技术的出现使得移动web的开发成为了可能。我们都知道，要想打造一个高性能的移动应用，速度是关键。而在HTML5之前，只有cookie能够存储数据，大小只有4kb。这严重限制了应用文件的存储，导致web开发的移动应用程序需要较长的加载时间。有了本地存储，让web移动应用能够更接近原生。 浏览器中，本地存储通过window.localStorage调用。判断浏览器是否支持本地存储的代码如下： ~~~ if(window.localStorage){    alert('This browser supports localStorage');   }else{    alert('This browser does NOT supportlocalStorage');   }   ~~~ 如果我们要将数据存储到本地，最简单的方法就是为window。localStorage添加一个属性并为其赋值。例如我们要存储一个数据name，它的值为Tom，就可以通过如下方式实现： ~~~ window.localStorage.name = “Tom”   ~~~ 这里要注意字符串变量需要引号。当我们想取出本地存储中的数据市，可以利用getItem方法。整个代码流程如下： ~~~ var storage = window.localStorage;   storage.name = “Tom”;   //取出name数据   var name1 = storage.getItem(“name”);   alert(name1);   ~~~ 这段代码在Chrome浏览器控制台中的显示结果就是一个显示Tom的提示框。可见我们已经通过这种方式正确的进行了数据的存储与读取。 如果我们想删除这些存储的数据，可以使用removeItem方法。在以上代码中加入如下代码： ~~~ storage.removeItem(“name”);   ~~~ 这时当我们再次alert的时候将显示null，因为这个数据已经被清空了。

无论是在Sencha Touch还是SAP UI5，都用到了XML这种语言。在Sencha Touch中，它和JSON一样被用来做数据传输；在SAP UI5中，它被用来当做视图模板。接下来我们来深入学习一下XML语言。 网上对XML的概述解释是：XML 是可扩展标记语言（Extensible Markup Language）的缩写，其中的标记（markup）是关键部分。您可以创建内容，然后使用限定标记标记它，从而使每个单词、短语或块成为可识别、可分类的信息。您创建的文件，或文档实例由元素（标记）和内容构成。当从打印输出读取或以电子形式处理文档时，元素能够帮助更好地理解文档。元素的描述性越强，文档各部分越容易识别。自从出现标记至今，带有标记的内容就有一个优势，即在计算机系统缺失时，仍然可以通过标记理解打印出来数据。 我们在XML文档最开始，一般要进行必要的声明： 这是一些基本的配置信息，包括xml的版本、编码方式等。该声明必须出放在XML文件的头部。 在XML中我们可以自定义标签内容，这都跟我们想要创建的东西相关。拿Sencha Touch中的一段代码为例： ~~~ <book>   <id>1id>   <image_url>image/html51.jpgimage_url>   <book_name>HTML5指南book_name>   <author>Tomauthor>   <description>a good bookdescription>   <book>   ~~~ 这段代码，通过book标签，定义了我们要创建的book，里面的每个标签都定义了其所包括的属性。这些标签都是自定义的。其中要注意，标签开始标记和结尾标记单词的拼写要完全一致，包括大小写，否则处理系统会当做两个文件处理。 像HTML中一样，我们可以为自定义的标签设定属性，如： HTML5指南 编辑好的xml文档，其实就是一堆字符串形式的数据。至于我们要怎么使用，是用在视图还是数据，都可以根据我们的需求进行调用。大部分语言都支持xml的统一标准。

1、鼠标滑过工具栏特效 ~~~ <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>鼠标移动到div上时出现随鼠标移动的提示框</title> <style> .hover{ width:300px; height:300px; border:2px black solid; } .tooltip{ border:2px black solid; width:100px; height:40px; position:absolute; } </style> <script src="jquery-1.4.1.min.js"></script> <script> $(document).ready(function () { //hover事件 //hover事件第一个函数设定为鼠标移入时执行的效果，第二个函数为移出时 $(".hover").hover(function () { $(".tooltip").fadeIn("slow"); }, function () { $(".tooltip").fadeOut("slow"); }); //接下来设定tooltip随鼠标运动 $('.hover').mousemove(function (e) { var topPosition = e.pageY + 5; var leftPosition = e.pageX + 5; $(".tooltip").css({ 'top': topPosition + 'px', 'left': leftPosition + 'px' }); }); }); </script> </head> <body> <div class="tooltip" style="display:none">This is the tool tip</div> <div class="hover"></div> </body> </html> ~~~ 2、实现全文检索 ~~~ <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <style> .highlight{ background-color:yellow; } </style> <title></title> <script src="jquery-1.4.1.min.js"></script> <script> $(document).ready(function () { $("#search").click(highlight); $("#clear").click(clearSelection); function highlight() { var searchText = $('#text').val(); var regExp = new RegExp(searchText, 'g'); clearSelection(); $('p').each(function () { var html = $(this).html(); var newHtml = html.replace(regExp, '<span class="highlight">' + searchText + '</span>'); $(this).html(newHtml); }); } function clearSelection() { $('p').each(function () { $(this).find('.highlight').each(function () { $(this).replaceWith($(this).html()); }); }); } }); </script> </head> <body> <p> askldjaioshdqknhasd askdjnwqm,ndas egme asldkjwqndmd qlakdjqowied aksjdhjakhsduiqowhndmsanmdnbqwbedmanbdikuj askldjaioshdqknhasd askdjnwqm,ndas awqdfdxcvc,wme asldkjwqndmd qlakdjqowied aksjdhjakhsduiqowhndmsanmdnbqwbedmanbdikuj askldjytijkmh askdjnwqm,ndas awqdkqwer123eqowied aksjdhjakhsduiqowhndmsanmdnbqwbedmanbdikuj askldjaioshdqknhasd askdjnwqm,ndas awqdklnjq,wme asldkjwqndmd qlakdjqowied aksjdhjakdsf vb546yrtghfhyunbdikuj askldjaiwerbgvbtyrtyhngfscxjwqndmd qlakdjqowied aksjdhjakhsduiqowhndmsanmdnbqwbedmanbdikuj tyrgbsd askdjnwqm,ndas awqdkergfdvcksjdhjakhsduiqowhndmsanmdnbqwbedmanbdikuj </p> <input type="search" id="text" /> <input type="button" value="search" id="search" /> <input type="button" value="clear" id="clear" /> </body> </html> ~~~

string.indexOf()//返回字符串中第一个与给定子串匹配的子串序号 字符串的IndexOf()方法搜索在该字符串上是否出现了作为参数传递的字符串,如果找到字符串,则返回字符的起始位置 (0表示第一个字符,1表示第二个字符依此类推)如果说没有找到则返回-1  string.lastIndexOf()//同上，从结尾开始 string.match()//在一个字符串匹配一个正则表达式 检索一个字符串或者一个正则表达式 该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。 string.replace()//替换正则表达式或替换字符串 str.replace("原字符串","要替换的字符串") string.split()//把一个字符串分割成一个字符串组 stringObject.split(separator,howmany) separator:从该参数指定的地方分离 howmany:指定返回数组的最大长度、 split()内传入正则表达式，则将字符串按照正则表达式规则进行分割 var words = sentence.split(/\s+/) string.slice(start,end)//生成一个子串 返回string中从start到end这部分的子串

说起HTML5，表面上是说它是HTML更新的第五个版本，而实际上，HTML5有很多内在的东西。正是因为HTML5的出现，使得web应用的开发变得更加方便快捷，更加标准化，提高了web应用的性能。可以说HTML5是web应用现在能够被广泛接受。 首先我们来看一下HTML5给我们带来了哪些新功能。 • 本地缓存 本地存储Web storage的作用是在网站中把有用的信息存储到本地的计算机或移动设备上，然后根据实际需要从本地读取信息。它提供两种存储类型API接口，分别是sessionStorage和localhostStorage，其中前者在会话期间内有效，后者就存储在本地，并且存储是永久的，但是两个的API使用基本上是相同的。 利用HTML5的本地存储功能，我们可以进行用户信息的保存（类似于HTML4中的cookie）、数据存储与读取等诸多功能。注意Web Storage官方建议每个网站的本地缓存大小为5MB，这相比于HTML4中cookie的几kb要大得多，功能也更强大。 接下来利用代码来具体解释一下Web Storage的使用方式，以localStorage为例，js代码如下： ~~~ window.onload = function(){ localStorage.clear();//清除之前localStorage存储的全部数据 localStorage.setItem(“userData”,”storage demo”）//setItem方法可以设定缓存数据的值，采用键值对的形式 } 除了基本操作，还可以对Storage事件进行监听： window.onload = function(){ window.addEventListener(“storage”,function(e){ console.log(e); },true); } ~~~ • 离线缓存 离线缓存可以在即使没有网络的状态下web应用仍能正常运行，非常有实用价值。HTML5的离线缓存功能为web应用（尤其是移动应用）的开发建立了良好的条件。 开始使用离线缓存功能很简单，只要在html标签中加入mainfest属性，并指定mainfest文件即可。mainfest文件的作用是告诉浏览器哪些文件需要进行离线缓存操作。举例说明.mainfest文件的应用： ~~~ CACHE MAINFEST index.html test.js NETWORK /images/ ~~~ 这些内容就表明，index.html和test.js这两个文件被定义为缓存文件，跟在CACHE MAINFEST后面。当网络不可用或不在线时，此部分文件会通过本地缓存直接读取。NETWORK后面的文件定义为无论这些文件是否已经被缓存，都必须从网络中下载。 除此之外，还要对.mainfest文件进行必要的配置，在web.xml中 ~~~ <mime-mapping>//.mainfest文件是MIME类型文件 <extension>mainfest</extension> <mime-type>text/cache-mainfest<mime-type> </mime-mapping> ~~~ 有了HTML5离线缓存技术，就可以使网站或者web开发的应用在无网络的情况下也可以进行访问，大大减少了网络消耗，也让利用web开发出来的app性能大幅提升了。 • 新型标签 ①布局语义化标签 HTML5新增了许多语义化的布局标签，用以代替之前每个布局都要使用div的无语义性的混乱局面。HTML5提供的新标签包括<head> 、< footer >、< aside >、< article >等，基本一个页面的每个布局部分，都有一个对应的标签。 HTML5语义化标签的主要作用主要体现在以下三个方面： ◎对移动端设备更加友好 ◎使用语义化的布局标签更有利于搜索引擎的的抓取 ◎语义化标签简洁，便于软件的维护和二次开发 使用语义化标签，更加符合现在的web标准。 ②其他标签 HTML5增加了许多新功能，这些功能有的对应标签。 多媒体标签。比如< video >标签可以支持视频播放功能，使用HTML5的video标签配合一些web视频播放器制作插件可以制作出效果很好的网页播放器。这里推荐video.js，比较美观，性能较好，且学习成本比较低。 <canvas>画布，将在后面进行详细介绍。 表单相关的新标签，将在后面进行详细介绍。 • Geolocation地理定位 目前，地理定位基本上是每个移动app都支持的功能。而HTML5也开始支持地理定位功能，这给利用HTML5开发移动app提供了极大帮助。 Geolocation的使用方法很简单，主要有三个方法： getCurrentPosition():获取当前用户的地理位置信息 watchPosition():定期轮询设备的位置 clearWatch():用于停止watchPosition()的轮询 目前大部分浏览器都支持Geolocation API。 • 表单 表单一直都是一个web不可缺少的部分。HTML5中提供了非常丰富的表单标签和属性。首先我们来了解几个HTML5为表单控件新添加的标签。 <meter>/<progress>:用于设置进度条，配合js即可方便的搭建出一个动态进度条。 <details>+<summary>:零js即可创建折叠内容，结构如下： <details> <summary>This is the summary</summary> This contains detail things. <details> 除了新的标签，input标签还增加了许多类型(type)，包括search/email/number/type/range/url等。 表单标签的新增属性有placeholder/autofocus/list/autocomplete等。 HTML5极大地丰富了表单内容，让编写代码变得更加简单，实现功能更加快捷。 • canvas 个人认为canvas是HTML5中最强大的功能，有了canvas，HTML5在图像这方面变得无所不能（有关canvas的具体实例请见其他博客）。 canvas可以进行切图、画图、图像的像素级操作等一系列功能，十分强大。说起canvas，应用最多的应该是基于HTML5的游戏。利用HTML5的canvas功能，配合js，可以开发出各种各样的游戏。同时，像素级的操作也让HTML5 canvas可以处理许多细致的图像问题。 创建一个canvas画布很容易，在html中使用<canvas>标签，js代码如下： var canvas = document.getElementById(canvas1); var context = canvas.getContext(“2d”); canvas可以创建丰富的图形，包括基本图形、函数曲线等。具体的使用技巧可以查看http://blog.csdn.net/clh604/article/details/8536059这篇博客。 综上，HTML5提供的新功能，使HTML5在移动应用开发、游戏开发、规范开发等方面，都有了质的飞跃。深入学习HTML5,十分必要。      

下面给大家介绍三个最近在学也比较实用的jquery插件 1、slider.js slider.js必须创建一个Slider对象实例，建议在第一个单独的.js文件中实例化Slider对象 var slider = new Slider($(‘#sliderContainer’)); 其中#sliderContainer是用来放置图片幻灯片的DIV容器，对应HTML代码： ~~~ <div id=”slideContainer”></div> 使用示例 $(function(){ var slider = new Slider(“#slider”).setDuration(3000); slider.setSize(600,400);//设置大小 slider.fetchJson(‘photos.json’);//从photo.json本地json文件中加载幻灯片图像 var transitions = [‘squaree’,’circles’,’circle’,’diamond’,’verticalSunblind’,’verticalOpen’] //以上定义一个转场数组 setInterval(function(){ var transition = transitions[Math.floor(Math.random()*transitions.length)]; if(SliderTransitionFunctions[transition]) slider.setTransitionFunction(SliderTransitionFunctions[transition]) //设置Canvas转场效果 else slider.setTransition(transition); //设置CSS转场效果 },5555); }); ~~~ photos.json文件一般格式 [ {“src”:”images/pic1.jpg”,”name”:”风景”,”link”:”http://www.baidu.com/”}, ...... ] 2、jquery.validate 使用jquery.validate实现ajax方式的表单 ~~~ $(document).ready(function(e)( $(‘#myform’).ajaxForm(function(){ alert(“success!”); }); )); ~~~ 使用jquery.validate添加客户端验证规则 ~~~ $(document).ready(function(e){ $(“guestform”).validate({ rules:{ ipt_title:{ required:true,    //设置不能为空 maxlength:20,   //设置最大长度 minlength:20,   //设置最小长度 }， ...... } }) }) ~~~ 这里的ipt_title对应html代码中的name属性，如： <input class=”contact” type=”text” name=”ipt_title” value=””/> 3、jRating jRating HTML部分 ~~~ <div class=”example”> <div class=”basic” data-average=”12” data-id=”1”></div> <div class=”basic” data-average=”8” data-id=”2”</div> </div> ~~~ //data-average表示当前评分的比例值，data-id指定当前的行   Js部分 ~~~ $(document).ready(function(){ $(“.basic”).jRating();//最简单的调用形式 $(“.basic”).jRating({ step:true, length:20, onSuccess:function(){ alert(‘success!’); } }); $(“.basic”).jRating({ canRateAgain:true,//是否可以重复评分 nbRates:3//可重复评分的次数 }) }) ~~~ 利用jRating和php搭建一个评分系统 首先创建一个保存评论信息的表 CREATE TABLE IF NOT EXISTS ‘rating’( ‘rating_id’ int(11) NOT NULL AUTO_INCREMENT,//每个评论设定一个自动增长的编号 ‘rating_title’ varchar(200) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL, ‘rating_value’ int(11) NOT NULL,//评分值 ‘rating_content’ varchar(2000) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL, PRIMARY KEY (‘rating_id’) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT=’评分表’ AUTO_INCREMENT =6; 数据库php配置文件 ~~~ <?php define(‘DB_USER’,’root’); define(‘DB_PWD’,’root’); define(‘DB_CHARSET’,’utf-8’); ...//配置各种信息 ?> ~~~     网络配置文件 ~~~ <?php header(‘Content-Type:text/html’;charset=utf-8’); require_once ‘database.inc.php’;//数据库配置文件 require_once ‘db_mysql.php’;//数据库操作类 $db = new db_mysql();//构建数据库操作对象实例 $db->connect(DB_HOST,DB_PWD,DB_NAME,DB_CHARSET); ?> ~~~   保存表单数据 ~~~ <?php sesstion_start();//打开会话设置 header(‘Content-Type:text/html’;charset=utf-8’); include_once ‘config.inc.php’; include_once ‘common.function.php’; if(isset($_POST[‘ipt_jrating’])){ $record = array( ‘rating_title’ => $_POST[‘ipt_title’], ‘rating_value’ => $_POST[‘ipt_jrating’], ‘rating_content’ => $_POST[‘ipt_content’],  ); $id = $db->insert(‘rating’,$record); if($id){ echo “<script>alert(‘评论成功!’) window.location=’bookdetail.php’;</script>”; } } $rating = getAvgRating();//获取评分平均值 ?> ~~~ 注：include_once和require_once的区别 include表示包含，找不到文件时继续向下执行； require表示必须，找不到文件时停止向下执行 getAvgRating()函数的实现 ~~~ function getAvgrating(){ global $db; $row = $db->getOneRow(“SELECT IFNULL(AVG(rating_value),0) avgrating FROM ‘rating’ WHERE 1”); return $row(“avgrating”); } ~~~   显示评分记录 ~~~ <span>评分：</span> <?php echo $list[‘rating_value’]?>分; ~~~  

### 一、豆瓣API简介及快速入门： 例如想获取ID为1220562的图书相关信息，则请求如下： http://api.douban.com/v2/book/1220562，返回的为json，其中的信息包括： id;alt/rating(评分)/author/image/title/summary(简介)/attrs(包含一组jason数据，里面有出版社、出版日期、坐等、价格、书名、页数等等一些列信息)/tags   要获取图书的信息，每个url都不同，可以到 [http://developers.douban.com/wiki/?title=book_v2#get_book](http://developers.douban.com/wiki/?title=book_v2#get_book) 查看相关url 使用get方式获取单挑API数据时方法如下： GET https://api.douban.com/v2/book/17604305?fields=id,title,url 便可返回一端json数据 获取图书信息： GET  https://api.douban.com/v2/book/:id 根据ISBN获取信息： GET  [https://api.douban.com/v2/book/isbn/:name](https://api.douban.com/v2/book/isbn/:name) 还有许多可以获取的信，都在豆瓣读书API中，找到对应的url即可 ### 二、通过url读取json数据的方法 1、通过jquery的ajax进行跨域 ~~~ jQuery(document).ready(function(){       $.ajax({          type : "get", //jquey是不支持post方式跨域的          async:false,          url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL          dataType : "jsonp",          //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)          jsonp: "jsoncallback",          //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名          jsonpCallback:"success_jsonpCallback",          //成功获取跨域服务器上的json数据后,会动态执行这个callback函数          success : function(json){               alert(json);           }       });   });  ~~~ 2、通过getJson进行跨域读取数据 ~~~ $.getJSON("http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?",     function (data) {         alert(data);     } ); ~~~

1、初始化移动浏览显示 <meta name=”viewport” content=”width=device-width,initial-scale=1”/> 2、引入jquery mobile的css文件和js文件  3、HTML5 date=*属性用于通过jquery mobile为移动设备创建交互外观 示例： ~~~ <div date-role = “page”> <div date-role = “header“> <h1>标题</h1> </div> <div role = “main” class=”ui-content”> <p>内容</p> </div> <div data-role = “footer”> <h1>页脚</h1> </div> </div> ~~~ 在一个html文件中可以放多个date-page，但默认显示第一个data-page 可以通过href的形式进行跳转，示例： ~~~ <div date-role = “page” id=”index1”> <a href=”#index1”>页面跳转</a> </div> <div date-role = “page” id=”index2”></div> ~~~ 4、设置页面过度效果data-transition ~~~ <div date-role = “page” id=”index1”> <a href=”#index1” data-transition=”slide”>页面跳转</a> </div> <div date-role = “page” id=”index2”></div> ~~~ 包括：slide/slideup/slidedown/pop/fade/flip/none 5、事件 (1)页面初始化事件：pagebeforecreate,pagecreate,pageinit (2)页面加载事件：pagebeforeload,pageload (3)页面过度事件：pagebeforeshow,pageshow,pagebeforehide,pagehide 示例： ~~~ $(document).on(“pagebeforecreate”,function(){ //do something }) $(document.on(“pagebeforehide”,”#index”,function(){ //do something[index页面消失时] }) ~~~ 6、jquery moblie按钮 示例：<a class=”ui-btn”>按钮</a> <input type=”submit” value=”按钮”/>//JQM直接添加了一些样式 让多个按钮并排显示(ui-btn-inline)： <a class=”ui-btn ui-btn-inline”>按钮</a><a class=”ui-btn ui-btn-inline”>按钮</a> 此外还有不同样式：ui-btn-a;ui-btn-b;ui-corner-all;ui-shadow 7、导航栏制作示例： ~~~ <div data-role=”navbar”> <ul> <li><a href=”#” data-icon=”camera”>导航1</a></li> <li><a href=”#” data-icon=”carat-l”>导航2</a></li> <li><a href=”#” data-icon=”carat-2”>导航3</a></li> </ul> </div> ~~~ data-icon可以设置导航图标，还可以自己制定 8、设置标题和当行蓝位置固定 设置data-position=”fixed” 9、列表 ~~~ <ul data-role=”listview data-inset=true”> <li>列表1</li> <li><a href=”#” >列表2</a></li> <li><a href=”#” >列表3</a></li> </ul> ~~~ listview指定列表样式；data-inset设置为true使列表留边距显示 复杂的列表：（详情见api） ~~~ <ul data-role=”listview data-inset=true”> <li><a href=”#” > <h2>G1次</h2> <p>北京-大连</p> <p>大连-北京</p> <p class=”ul-li-aside”>9:00开</p>//设置为右上角显示 </li> </ul> ~~~ 10、表单：直接使用html的默认表单就可以 表单自适应功能：ui-feild-content ~~~ <form> <div class=”ui-feild-content”><input type=”text”/></div> <div class=”ui-feild-content”><input type=”text”/></div> </form> ~~~ 11、表格 ~~~ <table data-role=”table” data-mode=”reflow” class=”ui-responsive table-stroke”> <thead> <tr> <td></td> <td></td> <td></td> </tr> </thead> </table> ~~~

> 原文出处：[前端开发常用技巧经验记录](http://blog.csdn.net/column/details/fareise-conquer-font.html) 作者：[fareise](http://blog.csdn.net/fareise) **本系列文章经作者授权在看云整理发布，未经作者允许，请勿转载！** # 前端开发常用技巧经验记录 > 记录一些前端开发过程中的技巧以及开发过程中的经验，包括HTML，CSS，Javascript，Jquery，Bootstrap等。