JS語法基礎

js聲明

<!--在head標籤中使用script標籤進行js代碼域聲明-->
<script type="text/javascript" language="JavaScript"></script>

<!--引入外部聲明的js文件-->
<script src="" type="text/javascript" charset="utf-8"></script>

變量

var=12|3.14|"aa"|'bb'|true|new Date()

變量名區分大小寫

數據類型

查看數據類型 typeof a

number，string，boolean，object，undefined(undefined類型)，null(object類型)

變量轉換

Number(a)，轉換爲數值類型，失敗返回NaN(number類型)

Boolean(a)，轉布爾，非零值返回true，0值，null，未定義，空字符串返回false

算術運算符

除了+號，碰到字符串，進行字符串鏈接

其餘運算符都會先將運算對象轉換成數值類型在進行計算

比較運算符中有數字時，也會先將其餘類型轉成數值類型

===必須類型一致，值一致

null == undefined，可是不全等

數組

聲明方式

var arr1 = new Array();     //聲明空數組
arr1[0] = "abc";
var arr2 = new Array(5);    //聲明指定長度的數組
alert(arr2.length);
var arr3 = [1, 2, 3];
var arr4 = new Array([5, 6]);   //直接給初始值
var arr5 = [];  //空數組
arr5[0] = 0;
arr5[10] = 10;
alert(arr5.length);     //11
// 數組長度看最大的下標，下標只能是數字，下標不存在的值是undefined

//遍歷
for(;;)
for(var i in arr)

練習

function test(btn){
   // var num = document.getElementById("aaa").value;
    var num = btn.value;
    switch(num) {
        case "=":
            document.getElementById("inp").value = eval(document.getElementById("inp").value);
            break;
        case "c":
            document.getElementById("inp").value = "";
            break;
        default:
            document.getElementById("inp").value += btn.value;
            break;
    }
}
<input type="text" id="inp" value="" />
<input type="button" id="aaa" value="1" onclick="test(this)" />

數組經常使用操做

合併：str.concat(b, c);

數組轉字符串：str.join(「-」); //參數是分隔符

尾部出棧：str.pop();

尾部入棧：str.push("hello");

反轉：str.reverse();

頭部出棧：str.shift();

頭部入棧：str.unshift("aa");

排序：sort()；

刪除並可選插入：splice()；

JS函數

//js裏函數是對象
function foo(a1, a2) {alert("函數聲明1")}；
var test = new Function("a1", "a2", "alert('函數聲明2')")；//最後一個是函數體
var bar = function(a1, a2) {};

類

function Person(name, age) {//聲明和構造二合一了
    this.name = name;
    this.age = age;
    this.test = function(a) {
        alert(a);
    }
}
var p1 = new Person("張三", 20);
alert(p1.name);
p1.address = "北京市";
alert(p1.address);  //類對象裏的內容，能夠動態加

//使用prototype
Person.prototype.test = function(){alert("哈哈");};   //類對象公有的，優先找本對象本身的

function User(uname, pwd) {
    this.uname = uname;
    this.pwd = pwd;
}
User.prototype.goo = function(){alert("goo")};
Person.prototype.user = new User();
p1.user.goo();      //變相實現繼承的功能
Person.prototype = new User();
p1.goo();

對象

//臨時建立一個對象，來自定義屬性存儲數據,通常用來存數據
var obj = new Object();
obj.name = "張三";
obj.age = "25";

經常使用方法和對象

String對象

toUpperCase
toLowerCase
substr  //指定開始位置和長度
strstring   //指定開始位置和結束位置
indexOf //指定字符第一次出現的位置
LastIndexOf     //最後一次

Date對象

var d =new Date();
d.getYear();

Math對象

random  //[0, 1）
floor   //向下取整

Gloabal對象

eval    //檢查js代碼並執行
isNaN   //
parseInt    //

JS事件

onclick     //單擊
ondbclick   //雙擊
onmouseover //鼠標進入
onmousemove //鼠標移動
onmouseout  //鼠標移出
onkeydown   //鍵盤按下
onkeyup     //鍵盤彈起
onfocus     //獲取焦點
onblur      //失去焦點
onload      //頁面加載，頁面加載成功以後，主要用來初始化頁面數據，body

onchange    //值改變事件，select

事件衝突

例如單雙擊事件之間

事件阻斷

事件的函數若是返回的是false，那麼標籤自己的功能，如超連接，form表單提交的動做會被阻斷

超連接執行js函數

<a href="javascript:testfunc()">調動js函數</a>

window對象

BOM瀏覽器對象模型的具體實現，JS調用瀏覽器自己的功能

window對象不用new，直接進行使用便可。window關鍵字能夠省略不寫

框體方法

window.alert("我是警告框");  //警告框，無返回值
window.confirm("肯定要刪除麼？");  //確認框，返回boolean
var name = window.prompt("請輸入暱稱:"); //提示框，返回輸入的字符串或null

定時器和間隔器

var id1 = setTimeout(func, 3000);//定時執行，指定時間後執行指定函數，參數1函數對象，參數2時間毫秒
var id2 = setInterval(func, 2000);  //間隔執行，間隔固定時間執行
cleanTimeout(id1);      //中止執行的定時器
cleanInterval(id2);     //中止指定的間隔器

