Web前端（七）-window对象常见属性、事件相关、DOM文档对象模型、jQuery框架、前端MVC设计模型、MVVM设计模式、VUE框架

时间：2021-08-03 10:08:32 收藏：0 阅读：28

window对象中常见的属性

location:位置
- location.href 获取或修改浏览器的请求地址
- location.reload() 重新加载/刷新
- location.search 获取地址栏中从?开始的所有参数信息
history:历史指当前窗口的访问历史
- history.length 历史页面数量
- history.forward() 前往下一页面
- history.back() 返回上一页面

事件相关

事件: 系统给提供的一些特定时间点,包括鼠标事件,键盘事件,状态改变事件.
鼠标事件
- onclick: 点击事件
- onmouseover: 鼠标移入事件
- onmouseout: 鼠标移出事件
- onmousedown: 鼠标按下事件
- onmouseup: 鼠标抬起事件
- onmousemove: 鼠标移动事件
键盘事件:
- onkeydown:键盘按下
- onkeyup: 键盘抬起
- 获取按键编码: event.keyCode
- 将按键编码转成对应的字符: String.fromCharCode(编码)
状态改变事件:
- onblur: 失去焦点事件
- onchange: 值改变事件

测试代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         div{
             width: 200px;
             height: 200px;
             background-color: red;
         }
     </style>
 </head>
 <body>
 <div onmouseover="overfn()" onmouseout="outfn()" onmousedown="downfn()" onmouseup="upfn()"
     onmousemove="movefn()"></div>
 ?
 <input type="text" onkeydown="kdfn()" onkeyup="kufn()" onblur="blurfn()">
 ?
 <select id="s1" onchange="changefn()">
 <!--    <option value=""></option>注意value内容就是""里面的内容替代-->
     <option>上海</option>
     <option>北京</option>
     <option>广州</option>
     <option>深圳</option>
 </select>
 ?
 <h1></h1>
 ?
 <script>
     function changefn() {
         //得到两个元素对象
         let s = document.querySelector("#s1");
         let h = document.querySelector("h1");
         //将下拉选的值给到h1
         h.innerText = s.value;
     }
     /*onblur:失去焦点事件*/
     function blurfn() {
         alert("已完成");
     }
     function overfn() {
         console.log("鼠标移入");
     }
     function outfn() {
         console.log("鼠标移出");
     }
     function downfn() {
         console.log("鼠标按下");
     }
     function upfn() {
         console.log("鼠标抬起");
     }
     function movefn() {
         console.log("鼠标移动");
     }
     function kdfn() {
         //得到按键编码
         console.log("键盘按下:"+event.keyCode);
     }
     function kufn() {
         //将按键编码转成字符
         console.log("按键抬起:"+String.fromCharCode(event.keyCode))
     }
 </script>
 </body>
 </html>

DOM文档对象模型

包含和页面相关内容
document.querySelector("选择器");
innerText
value

jQuery框架

作用: 是对原生JavaScript语言的封装,可以更高效的开发动态效果
如何使用jQuery框架?
- jQuery框架就是一个普通的js文件, 有两种方式引入到页面中
  - 下载jQuery.js框架文件然后引入本地文件
  - 通过CDN的方式引入远程js文件到页面中

测试代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <div>div1</div>
 <div>div2</div>
 <div>div3</div>
 <h1>测试文本</h1>
 <!--方式一:引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 <!--方式二:引入本地框架文件-->
 <!--<script src="jq.js"></script>-->
 <script>
     //获取h1标签文本内容
     //$("h1").text();
 ?
     // 找到h1标签修改其文本内容
     $("h1").text("引入成功!");
 ?
     //js写法
     //获得h1元素对象
     //let h = document.querySelector("h1");
     //h.innerText="引入成功!";
 ?
     //js写法
     //获得所有div元素对象,以数组形式返回
     let arr = document.querySelectorAll("div");
     //遍历数组
     for (let i = 0; i < arr.length; i++) {
         //取出每一个div
         let d = arr[i];
         d.innerText = "内容修改了";
     }
     //jq写法
     $("div").text("又被jq改了");
 </script>
 </body>
 </html>

