天天看點
傳回

（javascript學習）複習記錄21.iterator2.函數3.變量的作用域4.方法的定義和調用 apply5.Date日期對象6.json7.面向對象程式設計8.class繼承9.操作BOM對象10.操作DOM對象（擷取）11.更新節點12.删除節點13.建立和插入DOM節點14.操作表單（驗證）15.驗證表單16.jQuery17.jquery事件

1.iterator

用for of周遊（相當于疊代器周遊）

var arr = [3,2,4];
for(var x of arr)
{
console.log(x);
}
//列印鍵值對
var map = new Map([[1,2,][,3,4]])
for(let x of map)
{
console.log(x);
}

for in周遊（下标通路）

var age = [1,2,3,4,5,6];
//for var index in object)
for(var num in age){
if(age.hasOwnProperty(num)){
console.log(age[num]);
}
}

2.函數

方法：對象（屬性，方法）

定義函數

1.eg：

function abs(x) {
        if (x >= 0) {
            return x;
        } else {
            reuturn - x;
        }
    }

如果沒有執行return，函數執行完也會傳回結果，結果為undefined

2.eg：

var abs = function (x)
{
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

這裡的function（x){…}為一個匿名函數

方式1和方式2等價

調用函數

參數問題，可以向函數傳0或很多參數，不會報錯

是以需要加異常處理， eg：

function abs(x) {
        if(typeof x !=='asd')
        {
            throw "not number";
        }
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }

arguments

關鍵字，代表傳入進來的所有參數，其為數組類型，可以通過數組周遊傳入的參數。

問題：arguments會包含所有參數，有時候需要排除已用參數而隻使用多餘參數。

rest

ES6新特性，擷取除已定義參數外的多餘參數

eg：

//用arguments
    function f(a,b) {
        console.log(a);
        console.log(b);
        if(arguments.length>2)
        {
            for(var i=2;i<arguments.length;i++)
            {
                console.log(arguments[i]);
            }
        }
        
    }
    //用rest
        function f(a,b,...rest) {
        console.log(a);
        console.log(b);
        console(rest);

    }

3.變量的作用域

在JavaScript中var定義是有作用域的

函數體内定義變量隻能在函數體内使用

内部函數可以通路外部函數成員變量，反之不行

假設在JavaScript中函數查找變量從自身函數開始，由内向外查找，假設外部存在同名變量，内部變量會屏蔽外部變量

全局變量window

window.x

預設全局變量均綁定在window對象下

var x = 1;
alert(x);
alert(window.x);
window.alert(x);
window,alert(window.x);
//alart函數也是window對象的一個方法

說明可以把alert重寫

eg：

window.alert = function(){
}

alert即失效

用let去定義局部變量域的變量

ES6中引入常量 const 隻讀變量

4.方法的定義和調用 apply

方法 

