Javascript分享筆記

 

Javascript

概念:  

1.變量: 內存中一塊存儲區域,這塊區域中的值是可以改變的,並且我們可以給這塊區域取一個名字;

2.對象: 對象具有兩大特性:1是靜態特徵2是其功能,當然具體到程序裏面對象的靜態特徵稱之爲對象的屬性,功能稱之爲對象的方法;

3.執行環境:

1.  全局執行環境: 全局執行環境是最外圍的執行環境,關閉瀏覽器或退出瀏覽器纔會被銷燬,所有全局變量都是作爲Window對象的屬性和方法創建的,全局變量和方法(函數)都被視爲window對象;

2.局部執行環境: 每個函數都有自己的執行環境,稱爲局部環境,函數執行時會創建函數執行環境,函數執行完畢會被銷燬,在裏面的函數和變量都是局部的;

// 執行環境:// 全局執行環境:// 1.在一個頁面中,第一次載入JS代碼時創建一個全局執行環境,// 全局執行環境是最外圍的執行環境,在Web瀏覽器中，全局執行環境被認爲是window對象。// 2.全局執行環境直到應用程序退出,也就是說關閉網頁或瀏覽器時纔會被銷燬// 3.因此,所有的全局變量和函數都是作爲window對象的屬性和方法創建的.// 全局變量被視爲window對象的屬性,全局函數被視爲window對象的方法
// 函數執行環境（局部執行環境）// 1.每個函數都有自己的執行環境,稱爲局部執行環境,// 2.函數執行時會創建函數的執行環境// 3.當執行環境中的代碼被執行完畢後,該環境會被銷燬,// 保存在其中所有的變量與函數也隨之銷燬.因此在函數裏定義的函數和變量都是局部的

4.作用域:

1.局部作用域用{}存儲一段代碼,稱之爲代碼塊;

2.訪問變量,先訪問局部變量再訪問全局變量,2個全局變量先訪問局部的全局變量再訪問全局的變量;

3.JS中沒有塊級作用域:if,for,while等都不視爲對變量的作用域劃分;

4.JS中只有在函數執行環境下,函數作用域纔有作用域劃分;

// 作用域// 作用域鏈:當代碼在一個環境中執行時,就會形成一種叫做作用域鏈的東西,// 它的用途是保證對執行環境中有訪問權限的變量和函數進行有序訪問
// 變量查詢:在變量查詢過程中,首先在當前作用域內查找相關變量,沒有的話繼續沿着作用域鏈向上搜索在變量查詢中,// 訪問局部變量要比全局變量更快,因爲不需要向上搜索作用域鏈,由近及遠;
// 建議都使用var關鍵字聲明變量
// 棧結構:先進後出,後進先出(數組的方法:push()壓入,pop()彈出)
// 環境棧:每個函數被調用時都會創建自己的執行環境,當執行到這個函數時,函數的執行環境會被推到環境棧中去執行,而執行後又在環境棧中彈出(退出,當前執行環境銷燬,把控制權交給上一級的執行環境,);

5.變量提升:

1.變量提升(Hoisting),也稱爲預解釋,是JS中的一個重點;

2.變量提升是指在程序執行之前,先檢查當前程序中所有代碼,碰上關鍵字var/function就提前爲其開闢內存空間;

3.而賦值操作要等到具體執行到該代碼時纔會進行賦值操作;

6.函數提升:

1.代碼執行之前碰到function等關鍵字,同樣開闢內存空間;

2.函數提升指的是將整個函數聲明提升到最頂層,在執行之前就開闢內存空間存儲函數聲明;

3.使用function關鍵字聲明函數,使用變量名創建函數,使用變量名創建的函數不會被提升;

7.內存泄露問題:

1.基於JS內存管理機制,建議更多的使用局部變量和局部對象來解決內存問題和性能優化;

2.解決方案:使用結束後將其設置爲null來釋放引用,這方法叫引用解除;

 

 

1.JS的幾種常用調試,輸出方式:

//JS常用幾種輸出方式,調試方式:
prompt("一隻小羊駝");   //1.prompt()用戶可輸入彈出框;
alert('兩隻小羊駝');     //2.alert()彈出框,用戶不可操作;
confirm("三隻小羊駝");   //3.confirm()彈出框,經常和判斷語句一起使用;
var  a  =  '小明';
console.log(a);   //2.控制檯打印指令,最常用;
document.write('三隻小羊駝');   //3.直接文本輸出頁面;
var  isNumber  =  isNaN(NaN);   //判斷對象是否非數字,正確返回true;

console.log(typeof  obj1);   //檢測類型,爲對象類型
console.log(obj1  instanceof  Object);//檢測是否是某一個類型,布爾值true/false;

 

 

2.JS數據類型:

//JS的幾種數據類型
var  string  =  '小明';     //字符串類型
var  number  =  10.8;   //數字類型;
var  isman  =  true;   //布爾類型,判斷true/false;
var  a;     //undefind,定義未賦值;
var  b  =  null;     //空類型;
var  c  =  ['a',1,'c',3]       //數組類型;
var  j  =  100/0;       //正負無窮Infinity
var  k  =  -100/0;
console.log(k);
var  a1  =  'a'/32;     //NAN形式
console.log(a1);
var  text  =  "你\"我\"";     //轉義序列
console.log(text);
\n       //  空格符

 

 

 

3.聲明變量 作用域及內存,遞歸函數 變量提升等:

//  變量,作用域及內存**********************************:
//js變量的聲明:
//1.先聲明,再賦值:
var  name;
name="小明";
//2.聲明,賦值同時進行:
var  name1  =  '小紅';
//3.同時聲明多個變量;
var  age  =  18,height  =  175;
//4.只聲明,不賦值;
var  a  =  'null';

//  基礎創建函數,function:
//  1.一個函數,代碼塊,定義函數;
function  a()  {
     console. log('我就看一下');
}
a();

//  2.帶參數的函數,傳參;
function  b(name,age)  {
     console. log('hello'+name+',');
     console.log('今年'+age+'.');
}
b('小明',18);

//  3.有返回值的函數,return;
function  c(name)  {
     return('hello'+name+'.');
}
var  a1  =  c('小紅');

//  4.匿名函數,匿名函數格式:
(function  (c,d)  {
     var  add1  =  c+d;
})(10,10);
//  計算1-100的和:
(function  ()  {
     var  ad  =1;
     for(var  i=0;i<=100;i++)  {
         ad   =  ad+i;
     }
     console. log(ad);
})();
//  案例2
var  st  =  81;
var  arr  =  ['beijing','beijing','beijing'];
var  set  =  function  (num,arr1)  {
     num  =1;
     arr[1]  =  'xiaohong';   //更改數組下標第一項
     document.write('數值:'+num+'<br>');
     document.write('數組:'+arr[1]+'<br>');
}
set(st,arr);

//  5.遞歸函數在函數內部調用自己,return不管代碼有沒有執行都將結束函數的執行:
function  fun1()  {
     console. log('haha');
     //fun1(),在函數內部調用自己;
     return;     //返回值,結束函數執行;
     console.log('hehe');   //return後這一步不會調用;
}
fun1();
//  求一個6的階乘,6*5*4*3*2*1,5*(5-1)*(5-2)*(5-3)*(5-4);
function  nex(num1)  {
     if(num1<=1){
         return  1;     //如果num1<=1,那就在1返回結束函數;
     }else  {
         return  num1*nex(num1-1);       //返回值,階乘;
     }
}
var  num2  =  nex(6);
document.write(num2);     //6*5*4*3*2*1結果爲720;

//  1.簡單數據類型作爲參數傳遞:
//  聲明全局變量,在程序任何位置都可以訪問:
var  n  =  123;
function  fun1(num)  {         //參數:形參;
     //  num作爲函數的參數相當於在函數內定義一個局部變量,只能在函數內部使用,出作用域就被銷燬;
     num  =  200;
     //  在函數內部聲明一個局部變量;
     var  b  =  10;
     console.log(b);
     //  在函數內部不帶var定義爲全局變量(不建議使用此種方式聲明):
     c  =  300;
}
fun1(n);     //返回值
console.log(c);     //  可以獲取到,但會造成內存泄漏;

//  2.引用類型作爲參數傳遞:
//  如果函數內部直接對數組或對象類型進行修改,會直接映像到原對象或數組上;
function  fun2(obj)  {
     obj.name  =  '小明';
     obj.age  =  20;
     console.log(obj)
}
var  obj1  =  new  Object();
obj1.name  =  '小紅';
obj1.age  =  18;
//  調用函數傳遞obj1作爲參數
fun2(obj1);
console.log(obj1);     //  等於把obj的對象複製給了obj1;
//  引用類型作爲參數傳遞:
function  fun3(obj)  {
     //  函數內部對於引用類型進行引用類型進行賦值操作,修改不會被映射到原數組或對象上,相當於在函數內部新創建了對象,進行賦值;
     obj  =  {
         name :'小王'
     };
     console.log(obj);
}
var  obj2  =  new  Object();
obj2.name  =  'text';
obj2.age  =  155;
//  調用函數傳遞obj2作爲參數
fun3(obj2);     //  等於把obj2的值賦值給了fun3;
console.log(obj2);


//  執行環境#################################################################:
//  全局執行環境:
//  1.在一個頁面中,第一次載入JS代碼時創建一個全局執行環境,
//  全局執行環境是最外圍的執行環境,在Web瀏覽器中，全局執行環境被認爲是window對象。
//  2.全局執行環境直到應用程序退出,也就是說關閉網頁或瀏覽器時纔會被銷燬
//  3.因此,所有的全局變量和函數都是作爲window對象的屬性和方法創建的.
//  全局變量被視爲window對象的屬性,全局函數被視爲window對象的方法
//  函數執行環境（局部執行環境）
//  1.每個函數都有自己的執行環境,稱爲局部執行環境,
//  2.函數執行時會創建函數的執行環境
//  3.當執行環境中的代碼被執行完畢後,該環境會被銷燬,
//  保存在其中所有的變量與函數也隨之銷燬.因此在函數裏定義的函數和變量都是局部的
//  1.不帶參數:
var  num  =  10;   //  定義全局變量,在程序任何地方都可以訪問;
function  fun1()  {
     //  使用關鍵字var表示在函數內部聲明局部變量:
     var  n  =200;
     console.log(n);
}
fun1();
//  2.帶參數:
var  color  ='red';
function  fun2(colorName)  {
     //  設置的爲局部變量:
     colorName  =  'blue';
     console.log(colorName);
     console.log(color)
}
fun2(color);     //  把color傳進fun2中;
//  作用域
//  作用域鏈:當代碼在一個環境中執行時,就會形成一種叫做作用域鏈的東西,
//  它的用途是保證對執行環境中有訪問權限的變量和函數進行有序訪問
//
//  變量查詢:在變量查詢過程中,首先在當前作用域內查找相關變量,沒有的話繼續沿着作用域鏈向上搜索在變量查詢中,
//  訪問局部變量要比全局變量更快,因爲不需要向上搜索作用域鏈
//
//  建議都使用var關鍵字聲明變量
//
//  棧結構:先進後出,後進先出(數組的方法:push()壓入,pop()彈出)
//
//  環境棧:每個函數被調用時都會創建自己的執行環境,當執行到這個函數時,函數的執行環境會被推到環境棧中去執行,而執行後又在環境棧中彈出(退出,當前執行環境銷燬,把控制權交給上一級的執行環境);
//  函數嵌套
var  className  =  '學校';
var  h  =200;
function  fun3()  {
     var  a=100;
     function  fun4()  {
         var  start  =10;
         h  =100;
         console.log(className);
         console.log(a);
         console.log(start);
     }
     fun4();
}
fun3();
console.log(className);
console.log(h);     //  先訪問局部再訪問全局,2個全局變量局部的優先找到;

//  函數的作用域(局部作用域)  {}用來儲存一段代碼,稱之爲代碼塊
function  fun1()  {
     var  c  =100;
     console.log(c);
}
//  js中沒有塊級作用域,if(){},for,while{},這些語句中的{}都不視爲對變量的作用域劃分,
//  只是用於設置循環或者條件語句
//  js中只有在函數執行環境下,函數作用域纔有作用域劃分;
if(true)  {
     var  a  =10;
     console.log(a);
}
console.log(a);
for(var  i=0;i<10;i++)  {
     var  b  =200;
}
console.log(i);
console.log(b);


//  1.變量提升:
//  變量提升(Hoisting),也稱爲預解釋,是JS中的一個重點;
//  變量提升是指在程序執行之前,先檢查當前程序中所有代碼,碰上關鍵字var/function就提前爲其開闢內存空間;
//  而賦值操作要等到具體執行到該代碼時纔會進行賦值操作;
console.log(a);   //  undefined,預解析由上往下;
var  a;             //  undefined,定義未賦值;
a  =10;             //  賦值
//  console.log(a);
var  str  ='小明';
function  fun2()  {
     console. log(str);
     var  str  ='局部變量';
     console.log(str);
}
fun2();