利用Tab键进行框架文件快速填充：

（1）File-->Setting-->Editor-->Live Templates-->+-->Live Template

技术分享图片

（2）填写框架名称、描述、代码，使用时输入jq，按Tab进行补全即可

技术分享图片

JavaScript对象和jQuery对象互相转换

js转jq: let jq = $(js);
jq转js: let js = jq[0]; jq对象实际上就是一个数组

jQuery选择器

CSS中接触的选择器都可以在jQuery中使用,新增了一些选择器
常见选择器:
- 匹配所有div中的第一个: $("div:first");
- 匹配所有div中的最后一个: $("div:last");
- 匹配所有div中的第n个div: $("div:eq(n)"); n从0开始

测试代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <input type="text" id="i1">
 <input type="button" value="js" id="b1">
 <input type="button" value="jq" id="b2">
 <!--引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 <script>
     //给按键1添加点击事件
     //jq中动态给元素添加事件
     $("#b1").click(function () {
         //1.直接弹出警告框
         //alert("js按钮点击了!");
 ?
         //2.js:得到的是js对象,表示文本框
         // let i = document.querySelector("#i1");
         // alert(i.value);
 ?
         //3.jq:得到的是jq对象,表示文本框
         //alert($("#i1").val());
         //或
         // let i = $("#i1");
         // alert(i.val());
         //注意：js对象和jq对象是两种不同的对象，不能混着调用彼此的方法
         //value对应js   val()对应jq
 ?
         //4.js转jq
         //得到js对象
         let js = document.querySelector("#i1");
         //将js对象转成jq对象：$
         let jq = $(js);
         alert(jq.val());
     })
 ?
     //给按键2添加点击事件
     $("#b2").click(function () {
         //得到jq对象
         let jq = $("#i1");
         //把jq对象转成js对象:jq对象本质是一个数组,数组里面装的就是js对象
         let js = jq[0];//由于只有一个元素，直接写0
         alert(js.value);
     })
 ?
 </script>
 </body>
 </html>

给元素动态绑定事件

格式: 选择器选择到元素对象.事件名(function(){})

$("#b1").click(function(){事件相关代码})
jQuery中的事件名比JavaScript中少了on

显示效果相关

如何创建元素对象

let h = $("<h1>xxx</h1>");
添加元素到某个元素里面

元素对象.append(元素对象);
获取和修改元素的文本内容

元素对象.text(); //获取

元素对象.text("xxx"); //修改
获取和修改form表单中控件的值

控件对象.val(); //获取

控件对象.val("xxx"); //修改
显示隐藏相关

元素对象.hide(); 隐藏

元素对象.show(); 显示

元素对象.toggle(); 隐藏显示切换

页面相关代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <input type="text">
 <input type="button" value="按钮1">
 <input type="button" value="按钮2">
 <input type="button" value="按钮3">
 <input type="button" value="按钮4">
 <div>我是div</div>
 ?
 <!--引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 ?
 <script>
     //创建元素对象
     let h = $("<h1>我是h1</h1>");
 ?
     //把元素对象添加到某个元素里面
     $("body").append(h);
     //给按钮添加点击事件
     $("input:eq(1)").click(function () {//也可以用input:first
         //val()：取出文本框的值
         //text("xxx")：给元素的文本赋值
         $("div").text($("input:first").val());//在div中显示获取的值
         //删除掉h1
         $("h1").remove();
     })
 ?
     $("input:eq(2)").click(function () {
         $("h1").hide();//隐藏
     })
 ?
     $("input:eq(3)").click(function () {
         $("h1").show();//显示
     })
 ?
     $("input:eq(4)").click(function () {
         $("h1").toggle();//隐藏显示切换
     })
 </script>
 </body>
 </html>

