JavaScript初识(三)
十三丶JS中的面向对象
创建对象的几种常用方式:
1.使用Object或对象字面量创建对象
2.工厂模式创建对象
3.构造函数模式创建对象
4.原型模式创建对象
下面我们详细看一下如何创建对象
1.使用Object或对象字面量创建对象
JS中最基本创建对象的方式:
<script type="text/javascript">
var student = new Object();
student.name = "alex";
student.age = "20"
</script>
字面量方式创建对象:
var student = { name:"alex", age:18 };
2.工厂模式创建对象
以上的方式看似简便,但是我们要是创建很多个同类的呢?我们是不是得把以上代码重复n次呢,是否可以像工厂车间那样,不断生产呢?那就让我们看看工厂车间那样,如何"产出"对象
function createStudent(name,age){ var obj = new Object(); obj.name = name; obj.age = age; return obj; } var student1 = createStudent('easy',20); var student2 = createStudent('easy2',20) ... var studentn = createStudent('easyn',20)
3.构造函数模式创建对象
在上面创建Object这样的原生对象的时候,我们就使用过其构造函数:
var obj = new Object();
在创建原生数组Array类型对象时也使用过其构造函数:
var arr = new Array(10); //构造一个初始长度为10的数组对象
在进行自定义构造函数创建对象之前,我们先了解一下构造函数和普通函数有什么区别.
1丶实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法.对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数.
2丶按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者,例如上面的new Array(),new Object().
3.使用new操作符调用构造函数时,会经历(1)创建一个新对象(2)将构造函数作用域赋给新对象(指this指向该新对象)(3)执行构造函数代码(4)返回新对象;4个阶段
我们使用构造函数将工厂模式的函数重写,并添加一个方法属性
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) }; }
4.原型的模式创建对象
原型链甚至原型继承,是整个JS中最难的一部分,也是最不好理解的一部分.
//原型模式创建对象 function Student(){ this.name = "easy"; this.age = 20; } 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 二者共享同一函数
十四丶定时器
(1)一次性定时器
可以做异步
(2)循环周期定时器
可以做动画
JS跟python一样都有垃圾回收机制,但是定时器对象垃圾回收是回收不了的
1.setTimeOut()一次性定时器,只在指定时间后执行一次
<script type="text/javascript">
<!--一次性定时器-->
function hello(){
alert("hello");
}
<!--使用方法名字执行方法-->
var t1 = window.setTimeout('hello',1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.cleatTimeout(t1);//去掉定时器
</script>
2.setInterval()
//循环周期定时器 setInterval('refreshQuery()',8000); function refreshQuery(){ console.log("每8秒调一次") }
练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id = "start">开启定时器</button>
<button id = "clear">清除定时器</button>
<div id="box"></div>
<script type="text/javascript">
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";
oDiv.style.marginTop = count/2 +"px"
},50)
}
</script>
</body>
</html>
十五丶BOM的介绍
BOM; Browser Object Model,浏览器对象模型.
window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以成为window对象的子对象,DOM是BOM的一部分.
1丶弹出系统对话框
比如说,alert(1)是window.alert(1)的简写,以为它是window的子方法.
系统对话框有三种:
alert(); //不同浏览器中的外观是不一样的 confirm(); //兼容不好 prompt(); //不推荐使用
2.打开窗口丶关闭窗口
(1)打开窗口:
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属性举例:
点击盒子时，进行跳转。
<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>
5秒后自动跳转到百度。
<script> setTimeout(function () { location.href = "http://www.baidu.com"; }, 5000); </script>
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)
-
-
用的不多。因为浏览器中已经自带了这些功能的按钮：
十六丶client丶offset丶scroll系列
先来了解一下自执行函数:
(function(window) { var a = 5; // import window.$ = a; })(window);
(function(window) { var a = 6; window.$1 = a; })(window);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="1.js"></script>
<script src="2.js"></script>
<script>
console.log(window.$);
console.log(window.$1);
</script>
</body>
</html>
1.client系列
clientTop 内容区域到边框顶部的距离,说白了,就是边框高度
clietLeft 内容区域到边框左部的距离,说白了就是边框的宽度
clientWidth 内容区域+左右padding 不包含border 可视宽度
clientHeight 内容区域+ 上下padding 可视高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
/*position: absolute;*/
border: 10px solid red;
/*margin: 10px 0px 0px 0px;*/
padding: 80px;
}
</style>
</head>
<body>
<div class="box">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
<script type="text/javascript">
/*
* clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
* clientLeft 内容区域到边框左部的距离，说白了就是边框的宽度
* clientWidth 内容区域+左右padding 不包含border 可视宽度
* clientHeight 内容区域+ 上下padding 可视高度
* */
var oBox = document.getElementsByClassName('box')[0];
console.log(oBox.clientTop);
console.log(oBox.clientLeft);
console.log(oBox.clientWidth);
console.log(oBox.clientHeight);
</script>
</html>
2.屏幕的可视区域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//屏幕 的可视区域
window.onload = function(){
//document.documentElement 获取的是html标签
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
//窗口大小发生变化时,会调用此方法
window.onresize = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
</script>
</body>
</html>
3.offset系列
offsetWidth占位宽 内容+padding+border
offsetHeight 占位高
offsetTop 如果盒子没有设置定位到body的顶部的距离,如果盒子设置定位,那么是以父辈为基准的Top值
offsetLeft:如果盒子没有设置定位到body的左部的距离,如果盒子设置定位,那么是以父辈为基准的left值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body style="height: 2000px">
<div>
<div class="wrap" style=" width: 300px;height: 300px;background-color: green;position: relative; top: 20px;">
<div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:60px;left: 30px;">
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box')
/*
offsetWidth占位宽 内容+padding+border
offsetHeight占位高
* offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值
* offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值
* */
console.log(box.offsetTop);
console.log(box.offsetLeft);
console.log(box.offsetWidth)
console.log(box.offsetHeight)
}
</script>
</html>
4.scroll系列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
</style>
</head>
<body style="width: 2000px;height: 2000px;">
<div style="height: 200px;background-color: red;"></div>
<div style="height: 200px;background-color: green;"></div>
<div style="height: 200px;background-color: yellow;"></div>
<div style="height: 200px;background-color: blue;"></div>
<div style="height: 200px;background-color: gray;"></div>
<div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
<p>路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
</p>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
//实施监听滚动事件
window.onscroll = function(){
// console.log(1111)
// console.log('上'+document.documentElement.scrollTop)
// console.log('左'+document.documentElement.scrollLeft)
// console.log('宽'+document.documentElement.scrollWidth)
// console.log('高'+document.documentElement.scrollHeight)
}
var s = document.getElementById('scroll');
s.onscroll = function(){
// scrollHeight : 内容的高度+padding 不包含边框
console.log('上'+s.scrollTop)
console.log('左'+s.scrollLeft)
console.log('宽'+s.scrollWidth)
console.log('高'+s.scrollHeight)
}
}
</script>
</html>
固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
.header{
width: 100%;
height: 80px;
background-color: red;
}
.content{
width: 100%;
height: 1000px;
background-color: purple;
/*position: relative;*/
}
.fixTop{
width: 100%;
height: 100px;
background-color: green;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.input{
width: 400px;
height: 60px;
background-color: yellow;
position: absolute;
left: 50%;
margin-left: -200px;
top: 150px;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="content">
<div class="input"></div>
</div>
<div class="fixTop" style="display: none;"></div>
<script>
window.onload = function() {
var fromTop = document.getElementsByClassName('input')[0].offsetTop;
var fixBox = document.getElementsByClassName('fixTop')[0];
console.log(fromTop);
var count = 0;
var timer = null;
window.onscroll = function() {
var htmlTop = document.documentElement.scrollTop;
console.log(htmlTop);
if (htmlTop >= fromTop) {
clearInterval(timer);
timer = setInterval(function () {
count+=10;
fixBox.style.display = 'block';
// fixBox.style.opacity = count;
fixBox.style.height = count+'px';
if (count == 100){
console.log("11111111111111111")
clearInterval(timer);
count = 0
}
},200)
}else{
fixBox.style.display = 'none';
}
}
}
</script>
</body>
</html>