function  fun3()  {

     fun4();
     //  只有使用函數聲明方式創建的函數纔會被提升
     function  fun4()  {
         console. log('hello  word');
     }
}
fun3();

//  2.函數提升,代碼執行之前碰到function關鍵字,同樣開闢內存空間,
//  函數提升指的是將整個函數聲明提到最頂層,在執行之前就開闢內存空間存儲函數聲明
//  使用function關鍵字聲明函數,使用變量名創建函數,使用變量名創建的函數不會被提升
//  但是fun6的變量提升;
//  function  fun5()  {
//      //  會被提升;
//  }
//  fun5();
fun6();
var  fun6  =  function  ()  {
     console. log('函數6');
}
//  fun6()


//  內存問題:
//  基於JS的內存管理機制,建議更多的使用局部變量與局部對象來解決內存問題和性能優化;
//  不可避免的使用全局對象時,需要手動的解除對象引用來優化性能;
//  聲明一個全局對象
var  obj  =  new  Object();
obj.name  =  'txt';
//  添加一系列的屬性方法:
//  完成相應功能後,不需要再使用obj,但是程序運行過程中obj還是佔據內存空間,內存不友好;
console.log(obj);
//  解決方案:
//  就是一旦數據不再有用,那麼將其設置爲null來釋放引用,這方法叫解除引用;
//  使用結束之後設置爲null,結束obj的引用,等待回收;
obj  =  null;
console.log(obj);   //  結果爲null,釋放成功;

//  arguments  對象:
function  fun(a,b)  {
     //  fun.length存儲的是形參的長度
     console.log(fun.length);
     //  arguments  對象在函數內部;作用:保存函數的實際參數;
     console.log(arguments);     //  0,1  10,20
     console.log(arguments.length);
     //  想拿到30和40;
     console.log(arguments[1]);
     if(fun.length==arguments.length){
         console. log(a+b);
     }else  {
         alert('請傳遞正確的參數個數');
     }

}
fun(10,20);
//  函數作爲參數傳遞:
function  fun1()  {
     return  a+b;
}

function  fun3(fn,a,b)  {
     //  執行傳遞過來的fun1;
     var  d  =  fn(a,b);
     console.log(d);
}
fun3(fun1,10,20)

//(搜索框案例)
var  sousuo  =  document.getElementById('inp');
var  la  =  document.querySelector('#la');
sousuo.onfocus  =  function  (){     //獲取焦點觸發事件
     la.style.display  =  'none';
     la.style.color  =  'gray';
}
sousuo.onblur  =  function  (){   //失去焦點觸發事件
     la.style.display  =  'inline';
}
案例二:
var  ipt  =  document.querySelector('#one');
//  自動獲取光標:
//  ipt.focus();
//  當輸入框激活光標樣式:
ipt.onfocus  =  function  ()  {
     //  style,設置樣式;
     //  判斷用戶是否是第一次輸入
     if(ipt.value=="請輸入..."){
         ipt.value   =  '';
         ipt.style.color  =  'grey';
     }
}
//  當輸入框失去焦點時觸發:
ipt.onblur  =  function  ()  {
     if(ipt.value==''){
         ipt.value ='請輸入...';
         ipt.style.color='#CCCCCC';
     }
}
//  案例三:
var  ipt1  =  document.querySelector('#ipt1');
var  ipt2  =  document.querySelector('#ipt2');
ipt1.focus();     //自動獲取焦點;
//  鼠標穿過
ipt2.onmouseover  =  function  ()  {
     this.select();
}
ipt1.onmouseover  =  function  ()  {
     this.select();
}

//  (簡單案例div變色)
var  d  =  document.getElementById('d');
var  but  =  document.getElementById('but');
var  nex  =  0;
but.onclick  =  function  ()  {
     nex ++;
     d.style.background  =  'yellowgreen';
     if  (nex  %  2  ==  0)  {
         d.style.background   =  '#6666FF';
     }
     if  (nex  %  3  ==  0)  {
         alert("你有毒");
     }
}

 

 

 

4. javascript的常用內置對象:

//  內置對象,概念,Math()對象算法裏已整理:
//  1.String(字符串對象),獲取字符串長度:
//  獲取字符串長度:
var  string  =  'nimeia';
console.log(string.length);
//  轉換爲大寫:
var  string1  =  string.toUpperCase();
//  轉換爲小寫:
var  string2  =  string.toLowerCase();

//  2.Number對象:
var  number  =  12.345;
//  按指定位數保留,四捨五入:
//  var  n1  =  number.toPrecision(4);
//  按指定保留小數位,會四捨五入:
var  n2  =  number.toFixed(1);

//  3.日期對象  Date()返回當前時間日期;
//  創建一個日期對象;
var  myDate  =  new  Date();     //默認存有當前時間
myDate.getFullYear();  //獲取當前年份;
myDate.getMonth();  //獲取當前月份;
myDate.getDay();  //獲取當前週期;
ms  =  myDate.getMilliseconds();  //獲取當前時間毫秒(ms);
s  =  myDate.getSeconds();  //獲取當前時間秒(s),1s=1000ms;
m  =  myDate.getMinutes();  //獲取當前時間分鐘(m),1m=60s;
h  =  myDate.getHours();  //獲取當前時間小時(h,1h=60m;
//  時鐘角度運算:
miaozhen.style.transform  =  "rotate('+s*6+'deg)";   //1s=6度,旋轉角度;
fenzhen.style.transform  =  "rotate('+s*6+'deg)";   //1s=6度,旋轉角度;
shizhen.style.transform  =  "rotate('+s*6+'deg)";   //1s=30度,旋轉角度;
//獲取圓周率:
var  ar  =  Math.PI;
console.log(ar);

 

 

 

 

5.JS的一些計算方式:算數運算符,三目運算符,Math()對象取整函數;

//計算方式,八進制,十進制,十六進制;
1*8  的0-7次方     八進制
1*10  的0-9次方    十進制
1*16  的0-f次方    十六進制

//運算符:
//賦值運算符'=';
var  add;
add  =  1+1;

//算數運算符:小數點正常顯示
var  a  =  1+1.5;   //加法
var  b  =  5-3;   //減法
var  c  =  1*1.5;   //乘法
var  d  =  10/3;  //除法

//複合運算符:
//++  --自增與自減
//++  --  在前本身先自增或自減1個單位
var  e  =  1;
var  f  =  ++e;
//++  --  在後先賦值再自增或自減
var  g=  1;
var  h=  g++;

//運算符連寫  +=  -=  *=  /=:
var  i  =  5;
var  j  =  4;
j  +=  i;     //j=j+i;

//取餘
var  k  =  3;
var  l  =  8;
l  %=  k;     //l=l%k;

//字符串運算符,字符串的拼接
var  m  =  '小明';
var  n  =  '小紅';
var  o  =  m+''+n;

//爲字符串類型混合拼接
var  p  =  '1';
var  q  =  '2';
var  r  =  p+q;

//數字,字符串混合拼接,結果爲字符串'11';
var  s  =  '1';
var  t  =  1;
var  u  =  s+t;

//比較運算符:
var  v  =  10;
if(v>2)  {
     console. log('這就對了');
}
if(v<2)  {
     console. log('這就對了');
}
if(v>=2)  {
     console. log('這就對了');
}
if(v<=2)  {
     console. log('這就對了');
}
if(v==2)  {     //==相等運算符
     console.log('這就對了');
}
if(v!=2)  {     //!=不相等運算符
     console.log('這就對了');
}
if(v===2)  {     //嚴格等於運算符
     console.log('這就對了');
}
if(v!==2)  {     //!==非嚴格等於,數值類型必須相同
     console.log('這就對了');
}

//類型轉化:
//  1.判斷變量的類型,typeof():
var  n0  =  123;
console.log(typeof(n0));
//  2.將數字類型裝換爲字符串類型:String(),toString()十進制數字兩種方式;
//  toString(2),toString(8),toString(16),轉換爲2,8,16進制;
var  n1  =  123;
//  var  n2  =  String(n1);
var  n2  =  n1.toString();
//  3.將字符串類型轉化爲數字類型:
var  n3  =  "saew";
var  n4  =  Number(n3);
//  取整parseInt:
var  a  =  100.03;
var  b  =  parseInt(a);
//  得到一個整數或實數:
var  c  =  parseFloat(a);
//4.將數字轉化爲布爾類型:
var  n5  =  Boolean();
console.log(typeof(n5),n5);

//取整函數Math對象:
//地板函數(向上,向下取整),Math.ceil(向上取整)/Math.floor(向下取整):
var  a  =  3.24;
var  b  =  Math.ceil(a);  //向上取整,結果爲4;
var  c  =  Math.floor(a);  //向下取整,結果爲3;
//返回幾項中的最大值,Math.max():
var  a1  =  3.23;
var  b1  =  3.01;
var  c1  =  Math.max(a1,b1);
//獲取0-1之間的隨機數Math.random():
var  a2  =  Math.ceil(Math.random()*10);  //隨機生成0-10之間的數有小數點;
//計算X的Y次方,Math.pow();
var  b2  =  2;
var  c2  =  Math.pow(b2,2);   //2的次方,2*2結果爲4;
//四捨五入取整,Math.round();
var  a3  =  3.62;
var  b3  =  Math.round(a3);  //小數點5以下捨去,5以上進一位;

//邏輯運算符  &&與  ||或  !非;
var  a  =  1>2;     //true
var  b  =  2>1;     //false
//  &&兩者爲真,結果爲真  一個爲假,結果爲假
if  (a&&b)  {
     console. log('這是對的');
}
//  ||兩者爲假,結果爲真  一個爲真,結果爲假
if  (a||b)  {
     console. log('這是對的');
}
//  !取反,例:n1結果爲false,!n1結果爲true
if  (!a&&b)  {
    console. log('這是對的');
}
if  (a  ||  !b)  {   //一者爲假結果真,!只能單方面改變
     console.log('這是對的');
}

//三目運算符,  n1>n2?結果爲真執行左邊:結果爲假執行右邊   ;
var  n1  =  102;
var  n2  =  30;
n1  >  n2  ?  alert('true執行左邊')  :  alert('false執行右邊');

計算案例:

//簡單運算案例:
//1.取餘,1000天后是星期幾?今天星期六,1000%7(142周,994天后的星期六餘6天往後推算星期五)
var  number  =  ((1000%7)+6)%7;
console.log("1000天后是星期"+number);
//2.用戶輸入雞蛋案例,20個雞蛋一盒:
var  a  =  prompt("請輸入雞蛋的數量");
var  b  =  Math.ceil(a/20);       //向上取整Math.ceil();
console.log("盒子的個數爲"+b);
//  3.用戶隨便輸入一個數,獲取百  十  個位數:
var  a  =  prompt("請輸入一個三位數");
var  b  =  Number(a);   //先把用戶字符串轉換爲數字
var  a1  =  parseInt(b/100);   //取得百位數;
var  a2  =  parseInt(b%100/10);   //取得十位數;
var  a3  =  b%100%10;       //取得個位;
var  he  =  a1+","+a2+","+a3;   //數字輸出會相加,需換成字符串連接
console.log(he);

 

 

 

 

6. 控制流程語句:if判斷語句,switch比較語句,while/for循環語句 break立即退出所有循環 continue退出當前這項不完全退出;

//控制流程語句
//  if判斷語句,滿足條件時會執行代碼塊,不滿足時會執行另一個代碼塊:
var  age  =  26;
if  (age  >  20)  {     //是否大於20,小於執行下面的代碼,結果爲真執行否則執行下面的;
     alert('你可以看了');
}else  {
     alert('不許看片');
}
//判斷語句可以使一個表達式
var  a  =  10;
var  b  =  20;
if((a-b)>10)  {
     alert('運算錯誤');
}  else  {
     alert('是小於十');
}
//多個判斷語句組合使用:
var  a1  =  1;
var  b1  =  2;
if  (a1  ==  2){
     alert('錯誤');
}  else  if  (b1  ==  1){
     alert('錯誤');
}  else  {
     alert('正確');
}

//  switch語句(比較語句),對比變量可以使數字也可以是字符串:
//  case條件值,break跳出當前循環,default結束整個switch語句;
var  n1  =  prompt('請輸入你想查詢的天氣');
switch  (n1)  {
     case  '晴天':
         alert("星期一,16號");
     break;
     case  '小雨':
         alert("星期三,18號");
     break;
     case  '多雲':
         alert("星期二,17號");
     break;
     default:
         alert("沒有你要查詢的天氣");
}

//  while  循環語句:
var  a  =  1;
while  (a<=100)  {
     document. write('數字:'+a+'<br>');
     a++;
}
do  while語句先執行一次do的函數,再判斷不滿足再執行do裏面的函數(先執行再判斷):
var  a1  =  1;
do  {
     document. write('數字:'+a1+'<br>');
     a1++;
}  while  (a1<=10);