子頁面

//從父頁面，打開子頁面
open('頁面.html','newwindow', 'width=600, height, left=100px, top, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')

window.setInternal(function(){
    var span = document.getElementById("timeSpan");
    span.innerHTML = span.innerHTML - 1;
    // 關閉子頁面
    if (span.innerHTML == 0) {
        window.close();     //只能關閉window.open打開的頁面
    }
}, 1000);

window.openser.testfunc();//子頁面調用父頁面的方法。能夠在父頁面搞提示語，能夠從新加載父頁面的資源
<b> 歡迎訪問，頁面將在<span id="timeSpan" style="color:red; font-size:30px">5</span>後關閉</b>

window對象經常使用屬性

//地址欄屬性
window.location.href="http://www.baidu.com";    //跳轉
window.location.reload();       //刷新
//歷史記錄屬性
window.history.forward();       //前進
window.history.back();  //後退
window.history.go;      //跳轉到指定歷史記錄頁面，0是當前頁面
//屏幕屬性
window.screen.width;    //分辨率
window.screen.height;
//瀏覽器配置屬性
window.navigator.userAgent;     //瀏覽器版本信息
//主體面板屬性(document)

document對象

瀏覽器對外提供的一個對象，支持js操做HTML文檔，此對象封存了HTML文檔的全部信息。

document獲取元素對象

• 直接獲取

var a = window.document.getElementById("uname");//id
var fav = window.document.getElementsByName("fav");//name,返回數組
var input = window.document.getElementsByTagName("input");//標籤名，返回數組
var xx = window.document.getElementsByClassName("common");//class

• 間接獲取

//父子關係
var showdiv = document.getElementById("showdiv");   //獲取父級元素對象
var childs = showdiv.childNodes;        //獲取全部的子元素對象數組

//子父關係
var inp = document.getElementById("inp");   //獲取子元素對象
var div = showdiv.parentNode;       //獲取父元素

//兄弟關係
var inp = document.getElementById("inp");   //獲取元素對象
var preEle = inp.previosSibling;    //上一個元素
var nextEle = inp.nextSibling;      //下一個元素

document操做元素屬性

var inp = document.getElementById("unmme");
alert(inp.type + ":" + inp.name + ":" + inp.id + ":" + inp.value);  //獲取固有屬性
inp.value = "jealous";  //修改固有屬性
inp.getAttribute("customized_attribute");
inp.setAttribute("customized_attribute", "classic");

document操做元素內容和樣式

alert(div.innerHTML);   //獲取元素對象div的全部內容，包括HTML標籤
div.innerTEXT;      //獲取元素對象div的文本內容，不包括HTML標籤

showdiv.style.backgroundColor="#FFA500";    //修改元素style屬性中的樣式

document操做元素的文檔結構

showdiv.innerHTML = showdiv.innerHTML + "<div><input type='file' value=''/><input type='button' value='刪除' onclick='delInp(this)'/></div>"; //div增長內容

function delInp(btn) {
    var showdiv = getElementById("showdiv");
    var cdiv = btn.parentNode;  //input元素對象的父節點
    showdiv.removeChild(cdiv);  //父div刪除子div
}


var showdiv = document.getElementById("showdiv");
var inp = document.createElement("input");
inp.type = "file";
var btn = document.createElement("input");
btn.tyle = "button";
btn.value = "刪除"；
btn.onclick = function(){
    showdiv.removeChild(inp);
    showdiv.removeChild(btn);
    showdiv.removeChild(br);
}
var br = document.createElement("br");
//將建立的元素放到div裏面
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);

JS操做form表單

//獲取form表單對象
var fm = document.getElementById("fm");

//直接經過name屬性值
var frm = document.frm;

//獲取form表單元素對象集合
fm.elements.length
//form表單經常使用方法
fm.submit();
fm.reset();
//表單屬性操做
fm.action = "http://www.baidu.com/s";
fm.method = "GET";
//表單元素通用屬性
readonly="readonly";    //數據不可更改，可是能夠提交
disabled="disabled";    //不能進行任何操做，數據不會提交

操做表格

//刪除行
function delRow(btn) {
    var ta =document.getElementById("ta");  //獲取表格對象
    vat tr = btn.parentNode.parentNode;     //獲取要刪除的行對象
    ta.deleteRow(tr.rowIndex);
}

//修改行內容
function updateRow(){
    var cell = document.getElementById("cell");
    cell.innerHTML="<input type='text' value='" + cell.innerHTML + "' onblur='updateRow2(this)'/>"; //修改單元格內容
}

function updateRow2(inp) {
    var cell = document.getElementById("cell");
    cell.innerHTML = inp.value; //失去焦點時保存數值
}

// 添加行
function addRow() {
    var ta = document.getElementById("ta"); //獲取表格對象
    var tr = ta.insertRow(1);
    var cell0 = tr.insertCell(0);
    cell0.innerHTML = "<input type='checkbox' name = 'chk'/>";
    var cell1 = tr.insertCell(1);
    cell1.innerHTML = getElementById("uname").value;
    ...
}
    
// 複製行
function copyRow() {
    tr.innerHTML = ta.row[i].innerHTML;
}