JavaScript初识(三)

时间  2021-01-30
标签 javascript css html java python linux 数组 浏览器 框架 异步 栏目 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>
View Code

十五丶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对象

　　一、后退：

      • 　history.back()

      • 　history.go(-1)：0是刷新

　　二、前进：

      • 　history.forward()

      • 　history.go(1)

　　　　用的很少。由于浏览器中已经自带了这些功能的按钮：

 十六丶client丶offset丶scroll系列

　　先来了解一下自执行函数:

(function(window) { var a = 5; // import
 window.$ = a; })(window);
1.js

 

(function(window) { var a = 6; window.$1 = a; })(window);
2.js 
<!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>
View Code

　　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>
View Code

 　　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>
View Code

 固定导航栏javascript

<!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>
View Code
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程