选项卡 + 定时器 + js面向对象 + BOM
类库和框架的区别?
类库（Jquery）：小而精 js的一部分功能
框架 (Django)：大而全
选项卡
一、路由的跳转
(#/home #/cource) 网址后+home 网址后+ cource
http://localhost:63342/%E7%BD%91%E9%A1%B5/99999/1.html?_ijt=s0vfrflv9b21gn04i7o96ldk9f#/home
http://localhost:63342/%E7%BD%91%E9%A1%B5/99999/1.html?_ijt=s0vfrflv9b21gn04i7o96ldk9f#/course
通过锚点的设置，使得跳转到路由的地址
window.onhashchange location.hash
<body> <a href="#/home">首页</a> <a href="#/course">成绩</a> <div id="content"></div> <script> window.onhashchange = function(){ // location.hash 的值为 #/home 也就是a标签的href地址 switch(location.hash){ case "#/home": document.getElementById("content").innerHTML = "<h2>你好</h2>"; break; case "#/course": document.getElementById("content").innerHTML = "<h2>2222</h2>"; break; default: break; } } </script> </body>
二、选项卡的设置
需求：
通过点击不同的选项卡，视图的内容发生变化。（单页面的应用：通过锚点的变化，导航栏不变（公共的）、但是视图在变化）
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } #tab{ width: 480px; margin: 20px auto; border: 1px solid red; } ul{ width: 100%; overflow: hidden; } ul li{ float: left; width: 160px; height: 60px; line-height: 60px; text-align: center; background-color: #cccccc; } ul li a{ text-decoration: none; color:black; } li.active{ background-color: red; } p{ display: none; height: 200px; text-align: center; line-height: 200px; background-color: red; } p.active{ display: block; } </style> </head> <body> <div id="tab"> <ul> <li class="active"> <a href="#">首页</a> </li> <li> <a href="#">新闻</a> </li> <li> <a href="#">图片</a> </li> </ul> <p class="active">首页内容</p> <p>新闻内容</p> <p>图片内容</p> </div> </body>
利用JS来写的较麻烦，以后用 jQuery写会非常简单
<script type="text/javascript"> window.onload = function(){ // //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类); //思路：1.点亮上面的盒子。 2.利用索引值显示下面的盒子。 var tabli = document.getElementsByTagName('li'); var tabContent = document.getElementsByTagName('p') for(var i = 0; i < tabli.length; i++){ // 绑定索引值（新增一个自定义属性：index属性） tabli[i].index = i; //由于var声明的变量是全局的，这里需要是记录i的索引值 tabli[i].onclick = function(){ // 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想) for(var j = 0; j < tabli.length; j++){ tabli[j].className = ''; tabContent[j].className = ''; } this.className = 'active' tabContent[this.index].className = 'active';//【重要代码】 } } } </script>
注意：
var 声明的变量是全局的变量。
var = 3; //会在全局先声明一个 var a; 在该位置赋值 a = 3;
let 声明的变量 是全局就是全局 是局部就是局部 （let 是es6中的用法）
定时器
一、1次性定时器
可以做异步
1、开1次性定时器：
var timer = setTimeout(fn,3000); // 3秒之后执行 （毫秒计 3000就是3秒）
未来数据交互的时候，如果数据阻塞了，可以考虑 加一次性定时器，但是最好不要这样做
2、清定时器：
clearTimeout(timer); //清理要在3秒之内，3秒之后就没有用了，因为已经执行了
二、循环周期定时器
可以倒计时，动画
js 和python一样有垃圾回收机制
但是 定时器对象 垃圾回收 收不回
循环定时器，会叠加，执行1次，开一个定时器，执行2次，开两个定时器，会加速，因此在开定时器前，要先清理定时器，再开定时器
1、开循环定时器：
var timer = setInterval(fn,3000);
2、清循环定时器
clearInterval(timer)；
定时器的示例（一次性定时和循环定时）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <button id="start">开启定时器</button> <button id="clear">清除定时器</button> <div id="box"></div> <script> // 设置一次性定时 var timer = null; document.getElementById('start').onclick = function() { // 未来 数据交互的时候 如果数据阻塞了，可以考虑 加一个一次性定时器来处理 timer = setTimeout(function(){ console.log(1111); },3000); console.log(2222); } //清除一次性定时 document.getElementById('clear').onclick = function() { clearTimeout(timer); } // 利用循环定时器制作 盒子移动的动画 var count = 0; var timer = null; document.getElementById('start').onclick = function() { var oDiv = document.getElementById('box'); //循环定时 每次点击都会迭代会加速，为保持加速，每次执行定时前，先清除定时 clearInterval(timer); timer = setInterval(function() { count+=10; oDiv.style.marginLeft = count + 'px'; }, 50) } </script> </body> </html>
js面向对象
参考链接：https://www.cnblogs.com/majj/p/9104787.html
一、使用Object或对象字面量方式创建对象
a、object 创建对象
var student = new Object(); student.name = "easy"; student.age = "20";
这样，一个student对象就创建完毕，拥有2个属性name以及age，分别赋值为"easy"和20。
b、字面量创建对象 （记住）
var sutdent = { name : "easy", age : 20 };
这样做的会比较方面，但是，需要创建多个同样的类时，需要重复多次......
二、工厂模式创建对象
JS中没有类的概念，那么我们不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用，同时可以给出特定接口来初始化对象
function createStudent(name, age) { var obj = new Object(); obj.name = name; obj.age = age; return obj; } var student1 = createStudent("easy1", 20); var student2 = createStudent("easy2", 20); ... var studentn = createStudent("easyn", 20);
function createFruit(name, color) { var obj = new Object(); obj.name = name; obj.color = color; return obj; } var v1 = createStudent("easy1", 20); var v2 = createFruit("apple", "green");
对于以上代码创建的对象v1、v2，我们用instanceof操作符去检测，他们统统都是Object类型。我们的当然不满足于此，我们希望v1是Student类型的，而v2是Fruit类型的。为了实现这个目标，我们可以用自定义构造函数的方法来创建对象
三、构造函数模式创建对象
在上面创建Object这样的原生对象的时候，我们就使用过其构造函数：
var obj = new Object();
在创建原生数组Array类型对象时也使用过其构造函数：
var arr = new Array(10); //构造一个初始长度为10的数组对象
1、构造函数和普通函数的区别？
（1）实际上并不存在创建构造函数的特殊语法，其与普通函数唯一的区别在于调用方法。对于任意函数，使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。
（2）按照惯例，我们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。例如上面的new Array()，new Object()。
（3）使用new操作符调用构造函数时，会经历(1)创建一个新对象；(2)将构造函数作用域赋给新对象（使this指向该新对象）；(3)执行构造函数代码；(4)返回新对象；4个阶段。
2、利用构造函数将工厂模式的函数重写，并添加一个方法属性：
function Student(name, age) { this.name = name; this.age = age; this.alertName = function(){ alert(this.name) }; } function Fruit(name, color) { this.name = name; this.color = color; this.alertName = function(){ alert(this.name) }; }
这样我们再分别创建Student和Fruit的对象：
var v1 = new Student("easy", 20); var v2 = new Fruit("apple", "green");
这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了：
alert(v1 instanceof Student); //true alert(v2 instanceof Student); //false alert(v1 instanceof Fruit); //false alert(v2 instanceof Fruit); //true alert(v1 instanceof Object); //true 任何对象均继承自Object alert(v2 instanceof Object); //true 任何对象均继承自Object
这样我们就解决了工厂模式无法区分对象类型的尴尬。那么使用构造方法来创建对象是否已经完美了呢？使用构造器函数通常在js中我们来创建对象。
我们会发现Student和Fruit对象中共有同样的方法，当我们进行调用的时候这无疑是内存的消耗。
我们完全可以在执行该函数的时候再这样做，办法是将对象方法移到构造函数外部：
function Student(name, age) { this.name = name; this.age = age; this.alertName = alertName; } function alertName() { alert(this.name); } var stu1 = new Student("easy1", 20); var stu2 = new Student("easy2", 20);
在调用stu1.alertName()时，this对象才被绑定到stu1上。
我们通过将alertName()函数定义为全局函数，这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数，解决了内存浪费的问题
但是，通过全局函数的方式解决对象内部共享的问题，终究不像一个好的解决方法。如果这样定义的全局函数多了，我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。
四、原型的模式创建对象（记住）
原型链甚至原型继承，是整个JS中最难的一部分也是最不好理解的一部分，
function Student() { this.name = 'easy'; this.age = 20; } // Student.prototype为Student的父类，将方法alertName封装到父类中 Student.prototype.alertName = function(){ alert(this.name); }; var stu1 = new Student(); var stu2 = new Student(); stu1.alertName(); //easy stu2.alertName(); //easy alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数
BOM
一、BOM介绍
javascript基础部分分为三个部分：
-
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
-
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
-
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。
1、什么是BOM?
BOM：Bbrowser Object Model，浏览器对象模型
BOM的结构图：
从上图也可以看出：
-
-
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
-
DOM是BOM的一部分。
-
window对象：
-
-
window对象是JavaScript中的顶级对象。
-
全局变量、自定义函数也是window对象的属性和方法。
-
window对象下的属性和方法调用时，可以省略window。
-
下面讲一下 BOM 的常见内置方法和内置对象。
2、弹出系统对话框
比如说，alert(1)是window.alert(1)的简写，因为它是window的子方法。
系统对话框有三种：
alert(); //不同浏览器中的外观是不一样的 confirm(); //兼容不好 prompt(); //不推荐使用
3、打开窗口、关闭窗口
打开窗口
window.open(url,target)
url：要打开的地址
target：新窗口的位置，可以是：_blank、_self、_parent父框架
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--行间的js中的open() window不能省略--> <button onclick="window.open('https://www.luffycity.com/')">路飞学城</button> <button>打开百度</button> <button onclick="window.close()">关闭</button> <button>关闭</button> </body> <script type="text/javascript"> var oBtn = document.getElementsByTagName('button')[1]; var closeBtn = document.getElementsByTagName('button')[3]; oBtn.onclick = function(){ //open('https://www.baidu.com') //打开空白页面 open('about:blank',"_self") } closeBtn.onclick = function(){ if(confirm("是否关闭？")){ close(); } } </script> </html>
二、location对象
window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
location对象的属性：
-
href：跳转
-
hash 返回url中#后面的内容，包含#
-
host 主机名，包括端口
-
hostname 主机名
-
pathname url中的路径部分
-
protocol 协议 一般是http、https
-
search 查询字符串
location.href属性举例：
举例1：点击盒子时，进行跳转
<body> <div>smyhvae</div> <script> var div = document.getElementsByTagName("div")[0]; div.onclick = function () { location.href = "http://www.baidu.com"; //点击div时，跳转到指定链接 // window.open("http://www.baidu.com","_blank"); //方式二 } </script> </body>
举例2：5秒后自动跳转到百度
有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。举例：
<script> setTimeout(function () { location.href = "http://www.baidu.com"; }, 5000); </script>
location方法：
location.reload():重新加载
setTimeout(function(){
//3秒之后让网页整个刷新
window.location.reload();
},3000)
三、navigator对象
window.navigator 的一些属性可以获取客户端的一些信息。
-
-
userAgent：系统，浏览器)
-
platform：浏览器支持的系统，win/mac/linux
-
例子：
console.log(navigator.userAgent);
console.log(navigator.platform);
四、history对象
1、后退：
-
history.back()
-
history.go(-1)：0是刷新
2、前进：
-
history.forward()
-
history.go(1)
用的不多。因为浏览器中已经自带了这些功能的按钮
浙公网安备 33010602011771号