好友分组练习：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <ul>
     <li>亲戚
         <ul>
             <li>小超超</li>
             <li>胖小子</li>
             <li>大侄子</li>
         </ul>
     </li>
     <li>朋友
         <ul>
             <li>张三</li>
             <li>李四</li>
             <li>王五</li>
         </ul>
     </li>
     <li>同事
         <ul>
             <li>小明</li>
             <li>小红</li>
             <li>小黑</li>
         </ul>
     </li>
 </ul>
 ?
 <!--引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 ?
 <script>
     //把所有二层ul隐藏:ul>li>ul>li
     $("li>ul").hide();
 ?
     //给第一层的li添加点击事件:body>ul>li>ul>li
     $("body>ul>li").click(function () {
         //this代表触发事件的元素对象,注意这里的this是js对象
         //得到点击li里面的子元素ul并让其显示
         $(this).children().toggle();
     });
 </script>
 </body>
 </html>

员工列表练习：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <input type="text" placeholder="员工姓名">
 <input type="text" placeholder="工资">
 <input type="text" placeholder="工作">
 <input type="button" value="添加">
 <table border="1">
     <caption>员工列表</caption>
     <tr>
         <th>姓名</th>
         <th>工资</th>
         <th>工作</th>
         <th>操作</th>
     </tr>
 </table>
 ?
 <!--引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 ?
 <script>
     //给按钮添加点击事件
     $("input:last").click(function () {
         //创建tr和4个td
         let tr = $("<tr></tr>");
         let nametd = $("<td></td>");
         let saltd = $("<td></td>");
         let jobtd = $("<td></td>");
         let deltd = $("<td><input type=‘button‘ value=‘删除‘></td>");//注意双引号和单引号交叉使用
 ?
         //得到删除td里面的删除按钮,添加点击事件
         deltd.children().click(function () {//children():获取子元素
         //deltd.click(function () {//此处td与input范围相同
             //删除当前行
             tr.remove();
         })
 ?
         //给td设置显示的文本
         nametd.text($("input:eq(0)").val());
         saltd.text($("input:eq(1)").val());
         jobtd.text($("input:eq(2)").val());
 ?
         //把td装进tr
         tr.append(nametd);
         tr.append(saltd);
         tr.append(jobtd);
         tr.append(deltd);
 ?
         //把tr装进table
         $("table").append(tr);
     })
 </script>
 </body>
 </html>

动画相关

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         img{
             width: 100px;
             position: relative;/*要改成相对定位*/
         }
     </style>
 </head>
 <body>
 <input type="button" value="隐藏">
 <input type="button" value="显示">
 <input type="button" value="淡出">
 <input type="button" value="淡入">
 <input type="button" value="上划">
 <input type="button" value="下划">
 <input type="button" value="自定义">
 <hr>
 <img src="c.jpg" alt="">
 ?
 <!--引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 ?
 <script>
     $("input:eq(0)").click(function () {
         $("img").hide(2000);//隐藏动画,单位毫秒值
     });
 ?
     $("input:eq(1)").click(function () {
         $("img").show(2000);//显示动画,单位毫秒值
     });
 ?
     $("input:eq(2)").click(function () {
         $("img").fadeOut(2000);//淡出动画,单位毫秒值
     });
 ?
     $("input:eq(3)").click(function () {
         $("img").fadeIn(2000);//淡入动画,单位毫秒值
     });
 ?
     $("input:eq(4)").click(function () {
         $("img").slideUp(2000);//上划动画,单位毫秒值
     });
 ?
     $("input:eq(5)").click(function () {
         $("img").slideDown(2000);//下划动画,单位毫秒值
     });
 ?
     //自定义动画,单位毫秒值
     $("input:eq(6)").click(function () {
         /*
         * 平移动画：必须设置定位方式为相对定位或绝对定位，因为left/top这些
         * 样式默认的静态定位是无效的。
         */
         //注意此处是相对定位,所有位置都是相对于原点而言的
         $("img").animate({"left":"200px"},2000)
                 .animate({"top":"200px"},2000)
                 .animate({"left":"0"},2000)
                 .animate({"top":"0"},2000)
                 .animate({"width":"200px"},2000)
                 .animate({"width":"100px"},2000);
     });
 </script>
 </body>
 </html>