//案例,隨機產生一個數字,0-9之間,並且接受用戶輸入的數字,只能輸入3次;
var  number  =  parseInt(Math.random()*10);   //0-9之間隨機數取整;
var  n1  =  1;
while  (n1<=3)  {
     var  int  =  prompt('請輸入0-9之間隨機數');   //用戶輸入;
     var  int1  =  Number(int);   //用戶輸入字符串轉換爲數字;
     if  (number==int1)  {
         alert('答對了');
         //  n1=4;
     }else  {
         n1 ++;
     }
}

//  for循環語句,如果不滿足條件就循環執行:
for(var  i=0;i<100;i++)  {
     document. write(i+'只小鴨子'+'<br>');
}
//計算從0加到100的和;
var  a  =  0;
for(var  i1=0;i1<=100;i1++)  {
      a   =  a+i1;
}
console.log(a);
//將1-100之間所有是6的倍數的數字輸出到控制檯中:
for(var  i0=1;i0<=100;i0++){
     if(i0%6==0){
         console. log(i0);
     }
}
var  i2  =1;
while  (i2<=100){
     if(i2%6==0){
         console. log(i2);
     }
     i2 ++;
}
//在頁面中打印*三角形打印10行,循環嵌套方式:
for(var  a1=1;a1<=10;a1++)  {
     for(var  a2=1;a2<=a1;a2++){
         document. write('*'+'\n');
     }
     document. write('<br>');
}
//  break,跳出循環語句,循環到6跳出循環後面不執行:
//  continue  僅僅是跳過本次循環,後面的循環繼續執行:
var  k  =  0;
while  (k<10){
     k ++;
     if  (k==6){
         break;
         //  continue;
     }
     console. log(k);
}
//  break,continue簡單案例用戶輸入:
var  name  =  prompt("請輸入您的名字");
var  password  =  prompt("請輸入您的密碼");
while  (name!=='admin'  ||  password!=='3224'){     //或一個爲假,結果爲真就執行
     alert('輸入錯誤');
     name  =  prompt("請輸入您的名字");
     password  =  prompt("請輸入您的密碼");
     if(name=='admin'  &&  password=='3224'){     //與兩個判斷爲真退出;
         alert("登入成功");
         break;
     }else  {
         continue;     //否則就退出當前,繼續循環;
     }
}

 

 

 

 

7.數組:

//數組:
//  1.創建數組的方式:
//  字面量創建,創建一個空數組:
var  arr  =  [];
var  arr1  =  [1,'a',4,'g'];     //創建數組時添加元素;
//  構造函數方式創建數組,通過創建對象的方式創建數組:
var  arr2  =  new  Array();
var  arr3  =  new  Array(4,'f',3);     //創建數組時添加元素;
//  通過元素下標訪問數組元素或添加元素;
var  arr4  =[];
arr4[0]  =  '小明';     //添加元素
arr4[0]  =  '小紅';     //通過下標修改已有的元素
var  a  =  arr4[0];     //通過下標獲取相對應的元素;

//  2.遍歷數組,利用for循環:
var  arr5  =  ['小明',5,6,'小李','小王',9];
//  利用for循環遍歷數組,第一種方式:
for(var  i=0;i<arr5.length;i++)  {
     var  n  =  arr5[i];
     console.log(n);     //遍歷成功;
}
//  for循環遍歷  for  in,第二種方式:
var  m;
for(m  in  arr5)  {
     var  n1  =  arr5[m];
     console.log(n1);
}

//  3.數組的常用操作:
var  chengshi  =  ['北京','上海','南京','武漢'];
var  chengshi1  =  ['廣東','常州','南寧','成都'];
var  engLish  =  ['Tom','Lili','Han','Boss'];
var  number  =  [40,20,13,54,78,65];
var  a1  =  ['李明',9,'王紅',3,'趙六',7];
//  合併  north.concat()
var  chengshis  =  chengshi.concat(chengshi1);
//  轉換類型:  toString(字符串格式),join('?')把數據所有元素連成一個字符串;
var  string  =  chengshi.toString();
var  join  =  chengshi1.join('?');
console.log(typeof(string));
//  排序字母類型數組  indexOf(指定字符串值在字符串中最後出現的位置),lastIndexOf(在字符串中最後出現的位置);
var  one  =  chengshi.indexOf('上海');
var  last  =  chengshi.lastIndexOf('南京',3);
//  排序數字類型數組,sort(升序),reverse(降序);
//  字母升序,漢語按編碼格式不按首字母大小排列,英語按字母大小;
var  eng1  =  engLish.sort();
//  字母降序,由大往小;
var  eng2  =  engLish.reverse();
//  數字升序:數字由小至大;
var  left  =  number.sort(function(a,b){return  a-b});
//  數字降序:數字由大至小;
var  right  =  number.reverse(function(a,b){return  a-b});
//  刪除數組的第一個元素,並返回該元素,數組第一個元素被刪除:
var  one  =  chengshi.shift();
//  刪除數組的最後一個元素,並返回該元素,數組最後一個元素被刪除:
var  last  =  chengshi.pop();
//  追加元素到數組的開端:
var  nex  =  chengshi.unshift('西安');
//  追加元素到數組的末尾:
var  xin  =  chengshi.push('浙江');
//  返回一個子數組,slice(chengshi,one);
console.log(chengshi);
//  按數值大小進行排序,需藉助排序函數:
//  function(a,b){return  a-b}
//  輸出數組內最大值,比較大小:
var  max  =  0;     //存儲較大值;(比較結果)
var  arr  =  [3,20,23,45,13,67,89,68,5];
for(var  i=0;i<arr.length;i++)  {
     //比較大小,由小往大開始比較,最後爲最大值:
     if(arr[i]>max)  {
         max   =  arr[i];
     }
}
console.log(max);    

//  (數組遍歷,取出所有的LI)
var  li  =  document.getElementsByTagName('li');
//(獲取所有的li)
for(var  i=0;i<li.length;i++){
     //(選擇性更改LI中的內容)
     li[0].innerHTML  =  "hi";
}
//  案例一:股票案例;
//  //  獲取所有的class;
//  function  nex  (ClassName){return  document.getElementsByClassName(ClassName)}
//  var  li  =  nex('li');
var  li  =document.querySelectorAll('li');
for(var  i=0;i<li.length;i++){
     if(i%2  ==  0){
         li[i].style.backgroundColor   =  "#EEEEEE";
     }else{
         li[i].style.backgroundColor   =  '#DCDCDC';
     }
     li[i]. onmouseover  =  function  (){
         this.className  =  "yanse";
     }
     li[i]. onmouseout  =  function  (){
         this.className  =  '';
     }
}

//  案例二:多選框.正選  反選擇案例:
//  獲取所的按鈕:
var  buts  =  document.querySelector('#top').querySelectorAll('button');
//  獲取所有的input:
var  ipts  =  document.querySelector('#bottom').querySelectorAll('input');
//  封裝函數:
function  all(dm)  {
     for(var  i=0;i<ipts.length;i++){
         ipts[i].checked   =  dm;
     }
}
buts[0].onclick  =  function  ()  {
     all(true);
}
buts[1].onclick  =  function  ()  {
     all(false);
}
buts[2].onclick  =  function  ()  {
     for(var  i=0;i<ipts.length;i++){
         //  三目運算符裏面的值可以是表達式,可以是具體值
         ipts[i].checked  ==  true?ipts[i].checked  =  false  :  ipts[i].checked  =  true;
     }
}

//

遍歷數組案例:

<!--數組遍歷,修改LI中內容-->
<ul>
     < li>你是</li>
     < li>忘記</li>
     < li>毒非</li>
     < li>都會結婚</li>
</ul>

//  (數組遍歷,取出所有的LI)
var  li  =  document.getElementsByTagName('li');
//(獲取所有的li)
for(var  i=0;i<li.length;i++){
     //(選擇性更改LI中的內容)
     li[0].innerHTML  =  "hi";
}

<!--案例一:股票案例;-->
<div  class="box">
     < ul>
         < li  class="li">
             < span>上證指數</span>
             < span>5678</span>
             < span>9-6</span>
             < span>50%</span>
         li>
         < li  class="li">
             < span>上證指數</span>
             < span>5678</span>
             < span>9-6</span>
             < span>50%</span>
         li>
         < li  class="li">
             < span>上證指數</span>
             < span>5678</span>
             < span>9-6</span>
             < span>50%</span>
         li>
         < li  class="li">
             < span>上證指數</span>
             < span>5678</span>
             < span>9-6</span>
             < span>50%</span>
         li>
         < li  class="li">
             < span>上證指數</span>
             < span>5678</span>
             < span>9-6</span>
             < span>50%</span>
         li>
         < li  class="li">
             < span>上證指數</span>
             < span>5678</span>
             < span>9-6</span>
             < span>50%</span>
         li>
         < li  class="li">
             < span>上證指數</span>
             < span>5678</span>
             < span>9-6</span>
             < span>50%</span>
         li>
         < li  class="li">
             < span>上證指數</span>
             < span>5678</span>
             < span>9-6</span>
             < span>50%</span>
         li>
         < li  class="li">
             < span>上證指數</span>
             < span>5678</span>
             < span>9-6</span>
             < span>50%</span>
         li>

         < li  class="li">
             < span>上證指數</span>
             < span>5678</span>
             < span>9-6</span>
             < span>50%</span>
         li>
     ul>
</div>

//  案例一:股票案例;
//  //  獲取所有的class;
//  function  nex  (ClassName){return  document.getElementsByClassName(ClassName)}
//  var  li  =  nex('li');
var  li  =document.querySelectorAll('li');
for(var  i=0;i<li.length;i++){
     if(i%2  ==  0){
         li[i].style.backgroundColor   =  "#EEEEEE";
     }else{
         li[i].style.backgroundColor   =  '#DCDCDC';
     }
     li[i]. onmouseover  =  function  (){
         this.className  =  "yanse";
     }
     li[i]. onmouseout  =  function  (){
         this.className  =  '';
     }
}

<div  id="top">
     < button>全選</button>
     < button>取消</button>
     < button>反選</button>
</div>
<div  id="bottom">
     < ul>
         < li><input  type="checkbox"></li>
         < li><input  type="checkbox"></li>
         < li><input  type="checkbox"></li>
         < li><input  type="checkbox"></li>
         < li><input  type="checkbox"></li>
         < li><input  type="checkbox"></li>
         < li><input  type="checkbox"></li>
         < li><input  type="checkbox"></li>
         < li><input  type="checkbox"></li>
         < li><input  type="checkbox"></li>
         < li><input  type="checkbox"></li>
         < li><input  type="checkbox"></li>
     ul>
</div>

//  案例二:多選框.正選  反選擇案例:
//  獲取所的按鈕:
var  buts  =  document.querySelector('#top').querySelectorAll('button');
//  獲取所有的input:
var  ipts  =  document.querySelector('#bottom').querySelectorAll('input');
//  封裝函數:
function  all(dm)  {
     for(var  i=0;i<ipts.length;i++){
         ipts[i].checked   =  dm;
     }
}
buts[0].onclick  =  function  ()  {
     all(true);
}
buts[1].onclick  =  function  ()  {
     all(false);
}
buts[2].onclick  =  function  ()  {
     for(var  i=0;i<ipts.length;i++){
         //  三目運算符裏面的值可以是表達式,可以是具體值
         ipts[i].checked  ==  true?ipts[i].checked  =  false  :  ipts[i].checked  =  true;
     }
}

 

 

 

 

10.簡單節點DOM操作:X.innerHTML(‘修改文本內容’)

//  DOM操作:

//DOM操作   :就是獲取某個元素
//  獲取ID
var  div  =   document.getElementById('one');
console.log(div);
//  獲取屬性(標籤)
var  nodeList  =  document.getElementsByTagName('div');
console.log(nodeList[0]);
//根據name屬性值獲取對應元素,IE瀏覽器認爲只有表單控件的name屬性是合法的
var  inputs  =   document.getElementsByName('sex');
console.log(inputs[0]);
//這個需要注意.這個地方獲取不到
var  inputs  =   document.getElementsByName('one');
console.log(inputs[0]);
1.  d.style.left=200+'px';位置往左移動200px;
2.  ipt.focus();this.select();自動獲取光標;
3.  獲取所有的Classsname:function  nex  (ClassName){return  document.getElementsByClassName(ClassName)}

<!--DOM操作信息發送案例:-->
<div  class="box"  >
     <!--文本輸入框-->
     發送信息：<textarea  rows="10"  id="one"></textarea>
     < button>發送</button>
</div>

/*DOM操作:*/
/*發送信息案例:###########*/
.box{
     margin:   100px  auto;
     width:  600px;
     /*height:  200px;*/
     border:  1px  solid  #333;
}
textarea{
     width:  450px;
     resize:  none;/*防止用戶拖動  */
}
.box  li{
     width:  450px;
     line-height:  30px;
     border-bottom:  1px   dashed  #ccc;
     margin-left:  80px;
     list-style:  none;
}
a{
     text-decoration:  none;
     float:  right;
}

