原文出处：前端开发常用
技巧经验记录
作者：fareise
本系列文章经作者授权在
看云整理发布，未经作者
允许，请勿转载！
前端开发常用技巧
经验记录
记录一些前端开发过程中
的技巧以及开发过程中的
经验，包括HTML，
CSS，Javascript，Jquery，
Bootstrap等。
1
、初始化移动浏览显示
meta name=”viewport” conte
<
nt=”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=”i
ndex1”>
<
<
<
a href=”#index1”>页面跳转</a>
/div>
div date-role = “page” id=”i
ndex2”></div>
4
、设置页面过度效果data-
transition
<
div date-role = “page” id=”i
ndex1”>
<
a href=”#index1” data-transi
tion=”slide”>页面跳转</a>
<
<
/div>
div date-role = “page” id=”i
ndex2”></div>
包括：
slide/slideup/slidedown/pop/fa
de/flip/none
5
、事件
(1)页面初始化事件：
pagebeforecreate,pagecreate,p
a ge init
(2)页面加载事件：
pagebeforeload,pageload
(3)页面过度事件：
pagebeforeshow,pageshow,pag
ebeforehide,pagehide
示例：
$
(document).on(“pagebeforecre
ate”,function(){
/
}
/do something
)
$
”
(document.on(“pagebeforehide
,”#index”,function(){
/
}
/do something[index页面消失时]
)
6
、jquery moblie按钮
示例：<a class=”ui-btn”>按
钮
<
input type=”submit” value=”
按钮”/>//JQM直接添加了一
些样式
让多个按钮并排显示(ui-btn-
inline ) ：
<
a class=”ui-btn ui-btn-
inline ” >按钮<a class=”ui-
btn ui-btn-inline”>按钮
此外还有不同样式：ui-btn-
a;ui-btn-b;ui-corner-all;ui-
shadow
7
、导航栏制作示例：
<
<
<
div data-role=”navbar”>
ul>
li><a href=”#” data-icon=”ca
mera”>导航1</a></li>
<
li><a href=”#” data-icon=”ca
rat-l”>导航2</a></li>
<
li><a href=”#” data-icon=”ca
rat-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></l
i>
<
li><a href=”#” >列表3</a></l
i>
<
/ul>
listvie w指定列表样式；data-
inset设置为true使列表留边距
显示
复杂的列表：（详情见a pi）
<
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- fe ild-
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-resp
onsive table-stroke”>
<
<
<
<
<
<
thead>
tr>
td></td>
td></td>
td></td>
/tr>
<
<
/thead>
/table>
一、豆瓣API简介及快
速入门：
例如想获取ID为1220562的
图书相关信息，则请求如
下：
http://api.douban.com/v2/book
中的信息包括：
id;alt/rating(评
分)/author/image/title/summar
y(简介)/attrs(包含一组jason
数据，里面有出版社、出版
日期、坐等、价格、书名、
页数等等一些列信息)/tags
要获取图书的信息，每个url
都不同，可以到
http://developers.douban.com/
wiki/?title=book_v2#get_book
查看相关url
使用get方式获取单挑API数
据时方法如下：
GET https://api.douban.com/v
2
/book/17604305?
fields=id,title,url
便可返回一端json数据
获取图书信息：
GET https://api.douban.com/v
2
/book/:id
根据ISBN获取信息：
GET https://api.douban.com/v
2
/book/isbn/:name
还有许多可以获取的信，都
在豆瓣读书API中，找到对
应的url即可
二、通过url读取json数
据的方法
1、通过jquery的ajax进行跨
域
jQuery(document).ready(functi
on(){
$
.ajax({
type : "get", //jque
y是不支持post方式跨域的
async:false,
url : "http://api.ta
obao.com/apitools/ajax_props.
do", //跨域请求的URL
dataType : "jsonp",
/
/传递给请求处理程序，用
以获得jsonp回调函数名的参数名(默认
为:callback)
jsonp: "jsoncallback
"
,
/
/自定义的jsonp回调函数
名称，默认为jQuery自动生成的随机函
数名
jsonpCallback:"succe
ss_jsonpCallback",
/
/成功获取跨域服务器上的
json数据后,会动态执行这个callback
函数
success : function(j
son){
alert(json);
}
}
);
}
);
2、通过getJson进行跨域读
取数据
$
.getJSON("http://api.taobao.
com/apitools/ajax_props.do&js
oncallback=?",
function (data) {
alert(data);
}
)
;
下面给大家介绍三个最近在
学也比较实用的jquery插件
1
、slide r. js
slide r. js必须创建一个Slide r对
象实例，建议在第一个单独
的. js文件中实例化Slide r对象
var slide r = new Slider($(‘#slid
erContainer’));
其中#sliderContainer是用来
放置图片幻灯片的DIV容
器，对应HTML代码：
<
div id=”slideContainer”></di
v>
使用示例
$
(function(){
var slider = new Slider(“#sli
der”).setDuration(3000);
slider.setSize(600,400);// 设
置大小
slider.fetchJson(‘photos.json
’);//从photo.json本地json文件中
加载幻灯片图像
var transitions = [‘squaree’,
’
’
circles’,’circle’,’diamond’,
verticalSunblind’,’verticalO
pen’]
/
/以上定义一个转场数组
setInterval(function(){
var transition = transitions[
Math.floor(Math.random()*tran
sitions.length)];
if(SliderTransitionFunctions[
transition])
slider.setTransitionFunction(
SliderTransitionFunctions[tra
nsition]) //设置Canvas转场效果
else slider.setTransition(tra
nsition); //设置CSS转场效果
}
}
,5555);
);
photos.json文件一般格式
[
{“src”:”images/pic1.jpg”,”nam
e”:”风
景”,”link”:”http://www.baidu.c
om/”},
.
.....
]
2
、jquery. validate
使用jquery.validate实现ajax方
式的表单
$
(
(document).ready(function(e)
$
(‘#myform’).ajaxForm(functio
n(){
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-avera
ge=”12” data-id=”1”></div>
<
div class=”basic” data-avera
ge=”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 EX
ISTS ‘rating’(
‘
rating_id’ int(11) NOT N ULL
AUTO_INCREMENT,//每个
评论设定一个自动增长的编
号
‘
rating_title’ varchar(200) CH
ARACTER SET utf8 COLLA
TE utf8_unicode_ci NOT NU
LL,
‘
rating_value’ int(11) NOT N
ULL, //评分值
‘
rating_content’ varchar(2000)
CHARACTER SET utf8 COL
LATE utf8_unicode_ci NOT N
ULL,
P RIMARY KEY (‘rating_id’)
ENGINE=InnoDB D E FAUL
)
T CHARSET=latin1 COMME
NT=’评分
表’ AUTO_INCREMENT
=
6;
数据库php配置文件
<
?php
define(‘DB_USER’,’root’);
define(‘DB_PWD’,’root’);
define(‘DB_CHARSET’,’utf-8’);
.
?
..//配置各种信息
>
网络配置文件
<
?php
header(‘Content-Type:text/htm
l’;charset=utf-8’);
require_once ‘database.inc.ph
p’;//数据库配置文件
require_once ‘db_mysql.php’;/
/
$
数据库操作类
db = new db_mysql();//构建数
据库操作对象实例
$
db->connect(DB_HOST,DB_PWD,D
B_NAME,DB_CHARSET);
?
>
保存表单数据
<
?php
sesstion_start();//打开会话设置
header(‘Content-Type:text/htm
l’;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[‘i
pt_content’],
)
;
$
id = $db->insert(‘rating’,$r
ecord);
if($id){
echo “<script>alert(‘评论成功!
’
)
window.location=’bookdetail.p
hp’;</script>”;
}
}
$rating = getAvgRating();//获
取评分平均值
?
>
注：include_once 和
require_once的区别
include表示包含，找不到文
件时继续向下执行；
require表示必须，找不到文
件时停止向下执行
ge tAvgRa ting()函数的实现
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_valu
e’]?>分;
说起HTML5，表面上是说它
是HTML更新的第五个版
本，而实际上，HTML5有很
多内在的东西。正是因为
HTML5的出现，使得web应
用的开发变得更加方便快
捷，更加标准化，提高了
web应用的性能。可以说
HTML5是web应用现在能够
被广泛接受。
首先我们来看一下HTML5给
我们带来了哪些新功能。
•
本地缓存
本地存储We b storage的作用
是在网站中把有用的信息存
储到本地的计算机或移动设
备上，然后根据实际需要从
本地读取信息。它提供两种
存储类型API接口，分别是
sessionStorage和
localhostStorage，其中前者
在会话期间内有效，后者就
存储在本地，并且存储是永
久的，但是两个的API使用
基本上是相同的。
利用HTML5的本地存储功
能，我们可以进行用户信息
的保存（类似于HTML4中的
cookie）、数据存储与读取
等诸多功能。注意
We b Storage官方建议每个网
站的本地缓存大小为5MB，
这相比于HTML4中cookie的
几kb要大得多，功能也更强
大。
接下来利用代码来具体解释
一下Web Storage的使用方
式，以localStorage为例，js
代码如下：
window.onload = function(){
localStorage.clear();//清除之
前localStorage存储的全部数据
localStorage.setItem(“userDat
a”,”storage demo”）//setItem
方法可以设定缓存数据的值，采用键值对
的形式
}
除了基本操作，还可以对Storage事件
进行监听：
window.onload = function(){
window.addEventListener(“stor
age”,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</extensio
n>
<
mime-type>text/cache-mainfes
t<mime-type>
<
/mime-mapping>
有了HTML5离线缓存技术，
就可以使网站或者web开发
的应用在无网络的情况下也
可以进行访问，大大减少了
网络消耗，也让利用web开
发出来的app性能大幅提升
了。
•
新型标签
布局语义化标签
①
HTML5新增了许多语义化的
布局标签，用以代替之前每
个布局都要使用d iv的无语义
性的混乱局面。HTML5提供
的新标签包括
、
< footer >、< aside >、<
article >等，基本一个页面的
每个布局部分，都有一个对
应的标签。
HTML5语义化标签的主要作
用主要体现在以下三个方
面：
◎
◎
对移动端设备更加友好
使用语义化的布局标签更
有利于搜索引擎的的抓取
◎语义化标签简洁，便于软
件的维护和二次开发
使用语义化标签，更加符合
现在的web标准。
②其他标签
HTML5增加了许多新功能，
这些功能有的对应标签。
多媒体标签。比如< vide o >
标签可以支持视频播放功
能，使用HTML5的vide o标签
配合一些web视频播放器制
作插件可以制作出效果很好
的网页播放器。这里推荐
vide o. js，比较美观，性能较
好，且学习成本比较低。
string.indexOf()//返回字符串
中第一个与给定子串匹配的
子串序号
字符串的IndexOf()方法搜索
在该字符串上是否出现了作
为参数传递的字符串,如果找
到字符串,则返回字符的起始
位置 (0表示第一个字符,1表
示第二个字符依此类推)如果
说没有找到则返回-1
string.lastIndexOf()//同上，从
结尾开始
string.match()//在一个字符串
匹配一个正则表达式
检索一个字符串或者一个正
则表达式
该方法类似 indexOf() 和
lastIndexOf()，但是它返回指
定的值，而不是字符串的位
置。
string.replace()//替换正则表
达式或替换字符串
str.replace("原字符串","要替
换的字符串")
string.split()//把一个字符串分
割成一个字符串组
stringObject.split(separator,ho
wmany)
separator:从该参数指定的地
方分离
howmany:指定返回数组的最
大长度、
split()内传入正则表达式，则
将字符串按照正则表达式规
则进行分割
var words =
sentence.split(/\s+/)
string.slice(start,end)//生成一
个子串
返回string中从start到end这部
分的子串
1
、鼠标滑过工具栏特效
<
!DOCTYPE html>
<
html lang="en" xmlns="ht
tp://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(functio
n () {
/
/
/hover事件
/hover事件第一个函数设定为鼠
标移入时执行的效果，第二个函数为移出
时
$
(".hover").hover(functio
n () {
$
(".tooltip").fadeIn("slo
w");
}
,
function () {
$
(".tooltip").fadeOut("sl
ow");
}
);
/
/接下来设定tooltip随鼠标运动
$
('.hover').mousemove(fun
ction (e) {
var topPosition = e.pageY
5;
var leftPosition = e.page
X + 5;
+
$
'
(".tooltip").css({
top': topPosition + 'px'
,
'
left': leftPosition + 'p
x'
}
}
}
<
<
<
<
);
);
);
/script>
/head>
body>
div class="tooltip" styl
e="display:none">This is the
tool tip</div>
<
<
div class="hover"></div>
/body>
<
/html>
2
、实现全文检索
<
!DOCTYPE html>
<
html lang="en" xmlns="ht
tp://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(functio
n () {
$
ght);
$
("#search").click(highli
("#clear").click(clearSe
lection);
function highlight() {
var searchText = $('#text
).val();
'
var regExp = new RegExp(s
earchText, 'g');
clearSelection();
('p').each(function () {
$
var html = $(this).html()
;
var newHtml = html.replac
e(regExp, '<span class="highl
ight">' + searchText + '</spa
n>');
$
}
}
(this).html(newHtml);
);
function clearSelection()
{
$
$
('p').each(function () {
(this).find('.highlight'
)
.each(function () {
(this).replaceWith($(thi
s).html());
$
}
}
}
}
<
<
<
<
);
);
);
/script>
/head>
body>
p>
askldjaioshdqknhasd askdj
nwqm,ndas egme asldkjwqndmd q
lakdjqowied aksjdhjakhsduiqow
hndmsanmdnbqwbedmanbdikuj
askldjaioshdqknhasd askdj
nwqm,ndas awqdfdxcvc,wme asld
kjwqndmd qlakdjqowied aksjdhj
akhsduiqowhndmsanmdnbqwbedman
bdikuj
askldjytijkmh askdjnwqm,n
das awqdkqwer123eqowied aksjd
hjakhsduiqowhndmsanmdnbqwbedm
anbdikuj
askldjaioshdqknhasd askdj
nwqm,ndas awqdklnjq,wme asldk
jwqndmd qlakdjqowied aksjdhja
kdsf vb546yrtghfhyunbdikuj
askldjaiwerbgvbtyrtyhngfs
cxjwqndmd qlakdjqowied aksjdh
jakhsduiqowhndmsanmdnbqwbedma
nbdikuj
tyrgbsd askdjnwqm,ndas aw
qdkergfdvcksjdhjakhsduiqowhnd
msanmdnbqwbedmanbdikuj
<
<
/p>
input type="search" id="
text" />
<
input type="button" valu
e="search" id="search" />
<
input type="button" valu
e="clear" id="clear" />
<
<
/body>
/html>
无论是在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.jpg
image_url>
<
me>
<
book_name>HTML5指南book_na
author>Tomauthor>
<
description>a good bookdes
cription>
<
book>
这段代码，通过book标签，
定义了我们要创建的book，
里面的每个标签都定义了其
所包括的属性。这些标签都
是自定义的。其中要注意，
标签开始标记和结尾标记单
词的拼写要完全一致，包括
大小写，否则处理系统会当
做两个文件处理。
像HTML中一样，我们可以
为自定义的标签设定属性，
如：
HTML5指南
编辑好的xml文档，其实就
是一堆字符串形式的数据。
至于我们要怎么使用，是用
在视图还是数据，都可以根
据我们的需求进行调用。大
部分语言都支持xml的统一
标准。
本地缓存是HTML5出现的新
技术，这个技术的出现使得
移动web的开发成为了可
能。我们都知道，要想打造
一个高性能的移动应用，速
度是关键。而在HTML5之
前，只有cookie能够存储数
据，大小只有4kb。这严重
限制了应用文件的存储，导
致web开发的移动应用程序
需要较长的加载时间。有了
本地存储，让web移动应用
能够更接近原生。
浏览器中，本地存储通过
window. localStorage调用。判
断浏览器是否支持本地存储
的代码如下：
if(window.localStorage){
alert('This browser suppor
ts localStorage');
}
else{
alert('This browser does N
OT supportlocalStorage');
}
如果我们要将数据存储到本
地，最简单的方法就是为
window。localStorage添加一
个属性并为其赋值。例如我
们要存储一个数据name，它
的值为Tom，就可以通过如
下方式实现：
window.localStorage.name = “T
om”
这里要注意字符串变量需要
引号。当我们想取出本地存
储中的数据市，可以利用
getItem方法。整个代码流程
如下：
var storage = window.localS
torage;
storage.name = “Tom”;
/取出name数据
/
var name1 = storage.getItem
(“name”);
alert(name1);
这段代码在Chrome浏览器控
制台中的显示结果就是一个
显示Tom的提示框。可见我
们已经通过这种方式正确的
进行了数据的存储与读取。
如果我们想删除这些存储的
数据，可以使用removeItem
方法。在以上代码中加入如
下代码：
storage.removeItem(“name”);
这时当我们再次alert的时候
将显示null，因为这个数据
已经被清空了。
对于复杂的数据库，HTML5
使用本地数据库进行操作。
这是一个浏览器端的数据
库。在本地数据库中我们可
以直接利用JavaScript创建数
据库，并利用SQL语句执行
相关的数据库操作。下面分
别介绍本地数据库的各个
API及其使用方法。
1、利用openDatabase创建数
据库
我们可以利用openDatabase
方法创建数据库。
openDatabase方法传递五个
参数，分别是：数据库名、
数据库版本号（可省略）、
对数据库的描述、设置分配
的数据库的大小、回调函
数。
如果我们要创建一个本地数
据库，可以执行如下代码：
var myWebDatabase = openDatab
ase(“user”, ”1.0”, “user info
”
, 1024*1024, function(){});
这样就创建了一个用户信息
表。之后可以对创建的本地
数据库是否成功进行验证：
if(!dataBase){
alert(“The database has bee
n created successfully!”);
}
else{
alert(“The database has not
been successfully created.”)
}
if(!dataBase){
alert(“The database has bee
n created successfully!”);
}
else{
alert(“The database has not
been successfully created.”)
}
2
、利用executeSql方法执行
sql语句
使用executeSql方法，我们可
以直接执行正常的sql语句，
如下：
context.executeSql(‘INSERT I
NTO testTable(id,name) VA L
UES (1,”Martin”)’);
当然，这里只体现了
executeSql的功能，并没有确
切说明executeSql方法怎么
用，用在哪里。要想使用该
方法就必须介绍transaction。
、利用transaction处理事
3
务、
该方法用来处理事务，可以
传递三个参数：包含事务内
容的一个方法、执行成功的
回调函数、执行失败的回调
函数（后两者可以省略）。
结合transaction 和
executeSql，我们就可在我们
之前创建的数据库中添加创
建数据表并添加数据了，代
码如下：
myWebDatabase.transaction(f
unction (context) {
context.executeS
ql('CREATE TABLE IF NOT EXIST
S testTable (id unique, name)
'
);
context.executeS
ql('INSERT INTO testTable (id
,
;
name) VALUES (0, "Byron")')
context.executeS
ql('INSERT INTO testTable (id
,
)
name) VALUES (1, "Casper")'
;
context.executeS
ql('INSERT INTO testTable (id
,
;
name) VALUES (2, "Frank")')
}
);
sql语句的含义不多解释，但
从这里已经可以很明白的看
出如何在本地数据库中，想
在一般数据库中一样创建数
据库数据表并添加数据了。
在网上看到一种利用line a r-
gradient属性制作绚丽边框效
果的方法。首先给出代码，
大家可以在自己的电脑中查
看效果：
<
html lang="en" xmlns="http
//www.w3.org/1999/xhtml">
head>
:
>
<
<
meta charset="utf-8" /
<
<
title>title>
style>
.
box {
margin: 80px 30
px;
width: 200px;
height: 200px;
position: relat
background: #ff
float: left;
ive;
f;
}
.
box:before {
content: ''
;
z-index: -1
position: a
width: 220p
height: 220
top: -10px;
left: -10px
;
bsolute;
x;
px;
;
}
.
first:before {
background-imag
e: linear-gradient(90deg, yel
low, gold);
}
.
second:before {
background-imag
e: linear-gradient(0deg, oran
ge, red);
}
.
third:before {
background-imag
e: repeating-linear-gradient(
45deg,#cc2a2d,#cc2a2d 30px,#
f2f2f2 30px,#f2f2f2 40px,#0e7
bb 40px,#0e71bb 70px,#f2f2f2
-
1
7
0px,#f2f2f2 80px);
}
<
style>
<
<
head>
body>
<
<
<
div class="box first">
div class="box second"
div class="box third">
div>
>
div>
div>
<
<
body>
html>
有代码可以看出，其实我们
并没有使用border，那么这
种边框效果是怎么实现的
呢？
总体思路是，我们先定义一
个白色的d iv，在定义一个白
色方块大一圈的带颜色的
d iv。两个重叠一下，并且让
白色的d iv覆盖彩色d iv，就实
现了边框的效果。
这里面用到的css知识点很
多。
1
、:before伪类
通过上面的代码我们看出，
其实我们在定义的白色d iv中
定义了一个: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方法实现
绚丽边框的代码和解释，大
家可以在本地进行实现，以
此发现更多新奇的组合实现
方法。
Jquery Mobile中提供了制作
列表的组建，它的data-view
为listvie w。下面是一个典型
的Jquery Mobile列表，代码
如下：
<
div data-role="page"id="pa
geone">
div data-role="content">
<
<
<
h2>有序列表：h2>
ol data-role="listview"
>
<
<
<
li>a href="#">列表项a>
li>a href="#">列表项a>
li>a href="#">列表项a>
li>
li>
li>
<
<
<
ol>
h2>无序列表：h2>
ul data-role="listview"
>
<
<
<
li>a href="#">列表项a>
li>a href="#">列表项a>
li>a href="#">列表项a>
li>
li>
li>
<
ul>
<
div>
<
div>
上面我们定义了两种类型的
列表，一个是有序列表(ul)，
另一个是无序列表(ol)。这两
种列表的定义和HTML相
同，只要在相应的标签中添
加da ta -role ="listvie w"属性即
可。
在这些最基本的功能之上，
我们可以继续添加Jquery
Mobile中为我们提供定制好
的样式或者功能。下面的代
码中我们利用data-inset属性
为列表添加圆角和外边距：
<
ul data-role="listview"data-
inset="true">
我们经常看到一种列表，它
们对内容进行了分组，即相
同列表的选项放在同一个大
标题下。Jquery Mobile中也
为我们提供了实现这种功能
的简单组建，list- divide r：
<
ul data-role="listview">
li data-role="list-divide
r">欧洲li>
<
<
<
li>a href="#">法国a>li>
li>a href="#">德国a>li>
<
ul>
可以设定自动排序，比如所
有的都是字母通过
a utodivide rs可以自动按首字
母排序,代码如下：
<
ul data-role="listview"dat
a-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"dat
a-filter="true" data-filter-p
laceholder="搜索姓名">
在jquery Mobile中，我们为
列表添加图片的时候，图片
会自动适应列表的大小，变
成80*80像素，代码如下：
1
2
. <ul data-role="listview">
. <li>a href="#">img src="
chrome.png">a>li>
3. <ul>
如果想想使用16*16px的小
图标，在img的class上添加
ui- li- ic on即可：
<
li>a href="#">imgsrcimgsrc="
us.png" alt="USA"class="ui-li
icon">USAa>li>
-
最后，现在手机上比较流行
的列表数量提示效果，也可
以通过Jquery Mobile实现，
代码如下：
<
ul data-role="listview">
li>a href="#">Inboxspancl
assspanclass="ui-li-count">33
span>a>li>
li>a href="#">Sentspancla
<
5
<
ssspanclass="ui-li-count">123
span>a>li>
<
li>a href="#">Trashspancl
assspanclass="ui-li-count">7s
pan>a>li>
<
ul>
Angula r. js中index.html简单结
构：
<
<
!doctype html>
html ng-app>
<
head>
script src="http://c
ode.angularjs.org/angular-1.0
1.min.js"></script>
<
.
<
<
/head>
body>
Your name: <input typ
e="text" ng-model="yourname"
placeholder="World">
<
hr>
Hello {{yourname || '
World'}}!
/body>
/html>
<
<
ng-app属性是a ngula r. js的标
志语句，它标记了a ngula r. js
的作用域。ng-app可以添加
在很多地方，像上面那样添
加到html标签上，说明
angular脚本对整个页面都起
作用。也可以在局部添加ng-
app属性，比如在某一个div
内添加ng-app，则表明接下
来的整个d iv区域使用angular
脚本解析，而其他位置则不
适用angular脚本解析。
ng-model表示建立一个数据
模型。这里在input输入姓名
的输入框内，我们把该定义
了一个yourname数据模型。
定义了该模型后，我们可以
在下面进行调用，方法是利
用{{}}。这样就完成了数据
绑定，当我们在输入框内输
入内容时，会同步到下面的
He llo语句块中。
ng-model定义的数据模型不
仅可以用于上述场景，还能
在许多情况下得到广泛应
用。
1
、设置filte r，实现搜索功能
在下面的代码中，我们利用
一个简单的数据模型定义
+
filte r就可以完成一个列表搜
索功能。（这是中文网上的
实例代码，先不需要管不清
楚的部分）
<
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就可以实现列表中
的数据过滤功能，按照用户
的输入信息进行filte r过滤。
2、设置orderBy，实现列表
排序功能
在下面的代码中，与filte r同
理，使用orderBy为列表添加
一个排序功能：
Search: <input ng-model="quer
y">
Sort by:
<
select ng-model="orderProp">
<
option value="name">Alphab
etical</option>
option value="age">Newest<
<
/
<
<
option>
/select>
ul class="phones">
<
li ng-repeat="phone in pho
nes | filter:query | orderBy:
orderProp">
{
<
{phone.name}}
p>{{phone.snippet}}</p>
<
/li>
<
/ul>
Jquery Mobile中提供了丰富
的事件处理和检测机制。
1
.滚动事件
在Jquery Mobile中，使用
scrollStart和scrollStop事件来
监听用户开始滚动和停止滚
动的事件。以scrollStart为
例，使用代码如下：
$
(document).on("scrollstart",
function(){
alert("开始滚动！");
}
);
2
.界面相关的事件
一个页面从激活到加载完
毕，在jquery mobile中共被
分为四个部分的事件，它们
分别是：
Page Initia liz a tion - 在页面创
建前，当页面创建时，以及
在页面初始化之后
Page Loa d/Unloa d - 当外部页
面加载时、卸载时或遭遇失
败时
Page Transition - 在页面过渡
之前和之后
Page Change - 当页面被更
改，或遭遇失败时
其中，在页面初始化的部
分，jquery mobile又将其分
为页面创建前
(pagebeforecreate)/页面创建
(pagecreate)/页面初始化
(pageinit)这三个阶段，在每
个阶段中都可以执行相应的
动作，示例代码如下：
$
(document).on("pagebeforecre
ate",function(event){
alert(" pagebeforecreate ")
;
}
$
);
(document).on("pagecreate",f
unction(event){
alert(" pagecreate ");
}
$
);
(document).on("pageinit",fun
ction(event){
alert(" pageinit ")
}
);
3
.关于设备方向
下面是来自w3cschool的实例
代码，可以监听设备方向的
变化，并在设备方向变化后
设置不同的样式 ;
$
(window).on("orientationchan
ge",function(){
if(window.orientation == 0)
/
/ Portrait
{
$
("p").css({"background-c
olor":"yellow","font-size":"3
0
0%"});
}
else // Landscape
{
$
("p").css({"background-c
olor":"pink","font-size":"200
%
}
"});
}
);
<
span style="font-family: Ari
al, Helvetica, sans-serif; ba
ckground-color: rgb(255, 255,
2
55);"> </span><span style
=
"font-family: Arial, Helveti
ca, sans-serif; background-co
lor: rgb(255, 255, 255);">关
于CSS定位，有人很多时候都是随便用用
，
符合自己的要求就行。但是CSS中的po
sition等属性确实有很多需要认真考究
的地方。</span>
1
.position:static
static属性是position的默认
值，也就是说，当一个元素
没有为其设定position属性
时，它的默认值就是static。
2
.position:absolute
这是一个经常会被用到的
position属性值。如果为某个
元素设定了absolute，则该元
素脱离原来的文档流。形象
一些说，比如a元素被定义
了position:absolute，那么这
个元素就不会与这个页面中
的其他元素发生位置上的关
系，而是凌驾于整个页面之
上的漂浮状态。页面中的其
他元素的位置变化、大小变
化等，都不会影响a元素的
位置，相当于一个局外人。
. position:re la tive
3
relative是最有用的定义方
法。设置了relative属性表
示，该元素相对于自己原来
位置发生的变化。比如，我
们定义了一个b元素，给它
设定如下css样式：
#
b{
position: relative;
width:100px;
height:100px;
top:100px;
}
该段代码定义的b元素，它
的位置为相对于没有定义
position属性的位置向下移动
1
00px的距离。relative属性值
的定义就是这样的定位模
式。
4
.position:fixed
fixed定位用的不多，但是它
非常适用于固定模式的部分
制作，比如顶部菜单。定义
了fixed属性后，元素的位置
不会随着任何行为发生变
化。
5
. relative+position
同时使用这两个定位，是一
种很常用的手法，新手也可
能会在此处遇见很多麻烦。
总体来说，如果一个元素绝
对定位后，其参照物是以离
自身最近元素是否设置了相
对定位，如果有设置将以离
自己最近元素定位，如果没
有将往其祖先元素寻找相对
定位元素，一直找到html为
止。比如，下面的代码利用
二者的结合实现了一个两列
布局 ;
<
>
span style="white-space:pre"
</span>#div-1 {
position:relativ
e;
}
#
div-1a {
position:absolut
e;
top:0;
right:0;
width:200px;
}
#
div-1b {
position:absolut
e;
top:0;
left:0;
width:200px;
}
内部的两个子d iv会根据其外
部定位为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;
}
<
span style="font-family: Ari
al, Helvetica, sans-serif; ba
ckground-color: rgb(255, 255,
2
55);"> </span><span style
=
"font-family: Arial, Helveti
ca, sans-serif; background-co
lor: rgb(255, 255, 255);">ang
ular.js中，指令是最基础的也是最重
要的工具之一。angular.js指令指的
是以ng为前缀的HTML属性。在之前的ng
-
app、ng-model等，都属于指令。</
span>
a ngula r. js中的基本指令包括
如下内容：
1
.ng-app/ng-model
ng-app指令用于声明
angular,js的作用范围，ng-
model用于声明模型。这些
在之前都已经进行过详细介
绍。
2
. ng- init
这个指令用于进行模块的初
始化，一个最简单的使用方
法是利用这个指令进行数据
初始化，代码如下：
<
5
<
<
div ng-app="" ng-init="cost=
">
p>单价： {{ cost }}</p>
/div>
上述代码中，利用ng-init初
始化了cost变量的值，在之
后利用{{}}（angular中的数
据绑定方式之一）进行调
用。但是这种数据初始化的
方式并不推荐。
3
.ng-bind
这个指令可以用来进行数据
绑定，它的功能就和我们之
前提到的{{}}作用相同。在
如下代码中，我们不用{{}}
方式，而改用ng-bind指令进
行数据绑定，代码如下：
<
5
<
"
<
div ng-app="" ng-init="cost=
">
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中
自己预先定义的指令。我们
在a ngula r. js中还可以自己进
行指令的定义，需要使用
directive方法。一个简单的指
令定义代码如下：
var app = angular.module("myA
pp", []);
app.directive("hello", functi
on() {
return {
template : "<h1>自定义
指令!</h1>"//tempate指定该指令渲
染的模板
}
;
}
);
上面的代码中我们定义了一
个he llo指令，template定义了
该指令的模板，即我们使用
这个指令时，需要在html中
呈现出什么样的内容。定义
好指令后，就可以像之前一
样进行调用了。
上面对指令的调用只给出了
作为html属性的调用方式。
其实a ngula r. js中提供了四种
进行指令调用的方法。它们
分别为元素名调用、属性调
用、类名调用和注释调用。
它们的形式如下（按顺
序）：
<
runoob-directive>runoob-dire
ctive>
<
div runoob-directive>div>
<
>
div class="runoob-directive"
div>
angular中，为了更清楚的表
示这四种调用，每个调用都
为其设定了一个英文字母的
标识，用于在指令定义时限
定它们的被调用方式，分别
为：
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
下面的例子说明了如何在定
义指令时使用这些限制：
var app = angular.module("myA
pp", []);
app.directive("runoobDirectiv
e", function() {
return {
restrict : "A",
template : "<h1>自定义
指令!</h1>"
}
;
}
);
当然，这些标识也可以放在
一起使用，默认的restrict为
EA，表示可以元素名调用或
者属性调用。
表单是最常用的一种组建。
在Angula r. js中，其实并没有
单独的为表单添加多少特殊
功能。但是，利用Angula r. js
框架本身的特点，可以更友
好的呈现表单。下面将介绍
几种常用的功能在Angular中
是如何巧妙实现的。
1.根据输入域数据实时更新
输出数据
下面代吗实现了一个简易的
计算表单，它能将用户输入
的数据进行处理，并且实时
显示在表单输出域中：
<
div ng-app="" ng-init="quant
ity=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-contro
ller="formCtrl">
<
form>
First Name:<br>
<
input type="text" ng-mod
el="user.firstName"><br>
Last Name:<br>
<
input type="text" ng-mod
el="user.lastName">
<
<
br><br>
button ng-click="reset()
"
<
>RESET</button>
<
<
/form>
p>form = {{user}}</p>
/div>
JS代码：
var app = angular.module('myA
pp', []);
app.controller('formCtrl', fu
nction($scope) {
$
scope.master = {firstNam
e: "John", lastName: "Doe"};
$
scope.reset = function()
{
$
scope.user = angular
.
}
copy($scope.master);
}
$
;
scope.reset();
);
在JS控制器代码中，我们定
义了master对象，用来存放
初始时刻表单输入框的值。
我们定义了一个reset()方
法，该方法执行后，利用
angular.copy方法，将master
中的值赋值给user，利用这
样的方法实现了表单域的重
置。在HTML代码中，我们
使用ng-c lic k鼠标点击事件触
发reset()函数，从而实现我
们的功能。
3.实现表单下拉菜单选择域
功能
在Angular中，实现下拉菜单
很简单。我们可以利用ng-
repeat指令来方便的实现一
个下拉菜单：
首先，在js的模型中定义数
据，数据格式如下：
var app = angular.module('myA
pp', []);
app.controller('myCtrl', func
tion($scope) {
$
scope.names = ["Google",
Runoob", "Taobao"];
);
"
}
然后，我们在html中，利用
ng-repeat进行模型中数据的
读取（具体含义见之前博
客）
<
div ng-app="myApp" ng-contro
ller="myCtrl">
select ng-model="selectedNam
<
e" ng-options="x for x in nam
es">
<
/select>
<
/div>
关于下拉菜单，还涉及到从
数据库、远程等读取数据，
此外还有其他方法实现下拉
菜单。这些将在之后进行讨
论。
AngularJS中为我们提供了众
多的内置服务，通过这些内
置服务可以轻松的实现一些
常用功能。下面对Angular中
常用的内置服务进行一下总
结。
1
$
.$location服务
location服务用于返回当前
页面的URL地址，示例代码
如下：
var app = angular.module('myA
pp', []);
app.controller('customersCtrl
'
)
, function($scope, $location
{
$
scope.myUrl = $location.
absUrl();
);
}
这里为$scope对象定义了
myUr l变量，然后利用
$
location服务读取到了UR L
地址并存储到myUr l中。
2
$
..$http服务
http 是 AngularJS 中最常用
的服务，它经常用于服务器
的数据传输。下面的例子中
服务向服务器发送请求，应
用响应服务器传送过来的数
据。
var app = angular.module('myA
pp', []);
app.controller('myCtrl', func
tion($scope, $http) {
$
http.get("welcome.htm").
then(function (response) {
scope.myWelcome = re
sponse.data;
);
$
}
}
);
3.$timeout()服务和$interval()
服务
这两个服务的功能对应的是
javascript中的setTimeout()和
se tTime Inte rva l函数。一个简
单的实时更新时间例子如
下：
app.controller('myCtrl', func
tion($scope, $interval) {
$
scope.theTime = new Date
().toLocaleTimeString();
interval(function () {
scope.theTime = new
Date().toLocaleTimeString();
$
$
}
, 1000);
}
);
除了Angular中提供的内置服
务外，我们也可以自己定义
服务，利用service即可，下
面是一个定义服务的基本代
码框架：
app.service('hexafy', functio
n() {
this.myFunc = function (x
)
;
}
{
return x.toString(16)
}
);
定义好服务后，我们可以像
使用内置的Angular服务一样
使用它：
app.controller('myCtrl', func
tion($scope, hexafy) {
$
scope.hex = hexafy.myFun
c(255);
);
}
之前已经有很多方法可以通
过angular进行本地数据的读
取。以前的例子中，大多数
情况都是将数据存放到模块
的$scope变量中，或者直接
利用ng-init定义初始化的数
据。但是这些方法都只为了
演示其他功能的效果。这次
来学习一下如何将Angular和
PHP相结合，从后台读取数
据。
首先，利用PHP，我们定义
了一组后台数据，代码如下
（
test.php）：
<
?php
header("Access-Control-Allow-
Origin: *");
header("Content-Type: applica
tion/json; charset=UTF-8");
$
,
conn = new mysqli("myServer"
"myUser", "myPassword", "No
rthwind");
$
result = $conn->query("SELEC
T CompanyName, City, Country
FROM Customers");
$
outp = "";
while($rs = $result->fetch_ar
ray(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-contro
ller="customersCtrl">
<
table>
<
tr ng-repeat="x in names">
<
<
td>{{ x.Name }}</td>
td>{{ x.Country }}</td>
<
/tr>
<
<
<
/table>
/div>
script>
var app = angular.module('myA
pp', []);
app.controller('customersCtrl
'
, function($scope, $http) {
$
.
http.get("test.php")
success(function (respon
se) {$scope.names = response.
records;});
}
<
);
/script>
这里仍然应用了$http服务进
行数据的读取，传入数据文
件对应的url路径，成功后返
回数据，并绑定到
$
scope.names变量上。