var MCL = {
        name :"MCL",
        birth:2002,
        age:function (){
            var now=new  Date().getFullYear();
            return now-this.birth;
        }

如果使用函數，則其實是在使用window的方法

可以用函數.apply(對象名，參數）來确定this的指向

var MCL = {
        name :"MCL",
        birth:2002,
        }
    function getAge(){
        var now=new  Date().getFullYear();
        return now-this.birth;
	
    }
    getAge().apply(MCL,[])

5.Date日期對象

用 typeof xxx 傳回 其資料類型

typeof MCL
'object'
typeof NaN
'number'
typeof true
'boolean'
           
let now = new Date();
    now.getFullYear();//年
    now.getMonth();//月
    now.getDay()//日
    now.getHours()//時
    now.getMinutes();//分鐘
    now.getSeconds();//秒

6.json

格式

對象都用{ }

數組用 [ ]

所有的鍵值對都是key;value

//對象解析為json
var json = JSON.stringify(MCL)
//json字元串轉化為對象
var obj = JSON.parse('{"name":"MCL","age":19}');

json和js對象差別

var obj = {a:"123",b:12};
var json = '{"a":12,:b"::"ads"}';

Ajax

原生的js寫法 xhr異步請求

jQuey封裝的方法

axios 請求

7.面向對象程式設計

8.class繼承

ES6引入

class

class Student{
        constructor(name) {//構造器
            this.name = name;
        }
        hello(){
            alert(:this.hello());
        }
    }
    var xiao = new Student("xiaoming");

繼承

class xiaoStudent extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
  }

object()的原型對象為objec.prototype

objec.prototype的構造方法為object()

9.操作BOM對象

BOM：浏覽器對象模型

window對象

代表浏覽器視窗

window.innerHeiht
window.innerWidth

Navigator 封裝浏覽器資訊

navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
navigator.platform
'Win32'

大多數時候不會使用navigator，容易被人為修改

不建議使用

screen

螢幕尺寸

screen
Screen {availWidth: 1536, availHeight: 824, width: 1536, height: 864, colorDepth: 24, …}
screen.width
1536

location

代表目前頁面的URL資訊

location
Location {ancestorOrigins: DOMStringList, href: 'http://localhost:63342/javascript/lesson1/fitst_1.html?_ijt=f2iot7vgrq6su51c1tpi806kl', origin: 'http://localhost:63342', protocol: 'http:', host: 'localhost:63342', …}
hash: ""
host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/javascript/lesson1/fitst_1.html?_ijt=f2iot7vgrq6su51c1tpi806kl"
origin: "http://localhost:63342"
pathname: "/javascript/lesson1/fitst_1.html"
port: "63342"
protocol: "http:"
reload: ƒ reload()//重新整理網頁

document

代表目前的頁面 HTML DOM文檔數

document.title
document.cookie
document.getElementById(" ")

擷取的具體文檔數結點

history

代表浏覽器的曆史記錄

history.back()
history.forward()

10.操作DOM對象（擷取）

文檔對象模型

浏覽器網頁就是一個DOM樹形結構

更新：更新DOM節點

周遊DOM節點；得到DOM節點

删除DOM節點

添加DOM節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
<h1>biaoti1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
  var h1 = document.getElementsByTagName("h1");//标簽擷取
  var p1 = document.getElementById("p1");//id擷取
  var p2 = document.getElementsByClassName("p2");//class擷取
  var div = document.getElementById("father");//id擷取
  var children = div.children;//擷取父節點下的子節點
  
</script>

</body>
</html>

11.更新節點

操作文本

id1.innerText="456";//修改文本的值
id1.innerHTML = '<p>123<p>';//解析文本标簽

操作css

id1.innerText='12233';
  id1.style.color = 'yellow';
  id1.style.fontSize = '20px';
  id1.style.padding = '2em';

12.删除節點

步驟：

1.擷取父節點

2.通過父節點删除自己

eg:

var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(p1);
//删除是一個動态的過程
father.removeChild(father.children[0]));

13.建立和插入DOM節點 

var newP = document.createElement('p');//建立一個p标簽
newP.id = 'newP';
newP.innerText = 'ada'; 
father.appendChild(newP);

var myScript = document.createElement("script");
myScript.setAttribute('type','text/javascript');
myScript.innerHTML = " ";//在這可以直接寫代碼了

14.操作表單（驗證）

文本框 text

下拉框 < select >

單選框 radio

多選框 checkbox

隐藏域 hidden

密碼框 password

擷取節點後，用.value獲得

…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="post">
    <span>使用者名</span><input type="text" id="name">

</form>
<script>
    var name =document.getElementById('name');//得到使用者名
	var now = name.value;

</script>
</body>
</html>

15.驗證表單 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="post">
    <p><span>使用者名</span><input type="text" id="uesrname"></p>
    <p><span>使用者名</span><input type="password" id="password"></p>
    <button type="button" onclick="check()">送出</button>

</form>
<script>
    //綁定事件
    function check(){
     var uname =    document.getElementById("uesrname");
     var upass =    document.getElementById("password");
     console.log(uname.value);
     //upass.value = md5(upass.value);

    }


</script>
</body>
</html>

16.jQuery

原生js，選擇器少，麻煩不好記

存在大量javascript函數

引入後使用即可

公式 ：$(selector).action(

)

$('p').click();
$('#id1').click();
$('.class1').click();
//選擇器

17.jquery事件

滑鼠事件，鍵盤事件，其他事件

滑鼠事件

（javascript學習）複習記錄21.iterator2.函數3.變量的作用域4.方法的定義和調用 apply5.Date日期對象6.json7.面向對象程式設計8.class繼承9.操作BOM對象10.操作DOM對象（擷取）11.更新節點12.删除節點13.建立和插入DOM節點14.操作表單（驗證）15.驗證表單16.jQuery17.jquery事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    cdn引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        #divmove{
            width: 1000px;
            height: 1000px;
            border: 1px solid red;
        }
    </style>
<!--
公式  ： $(selector).action()
-->
</head>
<body>
mouse <span id="move" ></span>
<div id="divmove">
    移動滑鼠
</div>
<a href="" id="test">點我</a>
<script>
 //當網頁加載完後響應事件
 // $(function (){
 //
 // })
 $(function (){
     $("#divmove").onmousemove(
         function (e){
             $("#move").text('x'+e.pageX+'y'+e.pageY)
         }
     )
 });



</script>
</body>

</html>
javascript node.js html5
上一篇: AD7124-8使用說明與程式
下一篇: 回溯法迷宮求解

繼續閱讀