//  發送消息案例:
//  第一步拿到textarea,從而拿到輸入的內容
var  txt  =  document.getElementsByTagName("textarea")[0];
var  but  =  document.getElementsByTagName('button')[0];
//  第二步生成一個ul,createElement創建一個DOM節點;
var  ul  =  document.createElement('ul');
txt.parentNode.appendChild(ul);     //txt.parentNode:返回txt的父節點,appendChild在它後面添加ul節點
//  button的點擊事件(發送消息)
but.onclick  =  function  ()  {
     //  點擊按鈕如果輸入爲空,彈出輸入框提示輸入,輸出;
     if  (txt.value  ==  "")  {
         alert( '請輸入信息再發送');
         return;
     }
     //創建li賦值爲newLi
     var  newLi  =  document.createElement('li');
     //  li標籤的內容等於文本框中的內容+刪除鏈接
     newLi.innerHTML  =  txt.value  +  "<a  href  =  'javascript:;'  style='text-decoration:none'>刪除";
     //  children獲取ul中的所有的子節點,但是不包含空格符和換行符
     var  lis  =  ul.children;
     //  點擊發送之後將文本框內容清空
     txt.value  =  "";
     //將newLi添加到ul上
     //  ul.appendChild(newLi);
     //  如果ul的子元素爲0;
     if  (lis.length  ==  0)  {
         //  在ul中添加子元素li
         ul.appendChild(newLi);
     }  else  {
         //  否則在ul之前插入新的li爲ul的第一個子元素
         ul.insertBefore(newLi,  lis[0]);
     }
     //  刪除信息
     //  獲取所有的a節點
     var  aa  =  document.getElementsByTagName("a");
     console.log(aa);
     //  如果小於a的長度自增;
     for  (var  i  =  0;  i  <  aa.length;  i++)  {
         //通過遍歷給每一個標籤綁定一個刪除事件
         aa[i].onclick  =  function  ()  {
             //  當a點擊移除當前a節點的父節點li
             ul.removeChild(this.parentNode);
         }
     }
}

//  獲取元素
var  div  =   document.getElementById('one');
//  console.log(div.id);
div.id  =  'two';
//  console.log(div.id);
//  console.log(div.title);
div.title  =  'it  is  div';
//  console.log(div.className);
//  div.className  =  'div1';
var  style  =   div.style;
console.log(style);
style.backgroundColor  =  'pink';
//獲取屬性值,需要傳遞一個參數:屬性名字符串
var  id1  =   div.getAttribute('id');
console.log(id1);

var  t1  =   div.getAttribute('title');
console.log(t1);

var  s1  =   div.getAttribute('style');
console.log(s1);
//  因爲ie瀏覽器不識別class,他只識別className,所以我們在獲取class屬性值得時候,就必須做判斷
if  (div.getAttribute('class')===null){
     //  IE瀏覽器
     console.log(div.getAttribute('className'));
}else  {
     //  正常瀏覽器(主流瀏覽器)
     console.log(div.getAttribute('class'));
}

var  id1  =  document.getElementById('id1');
console.log(id1.hun);
console.log(id1.getAttribute('hun'));
//setAttribute(屬性名,屬性值):設置某一個屬性值
div.setAttribute('title','itisdiv');
console.log(div.getAttribute('title'));

div.setAttribute('style','background-color:blue;width:100px');

div.removeAttribute('style');

//獲取屬性值,需要傳遞一個參數:屬性名字符串
     var  id1  =   div.getAttribute('id');  //獲取div的ID屬性值;
     console.log(id1);
     var  t1  =   div.getAttribute('title');  //  獲取div的title屬性值
     console.log(t1);
     var  s1  =   div.getAttribute('style');  //  獲取div的style樣式屬性值;
     console.log(s1);
     //  因爲ie瀏覽器不識別class,他只識別className,所以我們在獲取class屬性值得時候,就必須做判斷
     if  (div.getAttribute('class')===null){
         //  IE瀏覽器
         console.log(div.getAttribute('className'));
     }else  {
         //  正常瀏覽器(主流瀏覽器)
         console.log(div.getAttribute('class'));
     }
     var  id1  =  document.getElementById('id1');
     console.log(id1.hun);
     console.log(id1.getAttribute('hun'));
     //setAttribute(屬性名,屬性值):設置某一個屬性值
     div.setAttribute('title','itisdiv');
     console.log(div.getAttribute('title'));
     div.setAttribute('style','background-color:blue;width:100px');
     div.removeAttribute('style');
     //  獲取元素節點
     var  div  =   document.getElementsByTagName('div')[0];
     //  獲取所有的子節點
     var  childs  =   div.childNodes;
     //  console.log(childs);
     //  獲取第一個子節點
     console.log(div.children)         //  獲取當前元素的所有子節點;
     console.log()
     console. log()
     console. log()
     console. log(  div.childNodes[0]);
     console.log(  div.firstChild);     //  獲取當前標籤節點的第一個子節點;
     console.log(  div.lastChild);       //  獲取當前標籤節點的最後一個子節點;
     //  console.log(div.childNodes[div.childNodes.length-1]);
     console.log(div.ownerDocument);   //  獲取當前文檔的根節點,相當於document
     console.log(div.parentNode);     //  獲取當前節點的父節點
     console.log(div.previousSibling);   //  獲取當前節點的前一個同級節點;
     console.log(div.nextSibling);       //  獲取當前節點的下一個同級節點
     console.log(div.attributes);       //  獲取當前節點所有的屬性節點集合
     console.log(div.attributes[0]);   //  獲取當前節點的第一個屬性節點
     //  節點的增刪改查:
     //  獲取body;
     var  body  =  document.getElementsByTagName('body')[0];
     //  createElement  創建DOM節點;
     var  h1  =  document.createElement('h1');
     //  appendChild()向某個元素節點之後添加子節點  將創建出來的節點h1,添加到body中
     body.appendChild(h1);
     //  createTextNode:創建文本節點(文本內容)
     body.createTextNode('現在很窮,再不上班吃不起飯');
     //  insertBefore()在已有的子節點前插入一個新的子節點   有兩個參數,第一個插入的新節點,第二個舊節點
     body.insertBefore(p,h1);
     //  replaceChild()將body中的p標籤替換爲lable標籤,有兩個參數(新,舊)同上;
     body.replaceChild(label,p);
     //  parentNode  返回當前節點的父節點;
     console.log(label.parentNode);
     //  cloneNode  克隆節點,複製所有的屬性和值給某個元素
     var  newLabel  =   label.cloneNode(true);
     body.appendChild(newLabel);
     //  removeChild  移除節點
     body.removeChild(newLabel);
     //  合併同級節點,normalize  方法合併相鄰的文本節點並刪除空的文本節
     p.normalize();
     //  splitText()  拆分,切割文本節點;
     p.splitText(4);
     //  deleteData(起始位置,刪除長度)  刪除文本節點;
     p.deleteData(4,5);
     //  appendData(...)  向文本節點中添加字符串;
     p.appendData("添加");
     //  insertData(插入位置,內容)  在文本節點插入文本內容;
     p.insertData(2,'我');
     //  replaceData(替換位置,替換字符長度,替換內容)  替換文本中內容;
     p.replaceData(3,6,'我的字符內容');
     //   splitText(分割文本位置)  分割文本;
     p.splitText(2);
     //   substringData(提取位置,提取長度)  提取文本內容;
     p.substringData(2,6);
    
     //  childNodes  返回子節點中的內容帶空格,清除空白;
     var  div  =   document.getElementById('one');
     console.log(div.childNodes);   //  5
//       div.childNodes
     //篩選掉空白節點    空白節點也屬於文本
     function  filertNodeSpace(childNode){
         var  arr  =  [];
         //遍歷子節點
         for(var  i  =0;i<childNode.length;i++){
             //判斷是否是空白符或者換行符
             if  (childNode[i].nodeType  ===3  &&  /^\s+$/.test(childNode[i].nodeValue)){
                 continue;
             }
             arr. push(childNode[i]);
         }
         return  arr;
     }
     var  arry  =   filertNodeSpace(div.childNodes);
     console.log(arry);

//  數字類型DOM操作:
var  n1  =  10.325;
//  獲取數字類型整數;
parseInt(n1);
//  獲取百位;
parseInt(n1/100);
//  獲取十位;
parseInt(n1%100/10);
//  獲取個位;
parseInt(n1%10);
//  獲取上一次左邊定位的值取整;
parseInt(list.style.left);
//  替換文本內容:
n1.innerHTML  =  'abc';

<!--點擊發送倒計時案例-->
<input  type="text">
<button  id="but">點擊發送</button>

//  點擊發送倒計時案例
var  but  =  document.getElementById('but');
but.onclick  =  function(){
   var  count  =  5;
   var  that  =  this;   //將this存儲到that
   var   timer  =   setInterval(changCount,1000);
     this.disabled  =  true;
     function   changCount(){
         count-- ;
         if(count  >=  0){
             that. innerHTML  =  '還剩'+count+'秒';
             console.log(this);
         }else  {
             that. innerHTML  =  '點擊發送';
             clearInterval(timer);   //關閉定時器
             that.disabled  =  false;
         }
     }
}

<!--圖片隨鼠標位置移動-->
<img  src="images/img.jpg"  id="image"/>

/*圖片隨鼠標位置移動*/
#image{
     width:  80px;
     height:  80px;
     position:  absolute;
     top:  0;
     left:  0;
}

//  圖片隨鼠標位置移動
var  image1  =  document.getElementById("image");
var  leaderX  =  0;   var  targetX  =  0;   //x
     var  leaderY  =  0;   var  targetY  =  0;     //y
document.onclick  =  function(event){
     var  event1  =  event  ||  window.event;  
     targetX  =  event1.clientX  -  image1.offsetWidth/2;  
     targetY  =  event1.clientY  -  image1.offsetHeight/2;
}
//緩衝動畫
     setInterval(function(){
        leaderX  =  leaderX  +  (targetX  -  leaderX)/ 10;
         leaderY  =  leaderY  +  (targetY  -  leaderY)/10;
         image1.style.left  =  leaderX  +  "px";   //X上的動畫
         image1.style.top   =  leaderY  +  "px";   //y上的動畫
     },20);

 

 

 

 

 

10.鼠標綁定事件:

//  //  事件綁定:
//  1.窗口事件  window.onload:打開網頁執行;  window.onunload:離開網頁執行;  window.location.href:窗口頁面跳轉執行;
//  事件的三要素:  事件源.事件  =  事件處理程序,要產生行爲,先要找到對象(事件源);
//  2.鼠標綁定事件:
//  onclick:鼠標點擊觸發事件;  ondblclick:鼠標雙擊觸發事件;
//  onmousedown:鼠標按下時觸發事件;  onmouseup:鼠標按鈕鬆開觸發事件;
//  onmouseover:鼠標懸浮於目標上觸發事件;  onmouseout:鼠標離開觸發事件;
//  onmouseenter:鼠標穿過目標觸發事件;onmouseleave:鼠標離開觸發事件;
//  onmousewheel:鼠標滾輪滾動時觸發事件;  onclientX(),  onclientY():指定鼠標在窗口中的座標;
//  3.表單中的綁定事件:
//  onchange:當用戶輸入框輸入內容失去焦點時觸發事件,切換下拉列表時也執行;  onsubmit:當form表單提交時觸發;
//  onreset:當重置按鈕按下時觸發事件;  onselect:當文本框內容被選中時觸發;
//  onfocus:當輸入框獲取焦點時觸發;  onblur:當輸入框失去焦點時觸發;  oninput:當輸入框輸入內容時觸發(獲取輸入框內容);
//  4.鍵盤事件:
//  onkeydown:當鍵盤被按下時觸發;  onkeypress:當鍵盤按下又鬆開時觸發;
//  onkeyup:當鍵盤松開時觸發;  onkeycode():指定按下或釋放的鍵是哪個;
//  5.圖像事件:  onabort當圖像加載失敗時觸發;

<!--綁定事件:-->
<!--鼠標綁定事件:-->
<input  type="button"  value="請點擊"  id="one">
<input  type="button"  value="請點擊"  id="two">

//  1.鼠標click事件,兩種方式::
var  ipt1  =  document.querySelector('#one');
//  添加鼠標點擊事件:
ipt1.addEventListener('click',function()  {
     alert('我就嘗試下');
},false);  //false沒有禁止項;
//  移除事件:
ipt1.removeEventListener('click',function  ()  {
     alert('我就試下');
});
//第二種常規:
ipt1.onclick  =function  ()  {
     alert('我嘗試下');
}

