最有系統的JavaScript關鍵點總結（不含語言基礎語法）-js教程-PHP中文網

首頁

web前端

js教程

最有系統的JavaScript關鍵點總結（不含語言基礎語法）

php是最好的语言

Jul 27, 2018 pm 03:06 PM

javascript

一，變數
1.可以用new Array（"1","2"）；來定義陣列。
2.可以透過為變數賦值為null來清除變量，如：

//首先定义一个变量
var i1=10;
i1=null;
//此时的i1就被清除了

登入後複製

在函數裡面這樣定義變數的時候要注意

funtion demo(){
     x=10;
}
//而此前的代码中都没有出现x，那么这里就是定义了x，在调用demo函数以后，x就是一个全局变量了。

登入後複製

二.運算子==和= ==

var i="5";
var j=5;
if(i==j) alert(""hello);
if(i===j) alert("world");

登入後複製

//上面的程式碼在執行後只會彈出hello，因為i和j的值是相等的，但是i和j的資料型別是不等的。所以==只要求值相等，但是===不但要求值相等還要要求資料型別也相等。

三，異常捕獲

try{
     if() throw "";
}catch(err){
     alert(throw);
}

登入後複製

四，事件
onload 網頁載入事件
onclick 點擊事件
onfocus 遊標聚集事件
onselect 文字方塊選取事件
onmouseover 滑鼠經過事件
onmouserout 滑鼠移出事件

五，dom操作
1，介紹：當網頁載入時，瀏覽器就會建立頁面的文件物件模型。

2、DOM操作HTML
1）js能夠改變頁面中的所有HTML元素
①改變輸出流：document.write();會覆寫文件所有的內容！慎用！
②獲得元素：document.getElementById();
document.getElementByClass();
document.getElementByTagName();等

#其中像tagname和那麼這種有可能會獲得多個元素的方法，得到的元素變成一個物件數組，依序排列

document.getElementById("btn").addEventListener("click",function(){
  var x=document.getElementsByName("people");
  var y=x[2].value;
  alert(y);
  });

登入後複製

③改變Html內容：innerHTML;
④改變屬性內容：取得物件後.屬性=「屬性值」則可，也可以用setAttribute()方法:第一個參數是屬性名，第二個參數是屬性值
document.getElementById("pid").setAttribute("class","pid2");

取得屬性值的方法使用getAttribute();

alert(document.getElementById("name").getAttribute("name"));

登入後複製

dom控制html的一些方法：

          1，设置属性：如var attr=document.getElementById("demo1");
                              attr.setAttribute("title","dhello");//设置属性
                              var st=attr.getAttribute("title");//得到属性

                              alert(st);


          2.得到子节点：
                         var child=document.getElementsByTagName("ul")[1].childNodes;
                         alert(child.length);


          3得到父节点： var parent=document.getElementsByTagName("li")[0].parentNode;
                          alert(parent.nodeName);

          4创建元素节点：   var body=document.body;
                         var inp=document.createElement("input");//创建一个input节点
                         inp.type="button";//节点类型
                         inp.value="ann";
                         body.appendChild(inp);//把新的子节点添加到指定节点。（添加到末尾 ）

          5创建文本节点


          6删除子节点：<p id="p1">
                         <p id="p1">这是一个段落。</p>
                         <p id="p2">这是另一个段落。</p>
                         </p>

                         var parent=document.getElementById("p1");//找到 id="p1" 的元素：

                         var child=document.getElementById("p1");//找到 id="p1" 的 <p> 元素：

                         parent.removeChild(child);//从父元素中删除子元素：


                         第二种方法：var child=document.getElementById("p1");
                                       child.parentNode.removeChild(child);


          7动态添加节点(课选择添加的位置)
                                       var p=document.getElementById("p");
                                       var node=document.getElementById("pid");
                                       var newnode=document.creatElement("p");
                                       p.inserBefore(newnode,node);
                                                      要添加的 在这之前的

登入後複製

2）js能夠改變頁面中所有的HTML屬性
< ;!DOCTYPE HTML>

 <title>hello world</title>

登入後複製

 <a id="aid"/>
 <p id=pid>hello world!!</p>

登入後複製

3）js能夠改變頁面中的所有CSS樣式

document.getElementById("pid").style.backgrouneColor="red";

4）js能夠對頁面中所有事件做出反應

5）DOM物件控制HTML

六、事件句柄EventListener
事件句柄就是觸發事件發生的一個動作。例如onclick就是當被點擊的時候的句柄。
在js中可以加入事件句柄，這樣可以減少很多程式碼量，
例如下面是傳統的事件觸發方式

