BOM基础
BOM全称(Browser Object Model)浏览器对象模型，它主要操作的是DOM的载体浏览器，它主要学习的是浏览器相关的一些对象 (window)或与浏览器有关的属性
location对象属性
它指的是当前浏览器的地址栏相关信息
- href属性，用于获取或设置当前浏览器的地址栏地址信息
location.href;
//http://127.0.0.1:5500/01location.html
location.href="http://www.baidu.com"; //赋值百度地址，赋值成功后会跳到百度页面
这个属性可以取值，也可以赋值，当进行赋值的时候，如果是一个合法的地址，那么，浏览器会跳到新赋值的地址里面去
- hostname属性，获取当前网页地址栏的主机名称
location.hostname; //127.0.0.1
127.0.0.1这是一个IP地址，它指的是本机电脑（127.0.0.1指本机电脑，localhost也指本机电脑）
-
port属性，获取当前网页地址栏的端口号
location.port; //获取端口号端口号可以理解为计算机的某个门，而hostname可以理为一个地址
-
host属性，获取当前的主机名称+端口号
location.host; //127.0.0.1:5500上面就是一个完整的计算机地址，我通过hostname找到了某一台电脑（127.0.0.1是自己的电脑）从5500这个端口（门）进来
location.host==location.hostname+location.port; -
pathname属性，获取当前访问的路径名称
location.pathname; //返回02location.html可以理解为找到某一台电脑以后，再去找某一个文件，它是地址栏
/后面的东西 -
search属性，获取当前地址栏
?及后面的东西location.href="http://127.0.0.1:5500/02location.html?userName=yangbiao&pwd=123456"; loction.search; //?userName=yangbiao&pwd=123456"; -
hash属性，用于获取
#后面的东西location.href="http://127.0.0.1:5500/03location.html#p1"; location.hash; //#p1后期的SPA单页面开发模式主要使用的就是这个东西
-
assign()方法，用于跳转到一个新的地址,就是把
href属性的操作封装成了一个方法location.assign("http://www.baidu.com"); -
replace()替换方法
location.replace("http://www.youku.com");该方法会替换地址栏里面的url地址，然后跳转到新的网页去
注意： replace跳转的网页不能后退到之前的网页，而
assign与href都可以后退,终其原因是因为replace没有在history对象里面生成新的记录 -
reload()方法，重新加载当前网页，相当于刷新当前网页
location.reload(); -
protocol属性，返回当前地址栏中url地址的协议
常见的协议有
http和https以及ftp -
origin属性，返回当前地址栏中的地址的"域"信息
location.origin; //返回域信息origin=protocol+“//”+hostname+port
后期如果别人要是问你域是什么，你要知道
再后期我们还会讲到一个东西叫"跨域"
①、http://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 没跨域 ②、https://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 跨域了，因为协议不相同，一个是https,一个是http ③、http://www.123.com:8080/index.html 调用 http://www.123.com:8081/welcome.jsp 跨域了，因为端口号不相同，一个是8080， 另一个是8081 ④、http://www.123.com/index.html 调用 http://www.456.com/welcome.jsp 跨域了, 因为hostname不相同 ⑤、http://localhost:8080/index.html 调用 http://127.0.0.1:8080/welcom.jsp 这个有跨域，虽然locahost与127.0.0.1相同，但是在调用的时候，它不会自动转换
history属性对象
该属性对象指当前网页的浏览历史记录
-
length代表当前浏览器的历史记录长度
-
back()方法，相当于浏览器的后退
-
forward()方法，相当于浏览器的前进
-
go(step)方法，去某一个历史记录,如果不给参数，默认值是0,相当于刷新当前网页
history.go(1); //前进一个，相当于forward() history.go(-1); //后退一个，相当于back(); history.go(-3); //退3步 history.go(2); //前进2步
navigator浏览器对象
该属性对象用于记录当前的浏览器相当信息
-
appVersion属性，用于记录当前浏览器的相关版本信息，后期会通过这个属性来进行浏览器版本的判断
-
maxTouchPoints属性，用于获取当前的浏览器支持几个点的触摸操作，一般手机端用得多，它返回一个数组
-
geolocation属性，该属性用于通过浏览器实现物理位置定位
function a() { // geoloction是一个新的属性，之前旧的版本是没有这个属性，所以我们首要先判断一下有没有这个属性 if (navigator.geolocation) { //可以定位 navigator.geolocation.getCurrentPosition(success,fail); } else { //不支持定位 console.log("不支持定位") } } function success(pos){ //第一个回调函数代表成功以后的回调,pos代表回调函数接收的参数 console.log("纬度："+pos.coords.latitude,"经度:"+pos.coords.longitude); //如果定位成功，pos下面有一个 coords属性，该属性下面的latitude代表纬度，longitude代表经度 } function fail(err){ //第二个参数代表定位失败以后的回调，err代表定位失败的原因 console.log(err); }在谷歌浏览器里面会定位失败，在国内， 我们使用的定位是百度地图定位
下面我们使用百度地图来实现定位效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>百度地图示例</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TojRVDh1NKWiEGH4YgUmeSBTwuy8tCwt"> </script> <style> #mapDiv { position: fixed; left: 0px; top: 0px; width: 800px; height: 600px; } .btn1 { position: fixed; left: 0px; top: 0px; z-index: 1000; } </style> </head> <body> <div id="mapDiv"></div> <button class="btn1" type="button" onclick="a()">我要定位</button> </body> <script> var bmap = new BMap.Map("mapDiv"); //创建一个地图对象 function a() { var p = new BMap.Geolocation(); p.getCurrentPosition(function (pos) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { console.log(pos); //定位成功以后会有经纬度的信息，还有一个address的属性用于记录你的省与市 console.log(pos.latitude, pos.longitude); //创建了一个点 var point = new BMap.Point(pos.longitude, pos.latitude); console.log(point); bmap.centerAndZoom(point, 12); //设置地图的中心点，并且缩放到12级别 //创建一个标记点，设置在地图上面 var mk=new BMap.Marker(point); bmap.addOverlay(mk); bmap.panTo(point); } }, function (err) { console.log(err); }); } </script> </html>上面的案例是调用了百度地图来显示地图并进行定位的案例
参考连接百度API官网
window对象
此处只讲window对象下面常用的几个东西
- open()方法
该方法是打开一个新的子页面，其它方式打开的都不是父子页面
在之前学习的location里面，我们可以通过location.href以及location.assign还有location.replace进行网页的跳转，这几种方法都只是在当前网页进行操作
window.open("打开的网页地址","打开方式","打开的新窗体样式")
它的第二个参数是打开方式：_self当前,_blank新窗体,_top 最外层,_parent父级
| channelmode=yes|no|1|0 | 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器 |
|---|---|
| directories=yes|no|1|0 | 是否添加目录按钮。默认是肯定的。仅限IE浏览器 |
| fullscreen=yes|no|1|0 | 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器 |
| height=pixels | 窗口的高度。最小.值为100 |
| left=pixels | 该窗口的左侧位置 |
| location=yes|no|1|0 | 是否显示地址字段.默认值是yes |
| menubar=yes|no|1|0 | 是否显示菜单栏.默认值是yes |
| resizable=yes|no|1|0 | 是否可调整窗口大小.默认值是yes |
| scrollbars=yes|no|1|0 | 是否显示滚动条.默认值是yes |
| status=yes|no|1|0 | 是否要添加一个状态栏.默认值是yes |
| titlebar=yes|no|1|0 | 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes |
| toolbar=yes|no|1|0 | 是否显示浏览器工具栏.默认值是yes |
| top=pixels | 窗口顶部的位置.仅限IE浏览器 |
| width=pixels | 窗口的宽度.最小.值为100 |
它的第四个参数代表使用reaplce模式,默认是false
- close()关闭当前窗体
重要应用
-
跨页面操作技术
当一个页面通过window.open的方式进行打开以后，好么被打开的这个网页我们叫子网页，同时
window.open()这个方法会返回打开的这个页面的window对象父级页面操作子级页面
var childWindow=window.open("son.html");这个时候，得到的
childWindow对象就打开的新的页面的window对象，我们可以在这里直接操作打开的新页面，例如通过DOM去操作或直接关闭都行childWindow.document.querySelector("#div1").innerText="父级窗体改变了子级窗体"; childWindow.close(); childWindow.alert("弹窗");拿到这个
childWindow对象以后就可以像普通的window对象一样去操作子级页面操作父级页面
通过在子级页面上执行下边的代码，我们可以让子级页面找到打开它的父级页面
var parentWindow = window.opener; parentWindow.close(); //关闭父窗体 parentWindow.alert("弹窗");当一个子窗体或父级窗体被关闭以后，它的
closed属性为true -
跨页面消息传递
该应用主要用于后期的扫码登陆（钉钉）
本应用点主要使用的是
window对象下面的postMessage方法，同时还需要在接收消息的页面去监听message这个事件postMessage这个方法，它有两个参数，第一个参数代表要传递的消息，第二个参数代表"域"，如果在同一个域里面传递消息，可以不加，如果是跨域了，则一定要加接收消息窗体的域语法格式：
window.postMessage("消息内容","接收消息窗体的域信息");父窗体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>我是父页面</title> </head> <body> <button type="button" onclick="a()">打开子页面</button> </body> <script> var childWindow=null; function a(){ childWindow=window.open("son.html"); } //如果父页面要接收子页面的消息呢 window.addEventListener("message",function(event){ var e=event||window.event; if(e.data=="登陆成功"){ location.href="http://www.baidu.com"; } }) //子窗体接收消息 function aaa(){ childWindow.postMessage("子窗体要接收消息了",location.origin); } </script> </html>子窗体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>我是子页面</title> </head> <body> <div id="div1">我是子页面</div> </body> <script> var parentWindow=window.opener; //找父页面 //怎么去接收传递给我的消息呢 //给当前页面window绑定了一个message的事件，当接收到消息以后就会触发这个事件 window.addEventListener("message",function(event){ var e=event||window.event; console.log(e); console.log(e.data); //接收传递的消息 }); //父窗体接收消息 function bbb(){ parentWindow.postMessage("登陆成功",location.origin); } </script> </html> -
alert()弹窗的方法
alert("你好"); //在页面弹了同个对话框alert是页面的弹窗方法，它会弹出一个对话框，里面有一个按钮确定，请注意，它是一个线程阻塞的（会阻止页面的加载与代码的运行，它要不做出响应，代码一直停留在这里）
作为专业的前端程序员，后期不会推荐付出使用这个方法，转而使用第三方的框架进行交互弹窗
-
confirm()方法
这个方法会弹出一个询问框,它点击确定以后，该方法会返回
true,当点击取消以后，该方法会返回falsevar result=confirm("你确定要退出吗？"); //result就是用户点击的确定或取消的结果 if(result){ //用户要退出 window.close(); } -
prompt()弹出输入框
这个方法会在页面上面弹出一个输入框，提供用户输入信息，它有两个参数，第一个参数是message，第二个参数是defaultVulae,当用户点击确定以后，会得到输入的值，当用户点击取消以后，该方法会返回一个
nullwhile(true){ var val = prompt("快输入'我是SB'"); //val代表用户点击确认以后输入的内容 当用户点击取消以后，得么的是null if(val==="我是SB"){ break; } else{ alert("不要欺骗自己，快输入"); } }
localStorage
它是HTML5新出来的一个BOM对象，前期可以理解为缓存，它以浏览器为载体存储数据，并且是持久性的，不会删除，除非用户手动清除缓存
localStorage常用的方法有4个，分别是设置缓存setItem()，获取缓存值getItem(),删除缓存removeItem()以及清空缓存clear()
缓存赋值
常规的方式来放
localStorage.setItem("名","值");
还可以使用下面的方式来进行存储
localStorage.sex=18;
注意 :在存放缓存值的时候，我们要注意，它默认会将你存进去的值进行转换成，转成字符串，所以当我们去存储复杂数据类型的时候要注意了，不能直接存的，它需要进行一个 JSON转换
缓存取值
常规方式取值
localStorage.getItem("名");
还可以使用下面的方式来取值
localStorage.属性名;
注意：
- 当这个key如果是数字的时候，必须通过
getItem()或中括号取属性的方式进行 - localStorage.getItem(key)如果不存在这个key返回的是
null,localStorage.key如果不存在这个key则返回undefined
删除缓存值
常规方式删除
localStorage.removeItem(key);
还可以使用下面方式
delete localStorage.sex;
清空缓存
localStorage.clear();
特点（重要）
- 它不会自己删除，除非你手动删除，否则一直存在
- localStorage可以跨页面调用（可以跨页面传输数据）
- localStorage不能跨域（origin）调用
- localStorage不能跨浏览器调用
- 存储大小为
5M
sessionStorage
它的取值，赋值，删除以及清空与上面的localStorage方式一样
sessionStorage.setItem("age",19);
sessionStorage.getItem("age");
sessionStorage.removeItem("age");
sessionStorage.clear();
同时，它也可以像对象一样去操作
特点（重要）
- 它不会永久存储，当前页面一旦关闭，数据立刻消失
- sessionStorage不能跨页面,但是它可以跨父子页面（window.open()方式打开的页面）
- sessionStorage更不能跨域(origin)
- sessionStorage不能跨浏览器
JSON对象
它是一个JavaScript的对象表示语法，主要使用于各种语言之间的数据交互，在JS里面它是一个内置对象，JSON类型的本质是一个字符串
对象转JSON字符串
对象转JSON字符串的过程我们叫对象序列化JSON.stringify()
var obj={userName:"杨标",sex:"男"}
var str=JSON.stringify(obj); //str就是一个JSON字符串
JSON字符串转JS对象
JSON.parse()方法转换成对象
var str="{'userName':'杨标','age':18}";
var obj=JSON.parse(str);
还可以通过eval来进行
var str= "{"name":"杨标","age":18}";
eval("("+str+")");
不推荐使用eval
Cookie
在之前学习的 locaStorage与sessionStorage里面，它们已经可以存储一定数据了，但是要注意，这两个对象都是window 下面的属性的对象，window.localStorage或window.sessionStorage
但是现在我所学的cookie它不是window下面的对象，而是document下面的对象，它是document.cookie,它与sotrage相比，有一套专门的取值与赋值的方式
cookie是基于文档为载体存储数据，它只存储字符数据,可以设置过期时间，时间到期以后会自已清除
document.cookie; //取到所有的cookie
cookie的赋值
cookie的赋值是通过=来进行的
document.cookie="userName=杨标";
cookie在设置的时候可以通过Expires 来设置它的过期时间，如果没有设置，则默认是浏览器关闭以后就清除
var d=new Date("2019-8-26 16:05:00");
document.cookie="userName=杨标;Expires="+d.toGMTString();
注意： 在设置cookie的时候，一定要将时间转成GMT的时间（0时区时间）
同时我们还可以设置它的路径
var d=new Date("2019-8-26 16:25:00");
document.cookie="age=18;Expires="+d.toGMTString()+";path=/app";
cookie与storage与区别
- localStorage需要手动删除，sessionStorage关闭浏览器自动删除，而cookie可以设置过期时间自动删除
- localStorage可以跨页面，sessionStorage可以跨父子页面，cookie也可以跨页面，但要注意，子父径可以拿 父级路径的cookie，父级路径拿不到子级路径的
- 一个在window下面，一个在document下面
- localStorage与sessionStorage只能够在前端操作，而cookie既可以在前端操作，也可以在后端(服务器端,Java,C#等)操作
cookie是会随着浏览器的请求到达服务器，同时也会随着服务器的响应返回到浏览器，它在两者之间来回传输
封装cookie的常用操作
var cookieHelper = {
addCookie: function (cookieName, cookieValue, expires, path) {
//在设置cookie的时候，我们知道过期时间与路径可以省略
var str = cookieName + "=" + cookieValue;
if (arguments.length == 3) {
str += ";Expires=" + expires;
} else if (arguments.length == 4) {
str += ";Expires=" + expires;
str += ";path=" + path;
}
document.cookie = str;
},
getCookieValue: function (cookieName) {
var cookieStr = document.cookie; //字符串操作
//["userName=杨标", " sex=男", " hobby=看书"]
var cookieArr = cookieStr.split(";");
for (var i = 0; i < cookieArr.length; i++) {
var arr = cookieArr[i].split("=");
if (arr[0].trim() == cookieName) {
return arr[1];
}
}
},
removeCookie: function (cookieName) {
// cookie只要发生重名了，就是覆盖
var d = new Date("1970-1-1");
var str = cookieName + "=;Expires=" + d.toGMTString();
document.cookie = str;
}
}
cookie大小的限制
一、浏览器允许每个域名所包含的cookie数：
Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。
Firefox每个域名cookie限制为50个。
Opera每个域名cookie限制为30个。
Safari/WebKit貌似没有cookie限制。但是如果cookie很多，则会使header大小超过服务器的处理的限制，会导致错误发生。
注：“每个域名cookie限制为20个”将不再正确！
二、当很多的cookie被设置，浏览器如何去响应。
除Safari（可以设置全部cookie，不管数量多少），有两个方法：
最少最近使用（leastrecentlyused(LRU)）的方法：当Cookie已达到限额，自动踢除最老的Cookie，以使给最新的Cookie一些空间。Internet Explorer和Opera使用此方法。
Firefox很独特：虽然最后的设置的Cookie始终保留，但似乎随机决定哪些cookie被保留。似乎没有任何计划（建议：在Firefox中不要超过Cookie限制）。
三、不同浏览器间cookie总大小也不同：
Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。
Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。
Internet Explorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。
注：多字节字符计算为两个字节。在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。
WebSql
顾名思义它是浏览器端的SQL，SQL可以理解为数据库，那么WebSql就是浏览器端的数据库，它可以在浏览器存储相关的数据，以表格的形式在存储
WebSql它是一个数据库，数据库其实就是存放数据的仓库
如果我要存储数据了，那么就应该先创建一个数据库，在JS里面，创建数据库有一个特殊的方法
var db =openDatabase(name,verseion,displayName,size,?createCallBack);
现在我们已经知道基础语法了，来偿试一下
var db = openDatabase("H1904","1.0","H1904",2*1024*1024)
注意：openDatabase本意是打开数据库，但要注意，如果这个数据库不存在则创建，如果存在则直接打开了。openDatabase创建（打开）成功以后会返回这个数据库对象
数据库的操作需要使用一定的特殊语法，这种语法不同于JS，它是SQL结构化查询语言
数据库基础语法
数据库是存储数据的仓库，它本身的操作只有四种，分别是增，删，改，查。我们在学习数据库的基础语法的时候，也是从这几种方式来的
创建数据表
CREATE TABLE IF NOT EXISTS stuInfo (username,sex,age,addr)
CREATE TABLE IF NOT EXISTS 数据表(列1,列2)
新增语法
INSERT INTO 表名 (列名1,列名2...) VALUES (值1,值2.....)
INSERT INTO stuInfo (username,sex,age,addr) values ("杨标","男",18,"湖北武汉");
上面的列与值是一一对应的，所以在书写SQL语句的时候，我们可以把上面的语句简化如下
INSERT INTO stuInfo values ("张三","男",20,"中国");
如果列与值没有实现一一对应，则不省略
INSERT INTO stuInfo (username,addr,sex,age) VALUES ("李四","中国香港","男",20)
查询语法
它主要使用的关键字select
-
查询所有学生信息
SELECT * FROM stuInfo -- 语法：SELECT 列名 FROM 表名 -- 列名如果是*则代表所有列 -
查询所有学生信息，只是显示姓名这一列
SELECT username FROM stuInfo -
查询所有学生信息，显示姓名与性别这二列
SELECT username,sex FROM stuInfo如果是多列，则用逗号隔开
规律：SELECT后面接要显示的列，列名与列名之间用逗号隔开，如果要显示所有的列，可以直接使用星号*，FROM代表要从哪一个表里面去查询数据
-
查询所有性别为女的学生
SELECT * FROM stuInfo WHERE sex="女"where代表条件查询，后面跟一个条件表达式
-
查询所有年龄大于18岁的学生
SELECT * FROM stuInfo WHERE age>18 -
查询所有年龄大于18岁的男生
SELECT * FROM stuInfo WHERE age>18 AND sex="男" -
查询年龄为20岁或21岁的学生
SELECT * FROM stuInfo WHERE age=20 OR age=21; -
查询年龄为20岁或21岁的男生
SELECT * FROM stuInfo WHERE (age=20 OR age=21) AND sex="男"; -
查询年龄为20~22的学生
SELECT * FROM stuInfo WHERE age>=20 AND age<=22第二种写法
SELECT * FROM stuInfo WHERE age BETWEEN 20 AND 22 -
查询年龄为18,20,21三个年龄的学生
第一种写法
SELECT * FROM stuInfo WHERE age=18 OR age=20 OR age=21第二种写法
SELECT * FROM stuInfo WHERE age IN (18,20,21); -
查询年龄不为18,20,21三个年龄的学生
第一种写法
SELECT * FROM stuInfo WHERE age!=18 AND age!=20 AND age=!21第二种写法
SELECT * FROM stuInfo WHERE age NOT IN (18,20,21);
-
查询班上所有姓名以张开头的学生
SELECT * FROM stuInfo WHERE username LIKE "张%"模糊查询使用like关键字，通配符使用%，%代表任意长度的任意字符
-
查询班上所有姓名以”标“结尾的
SELECT * FROM stuInfo WHERE username LIKE "%标" -
查询班级所有学生，姓名包含”标“的
SELECT * FROM stuInfo WHERE username LIKE "%标%" -
查询班级姓名以”张“开头，但是姓名一共是三个字的学生
SELECT * FROM stuInfo WHERE username LIKE "张__"SQL里面的占位符使用下划线
_
修改语法
UPDATE 表名 SET 列名1=值1,列名2=值2.... WHERE 条件
-
请将姓名为杨标的学生年龄修改为19岁
UPDATE stuInfo SET age=19 WHERE username="杨标"请一定一下要记得，修改语句一定要加上WHERE条件，如果不加WHERE条件，修改的就是所有的数据
-
请将姓名为杨标三的学生，年龄修改为20岁，性别修改为女
UPDATE stuInfo SET age=20,sex="女" WHERE username="杨标三" -
请将所有性别为男的学生，年龄在原来的基础之是加1岁
UPDATE stuInfo SET age=age+1 WHERE sex="男"
删除语法
语法格式
DELETE FROM 表名 WHERE 条件
-
请删除姓名为张三的学生
DELETE FROM stuInfo WHERE username="张三"
数据库的操作无非就是增删改查四个操作，所以我们可以总结如下的关键字
-
增 insert into
INSERT INTO 表名(列名1,列名2.....) VALUES (值1,值2) -
删 delete from
DELETE FROM 表名 WHERE 条件 -
改 update
UPDATE 表名 SET 列名1=值1,列名2=值2..... WHERE 条件 -
查 select
SELECT 列名1,列名2...FROM 表名 WHERE 条件
JS操作WebSql执行SQL语句
第一步： 先获取这个数据库对象
var db=openDatabase("H1904","1.0","H1904",2*1024*1024);
第二步：创建数据表
db.transaction(function(tx){
tx.executeSql("CREATE TABLE IF NOT EXISTS stuInfo (username,sex,age,addr)");
});
上面的代码执行了一句SQL语句，这个SQL语句是用于创建数据表的
**第三步：**正常开始操作数据
在操作数据的时候，离不开数据对象db，它主要使用的是transaction这个方法，它接收一个回调，回调方法里面有一个参数tx，它有一个方法executeSql()用于执行我们所需要执行SQL语句
db.transaction(function(tx){
tx.executeSql(SQL语句,[],function(tx,result){
//这个result就是执行的结果
//在这里，我们可以对result进行操作
},function(err){
//数据库执行失败以后的回调
});
});
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多条件查询</title>
<link rel="stylesheet" href="./css/dist/css/bootstrap.css" type="text/css">
</head>
<body>
<div class=" container">
<div class=" page-header">
<h2 class=" text-center text-primary">学生信息列表</h2>
</div>
<div role="form" class=" form-inline" style="margin: 10px 0px">
<div class=" form-group">
<label for="" class=" control-label">姓名</label>
<input id="txt_username" type="text" class=" form-control" placeholder="输入姓名">
</div>
<div class="form-group">
<label for="" class=" control-label">性别</label>
<select id="sel_sex" class=" form-control">
<option value="">全部</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="form-group">
<button type="button" class=" btn btn-primary" onclick="queryData()">
<span class=" glyphicon glyphicon-search"></span>查询
</button>
</div>
</div>
<div class="btn-group">
<button type="button" class=" btn btn-primary">
<span class=" glyphicon glyphicon-plus"></span>新增
</button>
<button type="button" class="btn btn-warning">
<span class=" glyphicon glyphicon-pencil"></span>编辑
</button>
<button type="button" class=" btn btn-danger">
<span class=" glyphicon glyphicon-trash"></span>删除
</button>
</div>
<div class=" table-responsive">
<table id="table1" class="table table-striped table-bordered table-hover">
<thead>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>地址</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<template id="temp1">
{{each list item index}}
<tr>
<td>{{item.username}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>{{item.addr}}</td>
</tr>
{{/each}}
</template>
</body>
<script src="./js/template-web.js" type="text/javascript"></script>
<script>
//第一步：先打开数据库
var db = openDatabase("H1904", "1.0", "H1904", 2 * 1024 * 1024);
//第二步：创建数据表
db.transaction(function (tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS stuInfo (username,sex,age,addr)");
})
//现在我们要实现模糊查询的效果
function queryData() {
var txt_username = document.querySelector("#txt_username").value.trim();
var sel_sex = document.querySelector("#sel_sex").value;
//----------多条件查询SQL语句的拼接技巧-----------------------
var strSql = "SELECT * FROM stuInfo WHERE 1=1 ";
//判断用户是否有输入姓名
if (txt_username != "") {
//查询条件里面要拼接姓名
strSql = strSql + " AND username LIKE '%" + txt_username + "%'";
}
//判断用户是否有选择性别
if (sel_sex != "") {
strSql = strSql + " AND sex='" + sel_sex + "'";
//strSql = strSql.concat("AND sex='").concat(sel_sex).concat("'");
}
db.transaction(function (tx) {
tx.executeSql(strSql, [], function (tx, result) {
var arr = Array.prototype.slice.call(result.rows);
var html = template("temp1", {
list: arr
});
document.querySelector("#table1>tbody").innerHTML = html;
})
})
}
queryData();
</script>
</html>
评论区