<form  action="js練習.php"  onsubmit="console.log('哈哈')"  onreset="console.log('重置了')">
     < input  type="button"  value="請點擊"  onclick="console.log('點擊事件')">
     < input  type="text"  placeholder="請輸入1"  onchange="console.log('文本框下拉事件')">
     < input  type="submit"  value="提交"  >
     < input  type="reset"  value="重置">
     < select  onchange="console.log('下拉事件觸發了')">
         < option>湖南</option>
         < option>山西</option>
         < option>廣東</option>
     select>
     < input  type="text"  placeholder="請輸入2"  onselect="console.log('文本被選中時觸發')">
     < input  type="text"  placeholder="請輸入3"  onfocus="console.log('獲取焦點')">
     < input  type="text"  placeholder="請輸入4"  onblur="console.log('失去焦點')">
     <!--鍵盤按下事件:-->
     <input  type="text"  onkeydown="console.log('鍵盤被按下')">
     < input  type="text"  onkeypress="console.log('鍵盤被按下又鬆開,中文無效')">
     < input  type="text"  onkeyup="console.log('鍵盤松開')">
     < input  type="text"  onkeycode="console.log('鍵盤哪個鍵被按下了')">
</form>

<!--綁定事件監聽-->
<input  type="button"  value="點擊"  id="but">

//  2.事件監聽不會出現覆蓋現象每個綁事件都會被觸發,用以處理多個綁定事件:
var  but  =  document.querySelector('#but');
//  console.log(but);
function  one()  {
     console. log('第一次點擊');
}
function  two()  {
     console. log('第二次點擊');
}
function  three()  {
     console. log('第三次點擊');
}
//  使用綁定事件監聽函數,DOM對象(元素).addEventListener(事件名稱,處理函數,false)
//  前綴加on不觸發事件,例:'onclick';兼容IE8及以下版本:but.attachEvent('onclick',one);
but.addEventListener('click',one,false);
but.addEventListener('click',two,false);
but.addEventListener('click',three,false);

<!--查詢信息案例:-->
<input  type="text"  id="tet"  value="請輸入..."/>
<button  id="but">查詢信息</button>

//  點擊查詢案例:
//傳誰的id就獲得誰
function  fun(id){return  document.getElementById(id);}//就是用來獲取元素的
fun("but").onclick  =  function(){
     if(fun("tet").value   ==  "班長"){
         alert("恭喜查詢成功");
     }else{
         alert("沒有此人");
     }
}

<!--鼠標懸浮放大案例-->
<div  id="box">
     < ul>
         < li  id="l1"><img  src="images/01.jpg"></li>
         < li  id="l2"><img  src="images/02.jpg"></li>
         < li  id="l3"><img  src="images/03.jpg"></li>
         < li  id="l4"><img  src="images/04.jpg"></li>
         < li  id="l5"><img  src="images/05.jpg"></li>
     ul>
</div>
<div  id="box1">
     < input  type="text"  value="請搜索"  id="sousuo">
     < button  id="bt"></button>
</div>

//  (鼠標懸浮放大案例)
var  box  =  document.getElementById("box");
//  console.log(box);
function  nex(liid,bg){
     var  dian  =  document.getElementById(liid);
     dian.onmouseover  =  function  (){
       box.style.backgroundImage   =  bg;
     }
}
nex('l1',"url(images/01big.jpg)");
nex('l2',"url(images/02big.jpg)");
nex('l3',"url(images/03big.jpg)");
nex('l4',"url(images/04big.jpg)");
nex('l5',"url(images/05big.jpg)");

<!--查詢信息案例:-->
<input  type="text"  id="tet"  value="請輸入..."/>
<button  id="but">查詢信息</button>

//  點擊查詢案例:
傳誰的id就獲得誰
function  fun(id){return  document.getElementById(id);}//就是用來獲取元素的
fun("but").onclick  =  function(){
     if(fun("tet").value   ==  "班長"){
         alert("恭喜查詢成功");
     }else{
         alert("沒有此人");
     }
}

<!--下拉事件,春夏秋冬-->
<select   id="select">
        < option  value="1">春天</option>
        < option  value="2">夏天</option>
        < option  value="3">秋天</option>
        < option  value="4">冬天</option>
</select>

  //  取得元素
var  select  =   document.getElementById('select');
  //  綁定下拉事件
  select.onchange  =  function(){
   //  alert('改天了');
       switch  (this.value){
           case  '1':
               document.body.style.backgroundImage  =  "url(春夏秋冬/春天.jpg)"
               break;
           case  '2':
               document.body.style.backgroundImage  =  "url(春夏秋冬/夏天.jpg)"
               break;
           case  '3':
               document.body.style.backgroundImage  =  "url(春夏秋冬/秋天.jpg)"
               break;
           case  '4':
               document.body.style.backgroundImage  =  "url(春夏秋冬/冬天.jpg)"
               break;
         }
    }

 

 

 

 

12.命名空間,多個JS文件調用:

<script  type="text/javascript"  src="./junjun.js"></script>
<script  type="text/javascript"  src="./tianju.js"></script>
a.hanshu1();b.hanshu1();

 

 

 

 

 

13.定時器:

<!--定時器:-->
<div  id="box">
     < button  class="stop">點擊時間停止</button>
     < div  class="time"></div>
</div>

//  定時器:  d.style.left=200+'px';(左邊位置挪動200px).
//  一次調用setTimeout(),過一段時間做某件事;
function  eat(nexter)  {
     document. write('吃飯'+'<br>');
     document.write(nexter);
}
var  cleartime  =  setTimeout(eat,3000);   //(調用對象,延遲時間)
//  setTimeout(eat('開始調用'),5000);    //代入

//  清除定時器;
clearTimeout(clearring);

//  清除定時器案例:
var  d  =  document.querySelector('.time');
function  boom()  {
     document. write('炸掉');
}
var  clearring  =  setTimeout(boom,5000);
d.onclick  =  function  ()  {
     clearTimeout(clearring);
}

//  循環調用,setInterval,每間隔多少時間調用一次;
var  d  =  document.querySelector('.time');
//
//  var  a  =  setInterval(function  ()  {
//      document.write('洗刷刷'+'
');
//  },1000);
setInterval(function  ()  {
     d.style.left   =  200+'px';
},3000);
清除倒計時:toLocaleTimeString(),根據本地時間把Date對象的時間部分轉化爲字符串;
function  myTimer()  {
     var  d  =  new  Date();
     var  time  =  d.toLocaleTimeString();
     document.querySelector('.time').innerHTML  =  time;
}
var  a  =  setInterval(function  ()  {
     myTimer();
},1000);
//  //  點擊停止:
var  stop  =  document.querySelector('.stop');
stop.onclick  =  function  ()  {
     clearTimeout(a);
}

<!--輪播圖案例:-->
<div  id="box">
     <!--設原點;-->
     <div  id="box1"  style="left:  -360px;">
         < img  src="images/01big.jpg"  alt="">
         < img  src="images/02big.jpg"  alt="">
         < img  src="images/03big.jpg"  alt="">
         < img  src="images/04big.jpg"  alt="">
         < img  src="images/05big.jpg"  alt="">
         < img  src="images/01big.jpg"  alt="">
     div>
     <!--小圓圈分頁點擊-->
     <div  id="buttons">
         < span  index="1"  class="one"></span>
         < span  index="2"></span>
         < span  index="3"></span>
         < span  index="4"></span>
         < span  index="5"></span>
     div>
     <!--左右箭頭-->
     <a  href="javascript:;"  id="left"  class="but"><</a>
     < a  href="javascript:;"  id="right"  class="but">></a>
</div>

//  輪播圖案例##############################################################:
//  多圖大盒子
var  list  =  document.querySelector("#box1");
//  左邊控件
var  prev  =  document.querySelector("#left");
//  右邊控件
var  next  =  document.querySelector("#right");

//  爲切換按鈕綁定事件,點擊按鈕調用切換圖片的功能實現函數
prev.onclick  =  function(){
     animation(360);
}
//  點擊按鈕調用切換圖片的功能實現函數
next.onclick  =  function(){
     animation(-360);
}
//  當點擊切換按鈕時執行的功能
function  animation(offset){
     //獲取上一次的定位的值(list.style.left的值爲字符串類型)
     var  left  =  parseInt(list.style.left);  //-600
     //  計算新的需要設置的定位值
     var  newLeft  =  left  +  offset;
     //  list.style.left需要設置字符串,使用js給元素設置屬性
     list.style.left  =  newLeft  +  "px";
     //判斷左右極限位置做特殊設置,當切換到第七張顯示時回到第二張
     if  (newLeft<-1800)  {
         list.style.left   =  -360  +  "px";
     }
     //  當切換到第一張顯示時回到第六張
     if  (newLeft>-360)  {
         list.style.left   =  -1800  +  "px";
     }
}

//-----------------定時器輪播
var  timer;
function  play(){
     timer   =  window.setInterval(function(){
         animation(-360)
     } ,2000)
}
play();
//-------------------  光標懸停
var  container  =  document.querySelector('#box');
function  stop()  {
     window. clearInterval(timer);
}
container.onmouseover  =  stop;
container.onmouseout  =  play;
//  切換圖片顯示,小圓圈同步:
var  buttons  =  document.querySelector('#buttons').querySelectorAll('span');
console.log(buttons);
var  index  =  1;
function  buttonsShow()  {
     //這裏需要清除之前的樣式
     for  (var  i  =  0;  i  <  buttons.length;  i++)  {
         if  (buttons[i].className  ==  'one')  {
             buttons[i].className   =  '';
         }
     }
     //數組從0開始，故index需要-1
     buttons[index  -  1].className  =  'one';
}
prev.onclick  =  function()  {
     index   -=  1;
     if  (index  <  1)  {
         index   =  5;
     }
     buttonsShow();
     animation(360);
}
next.onclick  =  function()  {
     //由於上邊定時器的作用，index會一直遞增下去，我們只有5個小圓點，所以需要做出判斷
     index  +=  1;
     if  (index  >  5)  {
         index   =  1;
     }
     buttonsShow();
     animation(-360);
}
//  ===========點擊小圓圈同步圖片
for  (var  i  =  0;  i  <  buttons.length;  i++)  {
     //  這裏使用的是匿名函數立即執行，（使用閉包）
     (function(i)  {
         buttons[ i].onclick  =  function()  {
             var  clickIndex  =  parseInt(this.getAttribute('index'));
             var  offset  =  360  *  (index  -  clickIndex);
             animation(offset);
             index  =  clickIndex;
             buttonsShow();
         }
     })(i) ;
}

<!--滾動輪播圖案例#############-->
<div  id="one">
     < ul>
         < li><img  src="04.jpg"></li>
         < li><img  src="01.jpg"></li>
         < li><img  src="02.jpg"></li>
         < li><img  src="03.jpg"></li>
         < li><img  src="04.jpg"></li>
         < li><img  src="01.jpg"></li>
     ul>
</div>

/*滾動輪播圖案例:*/
#one{
     width:  600px;
     height:  200px;
     margin:  100px  auto;
     position:  relative;
     overflow:  hidden;
}
ul  li{
     list-style:  none;
     float:  left;
}
ul{
     position:  absolute;
     width:  300%;
}
.yuan{
     position:  absolute;
     left:  50%;
     margin-left:  -50px;
     bottom:  10px;
}
.yuan  span{
     float:  left;
     width:  18px;
     height:  18px;
     background-color:  pink;
     text-align:  center;
     line-height:  18px;
     margin-right:10px;
     border-radius:  50%;
     cursor:  pointer;
}
.zuo  span{
     width:38px;
     height:  38px;
     position:  absolute;
     background:  #000;
     cursor:  pointer;
     color:  #ffffff;
     line-height:  38px;
     text-align:  center;
     font-family:  '黑體';
     font-size:  30px;
     opacity:  0.3;
     border:  1px  solid  #ffffff;
     left:  5px;
     top  :50%;
}
.you  span{
     width:38px;
     height:  38px;
     position:  absolute;
     background:  #000;
     cursor:  pointer;
     color:  #ffffff;
     line-height:  38px;
     text-align:  center;
     font-family:  '黑體';
     font-size:  30px;
     opacity:  0.3;
     border:  1px  solid  #ffffff;
     right:  5px;
     top  :50%;
}

//  獲取所有的屬性:
function  nex(TagName)  {return  document.getElementsByTagName(TagName)}
var  ul  =  nex('ul')[0];       //  第一個UL
var  div  =  nex('div')[0];     //  第一個DIV
var  img  =  nex('img');         //  所有的圖片....
//  定時器10毫秒調用一次,clock名字;
time  =  setInterval(clock,10);
//  起始位置爲0:
var  le  =  0;
function  clock()  {
     le --;
     if  (le<=-1200){
         //  (定了起始位置,如果小於1200的話就歸0位)
         le  =  0;
     }
     //  ul的左邊位置=le的長度;
     ul.style.left  =  le  +  "px";
}
//  鼠標放入圖片盒子停止定時器:
div.onmouseover  =  function  ()  {
     clearInterval(time) ;
}
//  鼠標移出調用定時器
div.onmouseout  =  function  ()  {
     time   =  setInterval(clock,10);
}
//  (創建個div盒子)
var  newBox  =  document.createElement('div');
//  console.log(newBox);
//  (設置小圓點的元素節點屬性)
newBox.setAttribute('class','yuan');
//  (把div添加到主盒子中,把放圓的盒子放入主盒子中)
div.appendChild(newBox);
for  (var  i=0;i<img.length;i++){
     //  (創建span元素節點)
     var  span  =  document.createElement('span');
     //  (每次循環給span添加文字,從1開始)
     span.innerHTML  =  i  +  1;
     //  (把span插入新的div中)
     newBox.appendChild(span);
}
//  創建2個div,作爲左右箭頭:
var  newBox1  =  document.createElement('div');
var  newBox2  =  document.createElement('div');
//  放入圖片盒子中
div.appendChild(newBox1);
div.appendChild(newBox2);
//  給2個DIV添加樣式:
newBox1.setAttribute('class','zuo');
newBox2.setAttribute('class','you');
//  創建2兩個span標籤
var  span1  =  document.createElement('span');
var  span2  =  document.createElement('span');
//  放入左右div中
newBox1.appendChild(span1);
newBox2.appendChild(span2);
//  左右span內容爲左右箭頭:
span1.innerHTML  =  "<";
span2.innerHTML  =  ">";

<!--定時器案例-->
<div  class="father">
    <div   class="clock-h"  id="div-h"></div>
    <div   class="clock-m"  id="div-m"></div>
    <div   class="clock-s"  id="div-s"></div>
</div>

/*定時器案例*/
div.father{
     width:600px;
     height:  600px;  
     background:url(images/clock.jpg)  no-repeat;
     margin:  10px  auto;  
     position:  relative;
}
.father  div.clock-h{
     background:  url(images/hour.png)  no-repeat  center  center;
}
.father  div.clock-m{
     background:  url(images/minute.png)  no-repeat  center  center;
}
.father  div.clock-s{
     background:url(images/second.png)  no-repeat  center  center;
}
.father  div{
     height:  100%;
     width:  100%;
     position:  absolute;
     left:  0;
     top:  0;
}
.test{
     height:  100px;
     background-color:  red;
}

//  定時器案例,獲取時鐘div
var  hour  =  document.getElementById("div-h");
var  minute  =  document.getElementById("div-m");
var  second  =  document.getElementById("div-s");
     var  ms=0,s=0,m=0,h=0;
     //設置定時器，時間的取值單位爲毫秒
    //需要設置兩個參數  第一個參數爲需要執行的操作   第二個參數爲調用的間隔時間
     var   test  =  function(){
     //  根據當前的小時數  分鐘數  秒數  計算出指針相對應的旋轉角度
    //獲取當前時間
     var  date  =  new  Date();
     //  console.log(date);
       ms  =  date.getMilliseconds();
     //獲取當前的秒鐘  精確到0.1秒
     s  =  date.getSeconds()  +  ms/1000;
     //獲取當前的分鐘  精確到0.1分
     m  =  date.getMinutes()  +  s/60;
     //獲取當前的小時  精確到分鐘
     h  =  date.getHours()  +  m/60;
     hour.style.transform  =  "rotate("+  h*30  +"deg)";
     minute.style.transform  =  "rotate("+  m*6  +"deg)";
     second.style.transform  =  "rotate("+  s*6  +"deg)";
     console.log(s);
     }
     setInterval(test,1000);

<!--網頁倒計時案例-->
<div  id="demo"></div>

//  網頁倒計時案例
var  demo  =  document.getElementById('demo');
var  count  =  5;
setInterval(goIndex,1000);//只調用一次
function  goIndex(){
     count-- ;
     demo.innerHTML  =  "<a  href='http://www.baidu.com'>本頁面將在"+count+"秒之後跳轉</a>"
     if  (count<=0){
         //跳轉頁面(自動跳轉)    window.location窗口事件
         window.location.href  =  'http://www.baidu.com';
     }
}

 

 

 

 

14.對象Object  :

//  創建對象:
//  對象具有兩大特性:1.靜態特徵;  2.是其功能,具體到程序裏面對象的靜態特徵稱之爲對象的屬性,功能稱之爲對象的方法;
//  1.字面量創建對象,使用new關鍵字生成一個對象,newObject():
var  myDate  =  new  Object();
//  設置對象的屬性,通過點語法設置對象的屬性,這裏點語法表示setter方法(設置器方法)
myDate.name  =  '小明';
myDate.age  =  20;
//  訪問屬性,通過點語法獲取對象的屬性:
var  name  =  myDate.name;
//  console.log(name);
document.write('hello'+myDate.name+'<br>'+'yourage:'+myDate.age);

//  對象字面量創建:
var  myDate1  =  {
     //  創建對象時添加屬性方法:添加屬性  屬性名:屬性值  通過字段定義;
     name:  '小王',
     age:  18,
     //  用字符串定義屬性名
     'love':  '小鄭',
     //  在對象中定義方法:  方法名:函數;
     loves:function  ()  {
         console. log('hello'+this.name+'.');
         console.log('age:'+this.age+'.');
         console.log('love:'+this.love+'.');
     }
};
//  更改裏面的屬性,兩種方法:
myDate1.name  =  '小紅';
myDate1['love']  =  '小李';
//  對象中定義方法的返回值:
myDate1.loves();
//  給對象添加新的屬性:
myDate1.xin  =  '新屬性';
//  給對象添加新的方法:
myDate1.xin1  =  function  ()  {
     console. log('hello'+this.name+'.');   //沒顯示,沒報錯;
}
//  檢查對象是否擁有某個屬性,in:
var  hasname  =  'name'  in  myDate1;   //返回布爾值;
console.log(hasname);
console.log(myDate1);     //打印爲Obect對象格式;
//  刪除屬性或者方法
delete  myDate1.xin1;
var  hasname1  =  'xin1'  in  myDate1;   //返回布爾值;
console.log(hasname1);
//  基本數據類型  不能動態的添加屬性方法;
var  n1  =  100;
n1.name  =  '基本數據類型';
console.log(n1.name);     //  結果爲:undefined

//  複製基本類型與引用類型的區別:
//  複製簡單數據類型
var  a  =  100;
var  b  =  a;
a  =  a+50;
console.log(a,b);
//  複製引用數據類型:
var  copy  =  new  Object();
copy.name  =  '王寶強';
//  複製操作將copy的內存地址賦給copy1;
//  copy,copy1  兩個變量存放的是同一個對象的內存地址,都去引用同一個對象,一旦發生修改就會全部修改;
var  copy1  =  copy;
console.log(copy,copy1);
copy1.name  =  '馬蓉';
console.log(copy,copy1);   //  copy1對象修改內容,copy對象的內容也被修改了;

//  變量的類型檢測:
var  a1=1,b1='檢測',c=true,d=undefined,e=null;
var  f  =  new  Object();
var  g  =  [1,2,3];
console.log(typeof(a1));
console.log(typeof(b1));
console.log(typeof(c));
console.log(typeof(d));
console.log(typeof(e));
console.log(typeof(f));     //  自定義對象;
console.log(typeof(g));     //  數組對象;
//  創建正則對象
var  h  =  new  RegExp();
//  創建字符串對象
var  i  =  new  String();
//  創建數字對象
var  j  =  new  Number();
console.log(h);
console.log(i);
console.log(j);
//  判斷不同對象類型:instanceof  object/Array,判斷對象時否爲對象/數組,布爾類型;
console.log(f  instanceof  Object);
console.log(g  instanceof  Array);
console.log(h  instanceof  RegExp);
console.log(i  instanceof  String);
console.log(j  instanceof  Number);

//  工廠模式:封裝函數,多次調用,解決代碼沉餘問題,創建的是一類對象,泛指;
function  creatStudent(name,age,class1){
     var  obj  =  {}
     obj.name   =  name;
     obj.age  =  age;
     obj.class1  =  class1;
     obj.study   =  function  (){
         console. log(this.name+this.age+this.class1+'認真搞學習');
     }
     return  obj;
}
//實例化具體的對象
var  obj1  =   creatStudent('小王',18,'1班');
var  obj2  =   creatStudent('小王他哥',19,'2班');
var  obj3  =   creatStudent('小王他大哥',20,'3班');
obj1.study();
obj2.study();
obj3.study();
console.log(typeof  obj1);   //檢測類型,爲對象類型
console.log(obj1  instanceof  Object);//檢測是否是某一個類型,布爾值true/false;

//  構造函數:
//  構造函數
//  注意點:構造函數的函數名必須大寫(用來和普通函數區分)
function  Student(name,age){
     //  var  obj  =  new  Object()//內部已經幫我們做了
     this.name  =  name;
     this.age  =  age;
     this.sing  =  function  (){
         console. log(this.name  +  this.age  +'會唱五環之歌');
     }
     //  return  obj;   //內部已經幫我們做了
}
//具體實例化對象
var  s1  =    new   Student('小明',8);
var  s2  =    new   Student('小紅',9);
console.log(s1  instanceof  Student)  //
s1.sing();
s2.sing();

//通過構造函數創建老師類
function  Teacher(name,age){
     //  這裏面的this:當我們在實例化對象的時候,這裏面的this就指向當前實例化的那個對象
     //  var  obj  =  new  Object()//內部已經幫我們做了
     this.name  =  name;
     this.age  =  age;
     this.sing  =  function  (){
         console. log(this.name  +  this.age  +'會唱五環之歌');
     }
     //  return  obj;   //內部已經幫我們做了
}
var  laowang  =   new  Teacher('王老師',30);
var  xiaowang  =  new  Teacher('老王',28);
console.log(laowang);
console.log(xiaowang);
console.log(laowang  instanceof  Student);

//  單例模式:
//  什麼是單例:   類型  ---->實例對象(唯一一種)
//  汽車(類)----->
//  什麼是單例:使用單例模式創建的對象在程序中有且只有一種,
var  box  =  (function(){
     function  Car  (){}     //局部的構造函數,外界不能拿到這個構造函數
     var  c  =   new  Car();  //根據類型實例化對象
     c.name  =  '瑪莎拉蒂';
     c.run  =function(){
         console. log('這是一輛汽車,可以跑');
     }
     return  c;
})();
//  new  Car();  //外界不能實例化Car
box.name;
box.run();

//  訪問私有變量;
(function  (){
     //創建私有變量
     var   a=  200;
     function  f1(){
         return  a;
     }
     //  function  Box(){}    //這樣寫是局部的
     Box  =  function  (){};   //Box會被視爲全局變量
     //創建公開訪問的方法
     Box.prototype.publick  =  function(){
         return  f1();
     }
     Box.prototype.setA  =  function(num){
         a   =  num;
     }
})()
var  b1  =  new  Box();
console.log(b1.publick());  //200
b1.setA(200);
console.log(b1.publick());  //200
var  b2  =  new  Box();
console.log(b2.publick())  //200     a現在變成靜態屬性

//  演奏案例:
//  樂器:  鋼琴,小提琴   屬性:價格
//  演奏家:演奏樂器
//  演奏家可以使用各種樂器,  實現輸入1:演奏家演奏鋼琴,輸入2:演奏家演奏小提琴
//  樂器類
function  Insturn(name,price){
     this.name  =  name;
     this.price  =  price;
}
//人類
function  Performer(){
     this.play  =  function  (insturn){
         alert('演奏家演奏的'+insturn.name+  '價格爲'+insturn.price);
     }
}
function  Paion(name,price){
     Insturn.call(this,name,price);   //對象冒充
}
function  Violin(name,price){
     Insturn.call(this,name,price);   //對象冒充
}
//創建實例對象
var  actor  =  new  Performer();
//  var  paino  =   new  Insturn('鋼琴',  2000);
//  var  violin  =   new  Insturn('小提琴',  2000);
var  p  =  new  Paion('鋼琴',  2000);
var  v  =  new  Violin('小提琴',  1000);
//實現演奏
var  choice=   prompt('請輸入1(演奏鋼琴)或輸入2(演奏小提琴)');
if  (choice  ==  '1'){
     actor. play(p)
}else  if(choice  ==  '2'){
     actor. play(v)
}

 

 

 

 

 

15.原型:

//  原型:
//  什麼是原型:在js中所有的函數(構造函數,普通函數....),都有一個prototype屬性,
//  這個屬性引用了一個對象，即原型對象，也簡稱原型,也就是說通過這個屬性可以訪問到函數上面的原型對象
//  原型的特點:  如果在原型上添加了屬性和方法,那麼實例化出來的所有實例對象,都有原型上的屬性和方法,並且一模一樣,這樣通過
//  原型對象就實現了數據共享,這是最大的有點也是最大的缺點
function  Student(name){
     this.name  =  name;
}
//在構造函數的原型上添加屬性,prototype  屬性使您有能力向對象添加屬性和方法。
Student.prototype.name  =  '老王';
Student.prototype.age  =  18;
//在構造函數的原型上添加方法
Student.prototype.sing  =  function  (){
     console. log(this.name+this.age+"五環之歌");
}
console.log(Student.prototype);   //Student.prototype:通過函數名訪問原型
var  s1  =   new  Student();
var  s2  =   new  Student();
var  s3  =   new  Student('小王');   //如果屬性裏面有,就直接返回,不回去原型上找
console.log(s3.name);
console.log(s3.age);//如果在類的屬性沒有找到某一個屬性,就會去這個類的原型上找

//  使用構造函數
function   Student(name,age){
     this.name  =  name;   //實例化屬性
     this.age  =  age;
     this.study  =  function  (){
         console. log('好好學習');
     }
}
//在原型上添加屬性
Student.prototype.schoolname  =  9;
//根據指定類型創建具體的對象=====>實例化對象
//只要是通過構造函數實例化出的對象,都會訪問過該構造函數的原型
var  s1  =   new  Student('老王',20);
//原型對象:每一個函數都有原型
console.log(  Student.prototype);   //通過prototype屬性訪問原型對象
console.log(  s1.__proto__);
console.log(  s1.constructor);  //這樣訪問可以拿到當前的構造函數
console.log(Student.prototype.isPrototypeOf(s1));
function  Teacher  (height){
     this.height  =  height;
};
//創建一個構造函數
//在構造函數的原型上面添加屬性和方法
Teacher.prototype.name  =  'Lee';
Teacher.prototype.age  =  18;
Teacher.prototype.run  =  function(){
     console. log('開始跑');
}
var  t1  =   new  Teacher();
var  t2  =   new  Teacher();
console.log(t1.name);
//在外面給t1對象,另外添加一個name屬性
t1.name  =  'Hi';
delete  t1.name;
console.log(t1.name);   //就近打印出來的是Hi
console.log(t2.name);
//hasOwnProperty:用來判斷某一個屬性是在實例屬性還是在原型對象上,如果在實例屬性上就返回true,反之就是false
console.log(t2.hasOwnProperty('height'));
var  obj  ={
     name :'li',
     age:18
}

//  字面量方式創建原型:
function  Student  (){}
//通過字面量的方式給原型添加屬性
Student.prototype  ={
     name :'Li',
     age:18,
     //由於{}相當於已經創建了一個新的Object類型的對象,需要我們手動將當前的原型指向當前的構造函數
     constructor:Student
}
Student.prototype.name  =  'Li';
var  s1  =   new  Student();
var  s2  =   new  Student();
console.log(s1.name);//undefined
console.log(s2.name);//undefined
console.log(s1.height);
//內置引用型,也有原型
var  arry  =    new   Array();
console.log(typeof  arry);
console.log(String.prototype);//如果可以訪問到,說明內置型也有也有原型
console.log(Array.prototype.sort);
console.log(String.prototype.substring);
//給String的原型上手動添加了一個方法(一般不這樣做,有風險)
String.prototype.addstring  =  function(){
     console. log('被添加了');
}
console.log('LILI'.addstring);

//  汽車案例:
//  創建汽車類型(品牌,排量,開始,停止)
function  Car  (brand,displacment){
     //實例化屬性
     this.brand  =  brand;
     this.displacment  =  displacment;
}
//車子啓動和停止的方法添加到原型上(因爲這兩個方法是所有的實例對象都要有的屬性)
Car.prototype.start  =  function  (){
     console. log('排量爲'+  this.displacment  +'的'  +  this.brand+'小汽車啓動了');
}
Car.prototype.stop  =  function(){
     console. log('排量爲'+  this.displacment  +'的'  +  this.brand+'小汽車停止了');
}
//通過類創建具體的實例對象
var  ms  =   new  Car('瑪莎拉蒂',2.0);
ms.start();
ms.stop();
//創建車燈對象
function  Lamp(){
     this.open  =  function  (){
         console. log('車燈打開了');
     }
     this.close  =  function(){
         console. log('車燈關閉了');
     }
}
var  lamp  =   new  Lamp();
lamp.open();
lamp.close();

function  Car2  (brand,displacment,lamp){
     this.brand  =  brand;
     this.displacment  =  displacment;
     this.lamp  =  lamp;
     this.start  =  function  (){
         this.lamp.open();
         console.log('排量爲'+  this.displacment  +'的'  +  this.brand+'小汽車車燈打開了然後啓動了');
     }
     this.stop  =  function  (){
         this.lamp.close();
         console.log('排量爲'+  this.displacment  +'的'  +  this.brand+'車燈關了小汽車停止了');
     }
}
var  c2  =   new  Car2('法拉利',2.0,Lamp);
c2.start();
c2.stop();

//  原型鏈的繼承:
//繼承:一個對象繼承與另外一個對象,同時繼承了他的屬性和方法
//被繼承類型(父類型)和繼承類型(子類型)
function  Parent(name,age){
     this.name  =  name;
     this.age  =  age;
     this.sleep  =  function  (){
         console. log("睡覺")
     }
}
function  Son1  (height){
     this.height  =  height;
}
//  new  Parent()就是創建了一個實例對象,因爲實例對象本身帶有屬性和方法,然後交給Son的原型
Son1.prototype  =  new  Parent('小黃',40);
var  s1  =   new  Son1(185);
console.log(s1.name);
console.log(s1.age);
s1.sleep();
function   Son2(){
}
Son2.prototype  =   new  Son1(186);
var  s2  =  new  Son2();
console.log(s2.name);
console.log(s2.age);
s2.sleep();
console.log(s1  instanceof  Parent);   //ture
console.log(s1  instanceof  Son1);     //ture
console.log(s2  instanceof  Parent);     //ture
console.log(s2  instanceof  Son1);     //ture
console.log(s1  instanceof  Son2);     //false

//  組合繼承:
function  Parent(name,age){
     this.name  =  name;
     this.age  =  age;
}
//  prototype向對象添加屬性和方法;
Parent.prototype.sleep(){
     console. log('睡覺了');
}
function  Son(name,age){
     //使用對象冒充,用對象Parent替換當前對象apply();
     Parent.apply(this,[name,age]);
}
//原型鏈繼承
Son.prototype  =  new  Parent();
//組合繼承可以實現個性化(對象冒充)   //原型鏈繼承實現共享
var  xiao  =   new  Son('小明',17);   //
var  did  =    new   son('小明弟弟',16);

 

 

 

 

15.閉包與匿名函數:

//  閉包與匿名函數:
//  匿名函數:就是沒有名字的函數
//  閉包:  是一種特殊的匿名函數,能夠訪問另一個函數作用域中變量的函數;
//  聲明普通函數
function  sun(a,  b)  {
     return  a  +  b;
}
var  he  =  sun(10,10);
console.log(he);
//  聲明匿名函數
//  直接將匿名函數放在程序中會報錯
//  function  (){
//      return  1;
//  }
//  解決的第一種辦法：使用直接量來接收
var  f1  =  function  (){
     var  a=  100;
     return  a;
};
f1();
console.log(f1);
//  解決的第二種辦法：匿名函數的自我執行
(function  (){
     console. log("匿名函數自執行");
})();
//匿名函數的傳遞參數問題
(function  (a,b){
     console. log(a+b);
     console.log(this);
})(10,20);
//  閉包:  是一種特殊的匿名函數,能夠訪問另一個函數作用域中變量的函數;
//  function  fa(){
//      var  a  =  100;
//      (function  (){
//          alert(++a);
//      })();
//  }
//  fa();
function  fun(){
     var  a  =  100;
     var  b  =  200;
     return  function  (){
         console. log(a,b);
         return  a+b;
     }
}
console.log(fun());
console.log(fun()());  //輸出內層函數執行的結果,100  200     300;

function  fd(){
     var  a  =  100;
     return  function  (){
         ++a;
         return  a;
     }
}
var  box  =   fd();
console.log(box());
console.log(box());
console.log(box());

<!--閉包函數案例:-->
<button  id="but1">
     向前跑
</button>
<button  id="but2">
     向後跑
</button>
<div  id="box"></div>

//  閉包案例,點擊div移動:
var  but1  =  document.getElementById('but1');
var  but2  =  document.getElementById('but2');
var  div  =  document.getElementById('box');
function  move  (){
     return  function(){
         div.style.left   =  div.offsetLeft  +30+'px';
     }
}
var  demo  =   move();
but1.onclick  =  demo;

function  move2  (){
     return  function(){
         div.style.left   =  div.offsetLeft  +  (-30)  +'px';
     }
}
var  demo2  =   move2();
but2.onclick  =  demo2;

//  循環閉包:
function  box(){
     var  arr  =  [];
     for  (var  i  =  0;i<5;i++)  {
         arr[i]   =  (function  (){
             return  function  (){
                 return  i;
             };
         })();
     }
     return  arr;
}
var  b  =  box();
console.log(b);
for  (  var  i  =  0;i  <  b.length;i++)  {
     console. log(b[i]());
}

//  閉包中的this:
var  name  =  "THE  window";
var  obj  =  {
     name :  'THE  obj',
     getFunction  :  function  (){
         console. log(this.name);  //'THE  obj'
         return  function  (){
             console. log(this);   //obj2
             return  this.name;   //'the  obj2'
         }
     }
}
var  obj2  =  {name  :  'the  obj2'}
//  apply()用一個對象替換當前對象:
console.log(obj.getFunction().apply(obj2));

 

 

 

 

 

16.排他思想:

<!--排他思想:-->
<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>

/*排他思想:*/
.one{
     background-color:  red;
}
button{
     height:  50px;
     outline:  none;
}

//  排他思想:
//取得所有的button
var  buts  =  document.getElementsByTagName("button");
//通過循環拿到每一個button
for  (var  i  =  0;i<buts.length;i++)  {
     buts[i]. onclick  =  function(){
         for  (var  j  =  0;j<buts.length;j++)  {
             buts[j].className   =  '';
         }
         this.className  =  'one';
     }
}

<!--排他思想,內容切換-->
<div  id="box">
     < div  id="libox">
         < ul>
             < li>新聞</li>
             < li>體育</li>
             < li>娛樂</li>
             < li>笑話</li>
         ul>
     div>
     < p>新聞版塊</p>
     < p>體育版塊</p>
     < p>娛樂版塊</p>
     < p>笑話版塊</p>
</div>

/*排他思想,內容切換*/
#box{
     width:  400px;
     height:  370px;
     margin:  100px  auto;
     overflow-y:  hidden;
     /*background-color:  skyblue;*/
}
#libox{
     width:  400px;
     height:  35px;
     background-color:  #008080;
}
#libox  li{
     height:  35px;
     width:  100px;
     list-style:  none;
     float:  left;
     text-align:  center;
     line-height:  35px;
}
#box  p{
     width:  400px;
     height:  335px;
     font:  700  35px/335px  'sinsong';
     text-align:  center;
     background-color:  #008040;
}

//  排他思想,內容切換:
//  (獲取所有所需屬性)
function  nex  (TagName){return  document.getElementsByTagName(TagName)}
//  console.log(nex);
//  (獲取所有li)
var  li  =  nex('li');
//  (獲取所有的p)
var   p  =  nex('p');
//  (取出所有的li遍歷)
for(var  i=0;i<li.length;i++){
     //  (獲取每一個li)
     li[i].index  =  i;
     //  (當指針懸浮在li標籤上的時候)
     li[i].onmouseover  =  function  (){
         for(var  j=0;j<p.length;j++){
             p[j].style.display   =  'none';
             li[j].style.background  =  '#008080';
         }
         p[ this.index].style.display  =  'block';
         li[this.index].style.background  =  '#008040';
     }
}

//  screen對象  left/top/x/y,不支持火狐;
screenLeft/screenTop  返回相當於屏幕X和Y的座標;
//  不支持IE
screenX/screenY  返回相當於屏幕X和Y座標;

 

 

 

 

 

 

17.正則表達式:

     //  正則表達式,對文本進行檢測,是一個描述字符模式的對象,RegExp表示符;
     //  第一個參數使我們要匹配的字符;第二個參數是要匹配的模式
     //  第一種:通過new關鍵字創建
     var  reg1  =  new  RegExp('W','g');
     //  第二種:通過字面量的方式創建一般用這種,用兩個反斜槓,斜槓中間爲匹配字符
     //  匹配模式在後面;
     //  i表示忽略大小寫;   g表示全局匹配
     var  reg2  =  /e/ig;
     //  正則表達式有兩種測試方法
     //  test():測試是否匹配返回  true或false
     //  ese();執行匹配搜索,成功返回相關信息,失敗返回null;

     //  string字符串類型有4種正則表達式方法:
     //  返回所有匹配到的結果;
     var  s  =  'hello';
     var  n  =  /e/ig;
     console.log(/e/ig.test(s));
     //  1.match(表達式)返回所有匹配到的內容;
     var  n1  =  s.match(n);
     console.log(n1);
     //  2.replace(表達式,替換內容)  替換匹配到的字符;
     var  s1  =  s.replace(n,'a');
     console.log(s1);
     //  3.search(正則表達式)返回字符串中被匹配到的第一個字符的位置,如果沒找到就返回-1;
     var  n2  =  s.search(n);
     console.log(n2);
     //  4.以被匹配到的字符爲分隔符,分割爲數組,原數組不受影響;
     var  s2  =  s.split(n);
     console.log(s2);

     //  正則表達式的RegExp靜態屬性,ipput;
     input            簡寫 :$_  當前被匹配的字符串;
     lastMatch        簡寫 :$&  最後一個匹配字符串;
     lastParen        簡寫 :$+  最後一對圓括號內的匹配字符串;
     //  leftContext      簡寫:$`  最後一次匹配左邊的字符串;
     rightContext     簡寫 :$'  在上次匹配之後右邊的字符串;

     //  正則表達式重點:元字符,出了特殊字符使用多次外其他字符默認使用一次;
     //  /...../反斜槓後元字符將失去其特殊含義,變成普通字符;
     //  元字符:  以^開頭以$結尾;
         //  {3}表示剛好只能放3個;
         //  檢查郵政編碼,有6位第一位不能爲0;
               /i  :  忽略大小寫;
               /g  :  全文查找出現的所有匹配字符;
               /m  :  多行查找;
               /gi  :  全文查找,忽略大小寫;
               /ig  :  全文查找,忽略大小寫;
                 .  :  匹配除換行符外的任意字符;
         [a-z0-9]  :  匹配括號中的字符集中的任意字符;
         [^a-z0-9]  :  匹配任意不在字符集中的字符;
               \d  :  匹配數字;
                 g  :  執行全局匹配;
               \D  :  匹配非數字;
               \w  :  匹配字母和數字及_;
               \W  :  匹配非字母和數字及_;
               \o  :  匹配null字符;
               \b  :  文本開頭匹配是否到邊界;
               \f  :  匹配進制字符,$1-$99文本;
               \n  :  匹配換行符;
               \r  :  匹配回車字符;
               \t  :  匹配製表符;
               \s  :  匹配空白字符,空格  製表符和換行符;
               \S  :  匹配非空白字符;
         //  匹配重複字符:
               x?  :  匹配0個或1個x;
               x*  :  匹配0個或任意多個x;
               x+  :  匹配至少1個x;
           (xyz)+  :  匹配至少1個xyz;
           x{m,n}  :  匹配至少m個最多n個x;
this/where/logo   :  匹配this  where或logo中的任意一個;

//  正則表達式的靜態屬性:
var  reg1  =  /google/ig;
var  reg2  =  /g/ig;
var  str  =  'This  is  google';
var  str2  =  'this  is  world';
console.log(reg1.test(str));   //必須匹配一次,返回布爾值;全局匹配str中是否有字符串'google'
console.log(reg2.exec(str2));  //  返回具體位置,失敗爲null,全局匹配str2中是否有g,結果爲null
console.log(reg1.test(str2));  //  全局匹配str2中是否有字符串google,false
console.log(reg2.exec(str));     //  str中是否有字符串'g',返回字符串具體位置
console.log(RegExp.input,RegExp.$_);       //拿到當前被匹配的字符串,如果是多次匹配,拿到的是第一次
console.log(RegExp['$&']);         //lastMatch多次匹配,拿到的是最後一次匹配的字符,匹配的是g

var  reg1  =  /l/ig;
var  str  =  'hello  world  blue';
console.log(reg1.lastIndex);   //整數，代表下次匹配將從哪個字符位置開始
reg1.lastIndex  =  0;     //強行重新開始(用的不多)

//1.元字符都帶有一定的特定含義;2.給元字符加上/,他就失去了意義,就是表示一個普通的字符
var  str  =  '_Bl123l06A這是一個界面很low的網站';
var  reg1  =  /./ig;   //.:匹配除換行符外的任意字符
var  reg2  =  /[a-z0-9]/g;   //匹配括號中的字符集中的任意字符,只能匹配一個
var  reg3  =  /[^A-Z0-9]/;   //匹配非括號中的字符集中的任意字符,只能匹配一個
var  reg4  =  /\d/;         //匹配數字
var  reg5  =  /\D/;       //匹配非數字，同[^0-9]相同
var  reg6  =  /\w/;       //匹配字母和數字及_
var  reg7  =  /\W/;       //匹配非字母和數字及_
console.log(reg1.exec(str));
console.log(reg2.exec(str));
console.log(reg3.exec(str));
console.log(reg4.exec(str));
console.log(reg5.exec(str));
console.log(reg6.exec(str));
console.log(reg7.exec(str));
var  reg1  =  /k[0-9]?/;     //x?:匹配0個或1個x
var  str  =  'lk8ll';
console.log(reg1.exec(str));
var  reg2  =  /[a-z]*/;       //x*:匹配0個或任意多個x
var  str1  ='lelloworld';
console.log(reg2.exec(str1));
var  reg3  =  /abc+bnh/         //X+:匹配至少一個x
var  str3  =  'nhabbnhkkk';
console.log(reg3.exec(str3));
var  reg4  =  /g(og)+le/;     //()括起來就代表一個整體
var  str4  =  'gogle';
console.log(reg4.exec(str4));
var  reg5  =  /[0-9]{4,11}/           //x{m,n}  匹配最少m個、最多n個x
var  str5  =  '123456767';
console.log(reg5.test(str5));
var  reg6  =  /google|baidu/         //this|where|logo:匹配this或where或logo中任意一個
var  str6  =  '谷歌baidu很牛逼';
console.log(reg6.exec(str6));

var  reg  =  /g...gle/;
var  str  =  'google';
console.log(reg.test(str));
//.匹配除換行符外的任意字符,*匹配0個或多個g;
var  reg  =  /g.*/;
var  str  =  'google';
console.log(reg.exec(str));
//  g  a-zA-Z任意多個gle  ggle
var  reg  =  /g[a-zA-Z_]*gle/;
var  str  =  'g123ggle';
console.log(reg.exec(str));
//  匹配gg  不在0-9中匹配任意多個,gle  null;
var  reg  =  /gg[^0-9]*gle/;
var  str  =  'google';
console.log(reg.exec(str));
//  a-z  A-Z至少匹配一個;
var  reg  =  /[a-z][A-Z]+/;
var  str  =  'gOoGLE';
console.log(reg.exec(str));
//  匹配數字字母以及_匹配0個或任意多個  gle
var  reg  =  /\W*gle/;
var  str  =  'google';
console.log(reg.exec(str));
//  google  匹配數字0個或任意多個;
var  reg  =  /google\d*/;
var  str  =  'google';
console.log(reg.exec(str));
//  匹配非數字至少4個最多8個;
var  reg  =  /\D{4,8}/;
var  str  =  'goo&()_';
console.log(reg.exec(str));
//  goo匹配空白字符,空格  製表符和換行符0個或任意多個;
var  reg  =  /goo\s*gle/;
var  str  =  'goo\n      gle' ;
console.log(reg.exec(str));
//  匹配至少2個最多3個google,至少1個a-z  ha;
var  reg  =  /(google){2,3}[a-z]+ha/;
var  str  =  'googlegoogleaha';
console.log(reg.exec(str));
//^不在[]裏面表示以某某開頭   $表示以某某結尾,googl  0-9匹配0個或任意多個,a-z匹配0個或任意多個;
var  reg1  =  /^googl[0-9]*[a-z]*$/
var  str1  =  'googl123a';
console.log(reg1.exec(str1));
//  \b文本開頭是否到邊界,google;
var  reg2  =  /\bgoogle/;
var  str2  =  'google';
console.log(reg2.exec(str2));
//{4}表示就是4個;{4,}表示至少四個,匹配至少1個a-z,匹配空白字符,空格  製表符和換行符,匹配4個0-9;
var  reg3  =  /^[a-z]+\s[0-9]{8}$/i;
var  str3  =  'google  20124567';
console.log(reg3.exec(str3));
//  匹配至少1個a-z,忽略大小寫;
var  reg4  =  /^[a-z]+/i;
var  str4  =  'google  2012';
console.log(reg4.exec(str4));
//匹配郵政編碼,郵政編碼是6位,第一位不能爲0
var  reg5  =  /^[1-9][0-9]{5}$/;
var  str5  =  '241234';
console.log(reg5.exec(str5));
//  放置壓縮文件,匹配字母和數字以及_,匹配除換行符外的任意字符,三種壓縮格式zip|rar|gz;
var  reg6  =  /^\w+\.(zip|rar|gz)/;
var  str6  =  '109.zip';
console.log(reg6.exec(str6));
//  0-9匹配0個或任意多個至少匹配1個oo,匹配除換行符外的任意字符,匹配至少一個gle;
//如果有分組,那麼用exec就會將分組的內容也打印出來
var  reg7  =  /[0-9]*(oo)\.(gle)/
var  str7  =  '223oo.gle';
console.log(reg7.exec(str7));
//[email protected]    [email protected]
//  0-9  a-z匹配至少1個@0-9  a-z至少匹配一個,匹配除換行符外的任意字符,匹配a-z至少2個最多3個;
var  reg8  =  /^[0-9a-z_]+@[0-9a-z_]+\.[a-z]{2,3}$/;
var  str8  =  '[email protected]';
console.log(reg8.exec(str8));

 

 

 

 

 

17.BOM節點操作:

//  BOM操作:
//  BOM沒有標準,BOM本身缺少規範;瀏覽器共有的對象就是規範;window對象處於javascript最頂層;
//  prompt彈出框,提示文本;
     prompt('我就嘗試下');
//  alert  彈出框,警告框;
     alert('這是一個警告框');
//  confirm確認操作;
     confirm('請確認');
//  window.print  調出打印機;
     window.print('調出打印機');

//  open打開一個新的窗口,攜帶參數第一個是要打開的URL,第二個參數給打開的窗口起的名稱;
//  也可以設置寬高,上  左位置;
     window.open('http://www.baidu.com','這是窗口','width=200px,height=100px,top=20px,left=10px');
//  screenLeft,screenTopa拿到屏幕左邊和上面的距離,火狐支持;
//  火狐支持screenX和screenY這兩種格式;
     var  a  =  window.screenLeft;
     var  b  =  window.screenTop;
     var  c  =  window.screenX;
     var  d  =  window.screenY;
//  兼容版本:
     var  e  =  (typeof  screenLeft  ==  'number')  ?  screenLeft  :  screenX;
     var  f  =  (typeof  screenTop  ==  'numeber')  ?  screenTop  :  screenY;
     var  g  =  x+'+'+y;
//  獲取窗口大小,高度帶有狀態欄,這些屬性不兼容IE;
     console.log(innerWidth);
     console.log(innerHeight);
     console.log(outerWidth);
     console.log(outerHeight);

//  兼容IE
     console.log(documentElement.clientWidth);
     console.log(documentElement.clientHeight);
//  超時調用,處處某段時間間隔就調用一次
     var  num  =  0;
     var  timer  =  setInterval(function  ()  {
         num++ ;
         document.write(num);
         if(num  ==  '5'){
             //  關閉定時器;
             clearInterval(timer);
         }
     } ,1000);
     console.log(timer);
//  location  port端口號,assign網頁重定向,reload重源頭加載,replace替換當前的網址,reload一直加載;
     location.assign('http://www.baidu.com');
     location.replace('http://www.guge.com');
     location.reload();
     location.port(80);

//  封裝元素的訪問方式:
     //  類名封裝;
     function  getClass(classname)  {
         //  返回數組;
         var  arr  =  [];
         //  獲取所有的元素;
         var  dom  =  document.getElementsByTagName('*');
         //  遍歷獲取每一個元素;
         for(var  i=0;i<dom.length;i++){
             //  分割每一個類名,並轉換爲數組,split('')拆分;
             var  texarr  =  dom[i].className.split('');
             for(var  j  =0;j<texarr.length;j++){
                 //  遍歷拆分的數組;
                 if(texarr[j]  ==  classname){
                     //  每一個拆分的classname轉換爲數組;
                     arr.push(dom[i]);
                 }
             }
         }
         return  arr;       //  輸出數組;
     }

//  通用封裝:
     function  $(str)  {
         //  儲存了參數str中的第一個字符;
         var  s  =  str.charAt(0);
         //  儲存了前綴以後的所有字符:
         var  ss  =  str.substr(1);
         switch(s){
             case  '#':
                 return  document.getElementById(ss);
                 break;
             case  '.':
                 return  getClass(ss);
                 break;
             default:
                 return  document.getElementsByTagName(str);
                 break;
         }
     }
     $('#demo').style.background  =  'red';
     var  divone  =  $('.one');
     console.log(divone);
     for(var  i=0;i<divone.length;i++){
         divone[i].style. backgroundcolor  =  'red';
     }
     $('#but').style.backgroundColor  =  'yellow';