目 录CONTENT

文章目录

BOM

Administrator
2020-07-24 / 0 评论 / 3 点赞 / 8524 阅读 / 33090 字

BOM基础

BOM全称(Browser Object Model)浏览器对象模型,它主要操作的是DOM的载体浏览器,它主要学习的是浏览器相关的一些对象 (window)或与浏览器有关的属性

location对象属性

它指的是当前浏览器的地址栏相关信息

  1. href属性,用于获取或设置当前浏览器的地址栏地址信息
location.href;
//http://127.0.0.1:5500/01location.html
location.href="http://www.baidu.com";  //赋值百度地址,赋值成功后会跳到百度页面

这个属性可以取值,也可以赋值,当进行赋值的时候,如果是一个合法的地址,那么,浏览器会跳到新赋值的地址里面去

  1. hostname属性,获取当前网页地址栏的主机名称
location.hostname;  //127.0.0.1

127.0.0.1这是一个IP地址,它指的是本机电脑(127.0.0.1指本机电脑,localhost也指本机电脑)

  1. port属性,获取当前网页地址栏的端口号

    location.port;  //获取端口号
    

    端口号可以理解为计算机的某个门,而hostname可以理为一个地址

  2. host属性,获取当前的主机名称+端口号

    location.host;  //127.0.0.1:5500
    

    上面就是一个完整的计算机地址,我通过hostname找到了某一台电脑(127.0.0.1是自己的电脑)从5500这个端口(门)进来

    location.host==location.hostname+location.port;

  3. pathname属性,获取当前访问的路径名称

    location.pathname; //返回02location.html
    

    可以理解为找到某一台电脑以后,再去找某一个文件,它是地址栏/后面的东西

  4. search属性,获取当前地址栏?及后面的东西

    location.href="http://127.0.0.1:5500/02location.html?userName=yangbiao&pwd=123456";
    loction.search;  //?userName=yangbiao&pwd=123456";
    
  5. hash属性,用于获取#后面的东西

    location.href="http://127.0.0.1:5500/03location.html#p1";
    location.hash;  //#p1
    

    后期的SPA单页面开发模式主要使用的就是这个东西

  6. assign()方法,用于跳转到一个新的地址,就是把href属性的操作封装成了一个方法

    location.assign("http://www.baidu.com");
    
  7. replace()替换方法

    location.replace("http://www.youku.com");
    

    该方法会替换地址栏里面的url地址,然后跳转到新的网页去

    注意: replace跳转的网页不能后退到之前的网页,而assignhref都可以后退,终其原因是因为replace没有在history对象里面生成新的记录

  8. reload()方法,重新加载当前网页,相当于刷新当前网页

    location.reload();
    
  9. protocol属性,返回当前地址栏中url地址的协议

    常见的协议有httphttps以及ftp

  10. 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属性对象

该属性对象指当前网页的浏览历史记录

  1. length代表当前浏览器的历史记录长度

  2. back()方法,相当于浏览器的后退

  3. forward()方法,相当于浏览器的前进

  4. go(step)方法,去某一个历史记录,如果不给参数,默认值是0,相当于刷新当前网页

    history.go(1);  //前进一个,相当于forward()
    history.go(-1);  //后退一个,相当于back();
    history.go(-3);  //退3步
    history.go(2);   //前进2步
    

该属性对象用于记录当前的浏览器相当信息

  1. appVersion属性,用于记录当前浏览器的相关版本信息,后期会通过这个属性来进行浏览器版本的判断

  2. maxTouchPoints属性,用于获取当前的浏览器支持几个点的触摸操作,一般手机端用得多,它返回一个数组

  3. 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对象下面常用的几个东西

  1. 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

  1. close()关闭当前窗体

