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

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

显示效果相关

  1. 如何创建元素对象

    let h = $("<h1>xxx</h1>");

  2. 添加元素到某个元素里面

    元素对象.append(元素对象);

  3. 获取和修改元素的文本内容

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

    元素对象.text("xxx"); //修改

  4. 获取和修改form表单中控件的值

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

    控件对象.val("xxx"); //修改

  5. 显示隐藏相关

    元素对象.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>

 

晚课任务:

  1. 将原生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>

  2. 将原生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>

     

posted @ 2021-08-02 22:55  Coder_Cui  阅读(146)  评论(0)  编辑  收藏  举报