综合练习：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <table border="1">
     <caption>英雄列表</caption>
     <tr>
         <th>名字</th>
         <th>类型</th>
         <th>价格</th>
     </tr>
 </table>
 ?
 <!--引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 ?
 <script>
     //数据模型：这属于假数据，这些数据将来需要来自服务器的数据库中
     let arr = [{name:"刘备",type:"战士",money:13888},
                {name:"黄忠",type:"射手",money:6888},
                {name:"荆轲",type:"刺客",money:18888},];
     //遍历数组
     for (let i = 0; i < arr.length; i++) {
         let hero = arr[i];//取出数组中的对象
         //创建tr和td
         let tr = $("<tr></tr>");
         let nametd = $("<td></td>");
         let typetd = $("<td></td>");
         let moneytd = $("<td></td>");
 ?
         //将对象中的数据装进3个td
         nametd.text(hero.name);
         typetd.text(hero.type);
         moneytd.text(hero.money);
 ?
         //把tr装进td
         tr.append(nametd);
         tr.append(typetd);
         tr.append(moneytd);
         table.append(tr);
 ?
         //把tr装进table
         $("table").append(tr);
     }
 </script>
 </body>
 </html>

前端的MVC设计模式

M: Model 模型, 指数据模型 , 数据一般来自于服务器
V: View 视图, 指页面中的各种标签
C: Controller 控制器, 指将数据模型展示到标签中的过程
MVC设计模式的弊端, 在Controller控制器部分需要大量的dom相关操作(遍历查找页面中的元素),这种dom操作需要占用大量资源,所以出现了MVVM设计模型解决此问题

MVVM设计模式

此设计模式避免了大量的dom操作(遍历查询元素), 从而提高了执行效率
M: Model 模型, 指数据模型 , 数据一般来自于服务器
V: View 视图, 指页面中的各种标签
VM: ViewModel 视图模型, 视图模型负责将页面中的元素和变量进行绑定,当变量发生改变时页面会自动发生改变

VUE框架

此框架就是基于MVVM设计模式诞生的一款目前比较流行的前端框架

如何使用?

此框架类似jQuery,也是一个js文件, 在html页面中引入即可

 <!--引入vue-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Vue对象就是一个视图模型VM, 负责将页面内容和数据进行绑定,当数据发生改变页面会自动发生改变.

测试代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <div id="vm_div">
     <h1>{{msg}}</h1>
 </div>
 ?
 <!--引入Vue框架文件-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 ?
 <script>
     //创建Vue对象,此对象就是一个VM视图模型对象,负责将页面元素和变量进行绑定
     let vm = new Vue({
         //el=element元素,每个vue对象负责管理页面中某一部分元素
         el:"#vm_div",
         data:{msg:"hello vue!"}
     });
 ?
     let count = 0;
     setInterval(function () {
         count++;
         //当vue对象中的msg变量值发生改变时 页面元素会自动跟着发生改变,
         //因为在vue对象中对页面元素和变量进行了绑定操作.
         vm.msg=count;
         //下面的jq代码虽然也能实现相同功能,但是每次需要进行dom操作(遍历查找元素)
         //执行效率较低
         //$("h1").text(count);
     },1000);
 </script>
 </body>
 </html>

vue练习：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <div>
     <h1>商品数量:{{count}}</h1>
     <input type="button" value="添加">
 </div>
 ?
 <!--引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 ?
 <!--引入Vue框架文件-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 ?
 <script>
     //创建vue对象
     let vm = new Vue({
         el:"div",
         data:{count:0}
     })
 ?
     //给按钮添加点击事件
     $("input").click(function () {
         vm.count++;
     })
 </script>
 </body>
 </html>

晚课任务:

将原生JavaScript开发的猜数字练习改成jQuery版本

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>将原生JavaScript开发的猜数字练习改成jQuery版本</title>
 </head>
 <body>
 <input type="text" placeholder="请输入1-100之间的整数">
 <input type="button" value="猜一猜">
 <div></div>
 <!--引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 <script>
     //得到一个1-100之间的随机整数
     let x = parseInt(Math.random()*100)+1;
     //记录猜的次数
     let count = 0;
     //添加鼠标点击事件
     $("input:last").click(function () {
         count++;
         //获取input中的值
         let i = $("input:first").val();
         //获取div对象
         let d = $("div");
         if(i>x){
             d.text("猜大了");
         }else if(i<x){
             d.text("猜小了")
         }else{
             d.text("恭喜您,第"+count+"次猜对了");
         }
     })
 </script>
 </body>
 </html>

或

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>将原生JavaScript开发的猜数字练习改成jQuery版本</title>
 </head>
 <body>
 <input type="text" placeholder="请输入1-100之间的整数" id="i1">
 <input type="button" value="猜一猜" id="i2">
 <div id="d1"></div>
 <!--引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 <script>
     //得到一个1-100之间的随机整数
     let x = parseInt(Math.random()*100)+1;
     //记录猜的次数
     let count = 0;
     //添加鼠标点击事件
     $("#i2").click(function () {
         count++;
         //获取input中的值
         let i = $("#i1").val();
         //获取div对象
         let d = $("#d1");
         if(i>x){
             d.text("猜大了");
         }else if(i<x){
             d.text("猜小了")
         }else{
             d.text("恭喜您,第"+count+"次猜对了");
         }
     })
 </script>
 </body>
 </html>

将原生JavaScript开发的猜数字练习改成Vue版本

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>将原生JavaScript开发的猜数字练习改成Vue版本</title>
 </head>
 <body>
 <input type="text" placeholder="请输入1-100之间的整数">
 <input type="button" value="猜一猜">
 <div>{{msg}}</div>
 <!--引入Vue框架文件-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <!--引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 <script>
     //得到一个1-100之间的随机整数
     let x = parseInt(Math.random()*100)+1;
     //记录猜的次数
     let count = 0;
     //创建Vue对象,此对象就是一个VM视图模型对象,负责将页面元素和变量进行绑定
     let vm = new Vue({
         //el=element元素,每个vue对象负责管理页面中某一部分元素
         el:"div",
         data:{msg:"输出结果"}
     });
     $("input:last").click(function () {
         count++;
         let i = $("input:first").val();
         if(i>x){
             vm.msg="猜大了";
         }else if(i<x){
             vm.msg="猜小了";
         }else if(i==x){
             vm.msg="恭喜您,第"+count+"次猜对了";
         }
     });
 </script>
 </body>
 </html>

或

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>将原生JavaScript开发的猜数字练习改成Vue版本</title>
 </head>
 <body>
 <input type="text" placeholder="请输入1-100之间的整数" id="i1">
 <input type="button" value="猜一猜" id="i2">
 <div id="d1">{{msg}}</div>
 <!--引入Vue框架文件-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <!--引入jQuery框架文件-->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 <script>
     //得到一个1-100之间的随机整数
     let x = parseInt(Math.random()*100)+1;
     //记录猜的次数
     let count = 0;
     //创建Vue对象,此对象就是一个VM视图模型对象,负责将页面元素和变量进行绑定
     let vm = new Vue({
         //el=element元素,每个vue对象负责管理页面中某一部分元素
         el:"#d1",
         data:{msg:"输出结果"}
     });
     $("#i2").click(function () {
         count++;
         let i = $("#i1").val();
         if(i>x){
             vm.msg="猜大了";
         }else if(i<x){
             vm.msg="猜小了";
         }else if(i==x){
             vm.msg="恭喜您,第"+count+"次猜对了";
         }
     });
 </script>
 </body>
 </html>

原文：https://www.cnblogs.com/XiaoCui-blog/p/15092264.html