JavaScript(第二篇)Bom、Dom!!
阿新 • • 發佈:2018-12-16
1.js的組成
- ECMAScript:核心
- dom:文件物件模型
- bom:瀏覽器物件模型
2.js的引入方式
<script>
//js程式碼
</script>
<script type="text/javascript" src="js/myJs.js><script>
3.js變數和資料型別
var num = 1; 1. 變數名規範類同於java 2. 每句話結束建議寫分號 3. 單引號和雙引號都可以表示字串,主要用於區分。 var num = 1; //number num = "str"; //string num = true; //boolean var a; //undefined a=null; //null a=["aa","bb","cc"]; //array a={"name":"zs","age":12}; //object //提示框 //alert(typeof a); //alert(a[0]); alert(a.name); 型別轉換: var b = 1; var c = true; //true 1 false 0 //alert(b+c); //2 c = null; //null 0 //alert(b+c); var d; //alert(b+d); //NaN not a number var e = "abc"; alert(d+e);
4.運算子
- 算術運算子(除法保留小數)
- 數值運算子
- 比較運算子
給定x=5,下面的表格解釋了比較運算子
alert(a==b); //==比較內容
alert(a===b); //比較內容比較型別
- 邏輯運算子
- 三元運算子
var max = a > b? a:b
5.流程控制
for(var i in arr){
console.log(arr[i]);
}
6.函式
1)自定義函式
//無參無返回值函式宣告 function test(){ console.log("函式執行了"); } //函式呼叫 //test(); function calc(a,b){ return a + b; } var sum = calc(1,3); //console.log(sum); function calc2(a,b,c){ console.log(a+b); console.log(c); } //calc2(1,2); //calc2(1,2,3,4); (function(a,b){ console.log(a+b); })(1,2);
2)內建函式
console.log(parseInt(a)+parseInt(b)); console.log(parseFloat(a)+parseFloat(b)); var c = "abc"; var d = 1; console.log(isNaN(a)); d = "2+3*4"; console.log(eval(d)); //var jsObj = {"name":"zs","age":12}; //json(js物件字串形式) var json = '{"name":"zs","age":12}'; //將json轉換為js物件 //var obj = JSON.parse(json); //型別轉換 var obj = eval("("+json+")"); console.log(obj); parseInt():轉換字串為整型資料 parseFloat():轉換字串為浮點型資料 isNaN():判斷是否為非字串 eval():實現字串表示式的計算或者型別轉換
7.物件
面嚮物件語言,賦予了進行屬性和方法的擴充套件方式
String物件:字串
Array物件: 陣列
Date物件: 獲取時間
var date = new Date();
var year = date.getYear();
var year1 = date.getFullYear(); //完整年份
var mon = date.getMonth(); //月份 0-11
var dayofweek = date.getDay(); //星期 0-6
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var str = year1+"-"+(mon+1)+"-"+day+" "+hour+":"+min+":"+sec;
//console.log(str);
document.getElementById("div1").innerHTML = str;
8.Bom
控制瀏覽器行為。
Windows:控制視窗行為(開啟,關閉,提示框,視窗資訊獲取等)
console.log(window.innerHeight);
console.log(window.innerWidth);
//開啟新視窗
var newWindow =window.open("http://www.baidu.com","baidu","width=200px,height=200px,left=200px,top=200px");
//關閉視窗
newWindow.close();
var bool = confirm("確認刪除嗎?");
console.log(bool);
var name = prompt("請輸入您的姓名","張三");
console.log(name);
//只執行一次
var timeoutId = setTimeout(function(){
console.log("boom");
},2000);
//取消timeout
clearTimeout(timeoutId);
var i = 10;
var id = setInterval(function(){
i--;
console.log(i);
},1000);
clearInterval(id);
document:
封裝整個html文件的資訊。
Location:
封裝當前的url的資訊。
9.Dom
HTML DOM 定義了用於 HTML 的一系列標準的物件,以及訪問和處理 HTML 文件的標準方法。
- 獲取節點
//通過id值獲取元素節點
var oDiv = document.getElementById("div1");
//console.log(oDiv);
var aDiv = document.getElementsByTagName("div");
//console.log(aDiv[0]);
//通過class值獲取元素
document.getElementsByClassName("");
//通過name屬性值獲取
document.getElementsByName();
- 獲取/修改元素節點文字
//獲取文字內容
var val = oDiv.innerHTML;
console.log(val);
//設定內容
oDiv.innerHTML="哈哈";
var val2 = oDiv.innerText;
console.log(val2);
oDiv.innerText="aa";
- 獲取/修改元素節點屬性
節點物件.attrName=值
Class特殊:
oDiv.className="green";
- 修改元素的樣式
節點物件.style.樣式=值
oDiv.style.fontSize="20px";
10.事件
- ui事件
load事件: 頁面載入事件
scroll事件: 文件滾動事件
- 滑鼠事件
單擊事件: click
雙擊事件: dblclick
滑鼠移過事件: mouseover
滑鼠移出事件: mouseout
- 鍵盤事件
onkeydown
onkeyup
onkeypress
- 焦點事件
onfocus
onblur
- 其他事件
onchange