重要应用

  1. 跨页面操作技术

    当一个页面通过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

  2. 跨页面消息传递

    该应用主要用于后期的扫码登陆(钉钉)

    本应用点主要使用的是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>
    
  3. alert()弹窗的方法

    alert("你好");  //在页面弹了同个对话框 
    

    alert是页面的弹窗方法,它会弹出一个对话框,里面有一个按钮确定,请注意,它是一个线程阻塞的(会阻止页面的加载与代码的运行,它要不做出响应,代码一直停留在这里)

    作为专业的前端程序员,后期不会推荐付出使用这个方法,转而使用第三方的框架进行交互弹窗

  4. confirm()方法

    这个方法会弹出一个询问框,它点击确定以后,该方法会返回true ,当点击取消以后,该方法会返回false

    var result=confirm("你确定要退出吗?");
    //result就是用户点击的确定或取消的结果
    if(result){
        //用户要退出
        window.close();
    }
    
  5. prompt()弹出输入框

    这个方法会在页面上面弹出一个输入框,提供用户输入信息,它有两个参数,第一个参数是message,第二个参数是defaultVulae,当用户点击确定以后,会得到输入的值,当用户点击取消以后,该方法会返回一个null

    while(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.属性名;

注意

  1. 当这个key如果是数字的时候,必须通过getItem()或中括号取属性的方式进行
  2. localStorage.getItem(key)如果不存在这个key返回的是null ,localStorage.key如果不存在这个key则返回undefined

删除缓存值

常规方式删除

localStorage.removeItem(key);

还可以使用下面方式

delete localStorage.sex;

清空缓存

localStorage.clear();

特点(重要)

  1. 它不会自己删除,除非你手动删除,否则一直存在
  2. localStorage可以跨页面调用(可以跨页面传输数据)
  3. localStorage不能跨域(origin)调用
  4. localStorage不能跨浏览器调用
  5. 存储大小为5M

sessionStorage

它的取值,赋值,删除以及清空与上面的localStorage方式一样

sessionStorage.setItem("age",19);
sessionStorage.getItem("age");
sessionStorage.removeItem("age");
sessionStorage.clear();

同时,它也可以像对象一样去操作

特点(重要)

  1. 它不会永久存储,当前页面一旦关闭,数据立刻消失
  2. sessionStorage不能跨页面,但是它可以跨父子页面(window.open()方式打开的页面)
  3. sessionStorage更不能跨域(origin)
  4. 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

在之前学习的 locaStorage与sessionStorage里面,它们已经可以存储一定数据了,但是要注意,这两个对象都是window 下面的属性的对象,window.localStoragewindow.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与区别

  1. localStorage需要手动删除,sessionStorage关闭浏览器自动删除,而cookie可以设置过期时间自动删除
  2. localStorage可以跨页面,sessionStorage可以跨父子页面,cookie也可以跨页面,但要注意,子父径可以拿 父级路径的cookie,父级路径拿不到子级路径的
  3. 一个在window下面,一个在document下面
  4. localStorage与sessionStorage只能够在前端操作,而cookie既可以在前端操作,也可以在后端(服务器端,Java,C#等)操作

1566809211910

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

  1. 查询所有学生信息

    SELECT * FROM stuInfo
    -- 语法:SELECT 列名 FROM 表名
    -- 列名如果是*则代表所有列
    
  2. 查询所有学生信息,只是显示姓名这一列

    SELECT username FROM stuInfo
    
  3. 查询所有学生信息,显示姓名与性别这二列

    SELECT username,sex FROM stuInfo
    

    如果是多列,则用逗号隔开

规律:SELECT后面接要显示的列,列名与列名之间用逗号隔开,如果要显示所有的列,可以直接使用星号*,FROM代表要从哪一个表里面去查询数据


  1. 查询所有性别为女的学生

    SELECT * FROM stuInfo WHERE sex="女"
    

    where代表条件查询,后面跟一个条件表达式

  2. 查询所有年龄大于18岁的学生

    SELECT * FROM stuInfo WHERE age>18
    
  3. 查询所有年龄大于18岁的男生

    SELECT * FROM stuInfo WHERE age>18 AND sex="男"
    
  4. 查询年龄为20岁或21岁的学生

    SELECT * FROM stuInfo WHERE age=20 OR age=21;
    
  5. 查询年龄为20岁或21岁的男生

    SELECT * FROM stuInfo WHERE (age=20 OR age=21) AND sex="男";
    
  6. 查询年龄为20~22的学生

    SELECT * FROM stuInfo WHERE age>=20 AND age<=22
    

    第二种写法

    SELECT * FROM stuInfo WHERE age BETWEEN 20 AND 22
    
  7. 查询年龄为18,20,21三个年龄的学生

    第一种写法

    SELECT * FROM stuInfo WHERE age=18 OR age=20 OR age=21
    

    第二种写法

    SELECT * FROM stuInfo WHERE age IN (18,20,21);
    
  8. 查询年龄不为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);
    

  1. 查询班上所有姓名以张开头的学生

    SELECT * FROM stuInfo WHERE username LIKE "张%"
    

    模糊查询使用like关键字,通配符使用%,%代表任意长度的任意字符

  2. 查询班上所有姓名以”标“结尾的

    SELECT * FROM stuInfo WHERE username LIKE "%标"
    
  3. 查询班级所有学生,姓名包含”标“的

    SELECT * FROM stuInfo WHERE username LIKE "%标%"
    
  4. 查询班级姓名以”张“开头,但是姓名一共是三个字的学生

    SELECT * FROM stuInfo WHERE username LIKE "张__"
    

    SQL里面的占位符使用下划线_


修改语法

UPDATE 表名 SET 列名1=值1,列名2=值2.... WHERE 条件
  1. 请将姓名为杨标的学生年龄修改为19岁

    UPDATE stuInfo SET age=19 WHERE username="杨标"
    

    请一定一下要记得,修改语句一定要加上WHERE条件,如果不加WHERE条件,修改的就是所有的数据

  2. 请将姓名为杨标三的学生,年龄修改为20岁,性别修改为女

    UPDATE stuInfo SET age=20,sex="女" WHERE username="杨标三"
    
  3. 请将所有性别为男的学生,年龄在原来的基础之是加1岁

    UPDATE stuInfo SET age=age+1 WHERE sex="男"
    

删除语法

语法格式

DELETE FROM 表名 WHERE 条件
  1. 请删除姓名为张三的学生

    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>
3

评论区