JavaScript要點（不含有語言基礎語法）

時間 2020-01-06

標籤 javascript 要點含有語言基礎語法欄目 JavaScript 简体版

原文原文鏈接

一，變量
1.能夠用new Array（"1","2"）；來定義數組。
2.能夠經過爲變量賦值爲null來清除變量，如：html

//首先定義一個變量
var i1=10;
i1=null;
//此時的i1就被清除了

在函數裏面這樣定義變量的時候要注意node

funtion demo(){
     x=10;
}
//而此前的代碼中都沒有出現x，那麼這裏就是定義了x，在調用demo函數之後，x就是一個全局變量了。

二.運算符==和===web

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 鼠標移出事件cookie

五，dom操做
1，介紹：當網頁被加載時，瀏覽器就會建立頁面的文檔對象模型。app

二、DOM操做HTML
1）js可以改變頁面中的全部HTML元素
①改變輸出流：document.write();會覆蓋掉文檔全部的內容！慎用！
②得到元素：document.getElementById();
document.getElementByClass();
document.getElementByTagName();等dom

其中像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刪除子節點：<div id="div1">
                         <p id="p1">這是一個段落。</p>
                         <p id="p2">這是另外一個段落。</p>
                         </div>

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

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

                         parent.removeChild(child);//從父元素中刪除子元素：


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


          7動態添加節點(課選擇添加的位置)
                                       var div=document.getElementById("div");
                                       var node=document.getElementById("pid");
                                       var newnode=document.creatElement("p");
                                       div.inserBefore(newnode,node);
                                                      要添加的 在這以前的

2）js可以改變頁面中全部的HTML屬性
<!DOCTYPE HTML>
<html>
<head>

<title>hello world</title>

</head>
<body>

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

document.getElementById("aid").href="www.baidu.com";//改變屬性值

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

3）js可以改變頁面中的全部CSS樣式

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

4）js可以對頁面中全部事件作出反應

5）DOM對象控制HTML

6、事件句柄EventListener
事件句柄就是觸發事件發生的一個動做。例如onclick就是當被點擊的時候的句柄。
在js中能夠添加事件句柄，這樣能夠減小不少代碼量，
例以下面是傳統的事件觸發方式
<button onclick="demo()">按鈕</button>
在js代碼中添加的事件句柄就以下:處理函數不能加（）括號符！
var x=document.getElementById("btn");
x.addEventListener("click",demo);//這裏有兩個參數，一個是事件的句柄，後面的是處理事件的函數

刪除句柄用removeEventListener();

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

2.事件處理：
1）HTML事件處理：直接添加到HTML結構中

<button onclick="demo()"><button>

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

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

//0級事件處理清除事件處理很簡單隻要把onclick賦值爲空便可。設置的時候是對象的時間設置爲null而不是對象設置爲null！
btn1.onclick=null;

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

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

3）dom 2級事件處理：

addEventListener("事件名"，「事件處理函數」，「true/false」)；

true:事件捕獲
false：事件冒泡
清除事件處理要使用removeEventListener();

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

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

添加一個事件attachEvent
刪除一個事件detachEvent

5）能夠根據瀏覽器的版本不同寫不一樣的代碼

if(btn.addEventListener){

     btn.addEventListener();
}
else{

     btn.attachEventListener()
}

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

事件對象的屬性：
1）type：獲取事件類型

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

2）target：獲取事件目標：哪裏觸發的這個事件，就是這個事件的對象是html元素中的什麼元素。

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

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面向對象思想