在js程式碼中加入的事件句柄就如下:處理函數不能加（）括號符！

var x=document.getElementById("btn");

x.addEventListener("click",demo);//這裡有兩個參數，一個是事件的句柄，後面的是處理事件的函數

刪除句柄用removeEventListener();

七，事件
1.事件流：頁面中接受事件的順序，有兩個順序，分別是事件冒泡（從裡到外），事件捕獲（從外到裡）。

2.事件處理：

1）HTML事件處理：直接加入HTML結構中

<button id="btn"></button>
<script>
var btn1=document.getElementById("btn");
btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="red";
};     
</script>

登入後複製

2）dom 0級事件處理：把一個函數賦值給一個事件處理程序屬性

btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="red";//被覆盖
};
btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="blue";
};

登入後複製

//0級事件處理清除事件處理很簡單只要把onclick賦值為空即可。設定的時候是物件的時間設定為null而不是物件設定為null！

btn1.onclick=null;

//當有多個同個事件的處理程序的時候，前面的會被後面的事件處理程序清理掉。

 addEventListener("事件名"，“事件处理函数”，“true/false”)；

登入後複製

3）dom 2級事件處理：

if(btn.addEventListener){

     btn.addEventListener();
}
else{

     btn.attachEventListener()
}

登入後複製

true:事件擷取

false：事件冒泡

清除事件處理要使用removeEventListener();

//dom 2級事件處理程序不會被覆寫而是會一步一步的解析執行。

4）IE事件處理程序。（小於等於IE8的版本中使用，跟addEventListener的使用方法相似。）

新增一個事件attachEvent

刪除一個事件detachEvent

5）可以根據瀏覽器的版本不一樣寫不同的程式碼

document.getElementById("btn").addEventListener("click",showType);
function showType(e){
     alert(e.type);
}

登入後複製

3.事件物件：在觸發dom事件的時候都會產生一個物件。

事件物件的屬性：

1）type：取得事件類型

document.getElementById("btn").addEventListener("click",showTarget);
function showTarget(e){
     alert(e.target);
}

登入後複製

2）target：取得事件目標：哪裡觸發的這個事件，就是這個事件的物件是html元素中的什麼元素。

funtion people(name,age){
     this.name=name;this.age=age};
son=new people("jess",20);//然后创建一个对象

document.getElementById("btn").addEventListener("click",creat);
function people(name,age){
          this.name=name;
          this.age=age;
     }
 function creat(){
          var name1= document.getElementById("name").value;
          var age1=document.getElementById("age").value;
          son=new people(name1,age1);
          alert(son.name);
          alert(son.age);
          }

登入後複製

3）stopPropagation（）：阻止事件冒泡：觸發了最裡面的元素事件的發生，但是這個事件發生之後包含此元素的上層元素的事件也會被觸發！所以有的時候我們不希望這種情況的發生就會阻止事件冒泡的發生了。
event.stopPropagation();

###4）preventDefault（）：阻止事件預設行為###event.preventDefault();###

//dom 0级事件处理
// var btn1=document.getElementById("btn");
// btn1.onclick= function () {
// document.getElementById("pid").style.backgroundColor="red";
// };
//
// btn1.onclick=null;
////dom 2级事件处理,处理函数不能加（）括号符！
//

//var btn=document.getElementById("btn");
//btn.addEventListener("click",demo1);
//
//function demo1(){
//
//// alert("dom 2级事件处理！");
//
// document.getElementById("pid").innerHTML="dom 2级事件处理！";
//}

//事件对象

//1.获取事件对象的类型

//document.getElementById("btn").addEventListener("click",showType);
//function showType(e){
// alert(e.type);
//}

//2.获取事件对象的目标

//document.getElementById("btn").addEventListener("click",showTarget);
//function showTarget(e){
// alert(e.target);
//}

八，内置对象
1.什么是对象：js中所有事物都是对象，例如字符串，数组，时间，数值，函数等，每个对象都会带有属性和方法；
2.创建对象：
1）使用new object创建
people=new objet();
people.name="krys";
people.age=20;
2）直接创建：
people={name:"krys",age:20,addres:"guangdong"};
3）使用函数创建

funtion people(name,age){
     this.name=name;this.age=age};
son=new people("jess",20);//然后创建一个对象

document.getElementById("btn").addEventListener("click",creat);
function people(name,age){
          this.name=name;
          this.age=age;
     }
 function creat(){
          var name1= document.getElementById("name").value;
          var age1=document.getElementById("age").value;
          son=new people(name1,age1);
          alert(son.name);
          alert(son.age);
          }

登入後複製

3.字符串对象：String：字符串可以使用双引号也可以使用单引号！

