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教程