Javascript 基礎知識學習(四)

這裏接着前面一篇繼續!
Javascript中的全部全部事物都是對象:字符串、數值、數組、函數·····
每一個對象都有本身的屬性和方法,
JS可以自定義對象: 在第七點是相關面向對象的知識點。css

<script> //直接建立對象 var people={ 
 
   
		name: "ning",
		age: 10,
	}; //經過函數建立對象 function people(name.age){ 
 
   
		this.name=name;
		this.age=age;
	}
	var man=new people("ning",10);
</script>

4、JS內置對象

4.1 String字符串對象

方法名 描述
charAt(index) 返回指定位置的字符,從0開始
charCodeAt(index) 返回指定位置的字符串ASCII編碼
String.fromCharCode(value) 返回指ASCII碼對應的字符串
indexof(searchStr),indexof(searchStr,fromIndex) 返回某個指定的字符串值在字符串中首次出現的位置
split(delimeter),split(delimeter,Howmany) 用於把一個字符串分割成字符串數組
substring(start),substring(start,stop) 提取兩個下標之間的字符
toLowerCase() 把字符串轉換成小寫
toUpperCase() 把字符串轉換成大寫
trim() 返回去除字符串兩端的空格後的字符串

4.2 Array數組對象

方法名 描述
concat(array1,array2···) 將兩個或者多個字符串合併成一個
indexOf(value) 返回value在字符串中第一次出現的索引號
join(),join(separator) 將數組所有元素組成一個字符串,缺省用逗號隔開
lastIndexOf(value) 返回value在字符串中最後一次出現的索引號
pop() 從數組中刪除最後一個元素
push(value1,value2···) 在數組尾部追加一個或多個元素
reverse() 反轉數組元素的順序
shift() 把數組第一個元素刪除並返回第一個元素值
slice(startIndex),slice(startIndex,endIndex) 從數組中返回一個起點到終點的子數組,返回不含endIndex
splice(index,count,value1,value2···) 從數組中刪除從index開始的count個元素,並用新元素來代替
sort() 對數組元素進行排序
toString() 將數組元素轉換成字符串,用逗號隔開
unshift(value1,value2···) 向數組的開頭添加一個或更多元素,並返回新的長度

4.3 Date日期對象

var date=new Date(); //獲取當前時間html

方法名 描述
getFullYear() 獲取年份
getTime() 獲取毫秒
setFullYear() 設置具體日期
getDay() 獲取星期
//首先必定要建立對象
var today=new date();  //獲取當前時間
var h=today.getHours(); //獲取小時
var m=today.getMinutes();//獲取分鐘
var s=today.getseconds();//獲取秒

4.4 Math工具函數

方法 描述
Math.PI 圓周率
Math.random() 返回一個[0,1)的數
Math.floot(x) 向下取整
Math.sin(x),cos(x),tan(x) 三角函數
Math.asin(x),acos(x),atan(x) 反三角函數
Math.atan2(y,x) 返回對應的角度(-PI,PI)
Math.sqrt(x) 算術平方根
Math.round() 四捨五入
Math.abs() 取絕對值

5、JS-DOM對象

5.1 DOM對象的屬性

屬性 描述
classNama 元素的class屬性
id 元素的id屬性
innerHTML 元素中的HTML標記和內容
style 表示元素樣式屬性的對象
tagName 元素的HTML標籤,大寫字母表示
checked 單選或複選按鈕是否被選中
disabled 是否禁用Form控件
href 連接a的目標URL
src 圖像(img)的URL
value Rorm控件中的文本

5.2 DOM對象的方法

方法名 描述
getElementsByName() 獲取name
getElementsByTagName() 獲取元素
getAttribute() 獲取元素屬性
setAttribute() 設置元素屬性
childNodes() 訪問子節點
parentNode() 訪問父節點
createElement() 建立元素節點
createTextNode() 建立文本節點
insertBefore() 插入節點
removeChild() 刪除節點
offsetHeight() 網頁尺寸
scrollHeight 網頁尺寸

舉例:node

var anode=document.getElementById("id1");
  var text=anode.getAttribute("id"); //獲取當前元素的屬性
  alert(text);
  anode.setAttribute("id","id2");//設置id屬性爲id2

6、全局DOM對象

6.1 window對象

window對象是BOM的核心,window對象指的是當前的瀏覽器窗口。全局變量、函數、變量都會自動成爲window對象的成員。HTML DOM 的document也是window對象的屬性之一。web

方法名 描述
alert,confirm,prompt 彈出框
moveBy(dx,dy),moveTo(x,y) 將窗口移動到指定的位置,dx/dy是偏移量
resizeBy(dw,dh),risizeTo(x,y) 改變瀏覽器窗口
scrollBy(dx,dy),scroolTo(x,y) 將頁面滾動到特定點
alert(window.innerHeight,window.innerWidth); //瀏覽器窗口的內部高度和寬度
window.open("noindex.html","打開頁面的名字","height=100px,width=100px,top=100,left=100");//打開新的窗口
window.close();//關閉當前頁面

6.2 計時器

方法 描述
setInterval() 間隔指定的毫秒數不停的調用指定的函數
clearInterval() 中止setInterval()方法執行的函數代碼
setTimeout() 暫停指定毫秒數執行指定的代碼函數
clearTimeout() 中止setTimeout()方法執行的函數代碼
<p id="pid"></p> <script> var mytime = setInterval(function () { 
 
   
         showTime();
     },1000); //每隔1秒調用一次showTime函數 function showTime(){ 
 
   
         var pnode=document.getElementById("pid");
         var time=new Date();
         var t=time.toLocaleTimeString();
         pnode.innerHTML=t;
     }
     function stopTime(){ 
 
   
     clearInterval(myTime);//中止時間刷新
 	}
 </script>

在這裏插入圖片描述

6.3 History對象

window.history對象包含瀏覽器的歷史(url)的集合。數組

方法 描述
history.back() 功能與瀏覽器點擊後退按鈕效果同樣
histoty.forward() 功能與瀏覽器點擊向前效果同樣
history.go() 進入歷史的某個頁面
<a href="006.html">進入006</a> <button οnclick="goone()">按鈕</button> <script> function goone(){ 
 
   
            history.go(1);
        }
     </script>
<button οnclick="go()">按鈕6</button> <script> function go() { 
 
   
        history.back();
    }

6.4 Location對象

window.location對象用於獲取當前頁面的地址(URL),並把瀏覽器定向到新的頁面。瀏覽器

對象的屬性 描述
location.hostname 返回web主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回web主機端口
location.protocol 返回所使用的web協議(http://或https://)
location.href 返回當前頁面的URL
location.assign() 方法加載新的文檔
host 主機名和端口號

6.5 Screen對象

window.screen對象包含有關用戶屏幕的信息。dom

屬性 描述
screen.availWidth 可用的屏幕的寬度
screen.availHeight 可用屏幕的高度
screen.Height 屏幕高度
screen.Width 屏幕寬度

7、面向對象

//面向對象的操做 // 1.第一種 var people={ 
 
   
    name:"ning", age:10, say:function(){ 
 
   
        alert(this.name);
    }
};
alert(people.age);
people.say(); function person() { 
 
   
    this.name="ning";
    this.age=10; this.say=function () { 
 
   
        alert("如今22:29");
    }
}
var p=new person();
p.say();

//2. 第二種
/* function people(){ } people.prototype={ name:"ning", age: 10, say:function () { alert("我是第二種"); } } people.prototype.speak=function () { alert("說話"); } var p=new people(); p.say(); p.speak(); */

//3. 第三種 用function來模擬類繼承
/* function people() { } people.prototype.say=function () { alert("我是父類方法"); } function Student() { } Student.prototype=new people(); //Student繼承people var s=new Student(); //建立對象 s.say(); //可以調用父類的方法 var superSay=Student.prototype.say; Student.prototype.say=function () { superSay.call(this); alert("重寫父類的say方法"); } s.say();//這裏想要調用父類的Say方法,須要先用surperSay保存父類的say方法,而後在子類重寫的方法中調用superSay.call(this)便可 */


// 4.面向的思惟:封裝
/* //格式: (function () { //這裏填入上面的代碼進行封裝,好比對people封裝; window.XXX=XXX;//將這個XXX傳給最高的window對象,這樣就能夠經過window訪問封裝的內容了 }()) //封裝舉例: (function () { function people() { } people.prototype.say=function () { alert("我是父類方法"); } window.people=people; }) */


//4. 第四種   這裏沒有封裝,若是要封裝,方法和上面同樣;
/* function people() { var _this={}; _this.name="ning"; _this.age=10; return _this; } function Student() { var _this=people(); return _this; } var s=Student(); alert(s.age+s.name); //可以訪問父類屬性 */

在這裏插入圖片描述
在這裏插入圖片描述


JS的學習到這裏就差很少了,我以爲JS中比較難理解的部分就是面向對象,這裏方法有不少種,要徹底的掌握仍是要本身多試試,能夠把本身不理解或者似懂非懂的,經過實踐就可以得出結論了!說到底就是要多動手!svg

本文同步分享在 博客「戰 勝」(CSDN)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。函數

相關文章
相關標籤/搜索