属性：length：str.length可得到字符串的长度、
indexOf(),在字符串中查找字符串，并返回字符串所在的位置。

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert("r所在的位置是"+name.indexOf("r"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

登入後複製

match(),在字符串中匹配字符串，如果字符串1在字符串中存在，则将字符串1打印出来，如果没有就返回NULL

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){
              alert(name);
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

登入後複製

replace(a,b) a是要替换掉的原来的字符或字符串，b是新的字符或字符串

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert(name.replace("krys","krys小仙女"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

登入後複製

toUpperCase()转换成大写
toLowerCase()转换成小写
split()分隔线，将一个字符串分隔成若干部分，如str="hello,world,welcome,to";var s=str.split(","); s[0]="hello";

4.Date对象
1）创建Date对象：
var date=new Date();
alert(date);
var h=date.getHours();//时
var m=date.getMinutes();//分
var s=date.getSeconds();//秒

2)获取具体年份：getFullYear（）；
3）获取毫秒数：getTime();
4)设置具体的日期：setFullYear();
5)获取星期：getDay();

6）设置每秒更新一次
setTimeout(function(){

 showTime();},1000);

登入後複製

//每秒调用一次showTime函数

5.数组对象：
1)数组的创建：var a=["1","krys","ok"];
var a=new Array(); a[0]="hell0"; a[1]="world";
var a=new Array("hello","world","welcome");
2)数组常用的方法：
concat()合并数组如 a=["krys"];b=["tal"];a.concat(b)=krystal;
sort()排序数组 var a=["a","c","b"];a.sort();->a b c (默认从低到高排序)
设置为降序：a.sort(funtion(a,b){return a-b;})
push()在数组末尾添加一个元素var a=["a","c","b"]; a.push("d");
reverse()翻转，对称中心点相互交换：a.reverse()= c b a ;

6.math对象
1）常用函数
round()四舍五入 Math.round(2.5)=3;
random()返回0~1之间的随机数 Math.random();
可以转换成整数：parseInt(Matn.random()*10);
max()返回最大值
min()返回最小值
abs()返回绝对值

九，浏览器的内置对象BOM（browser object model）
1，window对象：大部分对象的祖先，最高级别对象之一。

1）简介：Window对象是指当前的浏览器窗口，所有的js全局变量函数以及变量都是Window对象的成员。
其中，全局变量是window对象的属性，全局函数是window对象的方法。

2）获得浏览器内部窗口的尺寸（即内容区域的尺寸，不包括滚动条工具栏等）：
window.innerHeight浏览器窗口的内部高度,window.innerWidth，浏览器的内部宽度。

3）使用window.open(url)可以打开一个窗口，使用window.close()可以关闭当前窗口。

2,history对象
window.history()对象包含浏览器的历史（url）的集合
有三个方法：
1）history.back()后退，返回到前一页
2）history.forward()，前进，进入到下一页
3)history.go()，带参数，参数就是要进入的页数，-1是前一页，-2是前两页，依次类推，当前页是0.

3，計時器
透過使用js，在一個設定的時間間隔之後來執行程式碼，而不是在函數被呼叫後立即執行
有兩個函數
一個是setInterval() -間隔指定的毫秒數持續的執行指定的代碼
一個是setTimeout()-暫停指定的毫秒數後執行指定的代碼。
可以使用setTimeout來實作setInterval()的功能：就是在呼叫的函式程式碼裡呼叫自己！
setInterval(funtion(){},1000);
setTimeout(funtion(){},1000);

可以使用clearInterval（），clearTimeout()來清楚這個調用，

4，Location物件
用來取得目前頁面的位址，並把瀏覽器重定向到新的頁面（其實我的理解就是解析目前位址）

Location物件的屬性：
location.hostname:傳回web主機的網域名稱
location.pathname:傳回目前頁面的路徑與檔名
location.port:傳回web主機的連接埠
location.protocol:傳回所使用的web協定
location.href:返回目前頁面的url
location.assign()載入新的文檔，參數是所要載入文檔的路徑。

window.location.hostname;

5，screen物件
window.screen物件包含有關使用者螢幕的資訊
screen.avaiilWidth;//可用的螢幕高度
screen.availHeight;//可用的螢幕寬度
screen.height;//螢幕高度
screen.width;//螢幕寬度

6，navigation物件
7，彈出窗口，cookie

十，js物件導向思想

#JavaScript重要知識點總結1

## JavaScript事件"事件物件"的注意要點_javascript技巧

相關影片：

#JavaScript 基礎加強影片教學

以上是最有系統的JavaScript關鍵點總結（不含語言基礎語法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn