廢話不說，直接上圖
一 js的基本操作
(1)js 的六種數據類型
var n4;//六種數據類型用typeof來確定類型，Null類型的用typeof是不行的，這個是特殊 alert(typeof (n4)); var n1 = 123; alert(typeof n1); var n2 = "hahaha"; alert(typeof (n2)); var n3 = true; alert(typeof (n3)); var n5 = null; alert(String(n5)); var n6 = new Object(); alert(typeof (n6));
（2）是否相等的兩種判斷'=='和'===
var n1 = null; var n2; alert(Boolean(n1)); alert(Boolean(n2)); if (n1 === n2) {//這里雙等號和三等號是不同的，兩個等號會將值進行類型轉換再判斷，三個等號不僅判斷值還判斷數據類型 alert("相等"); } else { alert("不相等"); } var n3; //判斷一個變量或者對象是不是可以使用 if (typeof (n3) != undefined && n3 != null) { alert("可以使用"); } else { alert("不能使用"); }
(3)類型轉換的問題
//類型轉換， parseInt和parseFloat var n = '10'; alert(parseInt(n) + 90); var n = '10skdfj'; alert(parseInt(n)); var n = '2.513'; alert(parseFloat(n)); var n = 'sdf'; alert(parseInt(n));//如果是不能轉換的類型，即返回NAN，就是not a number //---------------判斷是否轉換成功 var n = 'string'; if (isNaN(parseInt(n))) { alert('不可以使用'); } else { alert('可以使用'); } // ------------------測試調試 var sum = 0; for (var i = 0; i < 6; i++) { sum += i; } alert(sum.toString());
（4）js中的方法
// 訪問修飾符+返回值類型+方法名+【參數列表】 C#中的方法聲明 // public void Show(string str) //關鍵字function +方法名+【參數列表(無須聲明參數類型)】 js中的方法聲明（注意沒有返回值類型） function func(n) { alert('嘎嘎'); } function func() { alert('不要鬧'); } func('哈哈');//js中沒有方法的重載這么一說，就是瀏覽器從上到下一行一行解析
（5）最簡單的面向對象，
function Person() { } var per = new Person(); per.name = '張三'; per.Sayhello = function () { alert('大家好，我叫' + per.name); } alert(per.name); per.Sayhello(); //===================// function Person(name, age) { this.name = name; this.age = age; this.Sayhello = function () { alert('大家好，我叫' + this.name + '我今年' + this.age + '歲了'); } } var per = new Person('李四', 51); alert(per.name); per.Sayhello();
（6）字符串對象的幾個常用方法
// 1，字符串.length表示字符串的長度 var str = new String('嘎嘎'); alert(str+str.length); var str = '我是字符串的內容'; alert(str.length); alert('今天天氣好晴朗處處好風光'.length); // 2,字符串.charAt();表示獲取指定索引位置的字符串 var char = '今天天氣好晴朗處處好風光'; alert(char.charAt(6)); // 3,indexOf('字符串',startIndex)方法，獲取指定字符串第一次出現的位置,找不到就放回-1 var str = '啦啦啦德瑪西亞哦'; alert(str.indexOf('西',6)); // 4,spilt('字符串',limit);根據分隔符把字符串返回為一個數組 var str = '今|天|天|氣|好|晴|朗'; var result = str.split('|');//接受數組不需要循環，但是一個一個輸出需要循環，否則就一次行輸出，用逗號隔開 alert(result); for (var i = 0; i < result.length; i++) { alert(result[i]); } //5,spilt切割字符串可以用正則表達式 var str = 'a☆b★c#d'; alert(str.split(/☆|★|#/)); //6,substr和substring，都是從索引位置開始切割，第二個參數有所不同,一個是切割多少個，一個是切割到哪個索引 var str = '今天天氣好晴朗處處好風光'; alert(str.substr(3, 2)); alert(str.substring(3, 5)); //7,touppercase和tolowercase 轉換大小寫 var str = 'i need you '; alert(str.toUpperCase());
二 DOM操作
整個頁面或者說窗口就是一個window對象
所以頁面的一些元素都可以通過window點出來
1.
頁面的點擊事件有兩個,
body的onclick----------只限於在body中點擊才能觸發
document.onclick----------整個頁面內點擊都可以觸發
2.
動態設置事件有兩種方式:
(1)
直接在某個標簽中寫js代碼,如:
<input type="button" onclick="js代碼" />
(2)
通過document.getElementById('id').onclick=匿名函數;在這個匿名函數中寫要執行的代碼;
3.
window對象的屬性和方法:
一般情況,使用window的屬性或者方法可以省略window,直接寫方法名就可以;如:
window.alert('我好帥');----我們可以省略window;
confirm('彈出內容');----這個方法返回bool類型,可以通過這個方法盡心彈框
window.navigate(url);----這個方法的意思是指重新導航;---------------IE和空中支持
window.location.href=url;-----這個可以直接賦值,表示的是去這個網址-所有瀏覽器都支持
window.location.reload();----這個方法相當於刷新
4.
js中的兩個計時器
setInterval(code,delay);這個計時器指的是每隔多長時間執行一次里面的代碼
setTimeout(code,delay);這個計時器指的是隔多長時間就執行一次
兩個計時器都是方法,返回值都是他們本身的id,有了id就可以銷毀計時器
clearInterval(intervalId);---是第一個計時器的銷毀方法
clearTimeout(setTimeoutId);----是清除第二個計時器的方法
5.
doucument的事件三個
onload（頁面加載后觸發）---常用
onunload（頁面卸載后觸發）--不常用
onbeforeunload（頁面卸載前觸發）---經常用
6.
window.event----一般兼容IE,火狐不兼容
window.event.altKey---檢測用戶按下的是alt鍵
window.event.ctrlKey---檢測用戶按下的是ctrl鍵
window.event.shiftKey--檢測用戶按下的是shift鍵
window.event.clientX---發生事件的時候鼠標在客戶區的橫坐標
window.event.clientY---發生事件的時候鼠標在客戶區的縱坐標
window.event.screenX---發生事件時鼠標在屏幕上的橫坐標
window.event.screenY---發生事件時鼠標在屏幕上的縱坐標
window.event.offsetX---發生事件時鼠標相對於事件源的橫坐標
window.event.offsetY---發生事件時鼠標相對於事件源的縱坐標
window.event.returnValue---值為false的時候指的是取消事件的處理和return false一樣(后者常用,兼容問題)
window.event.srcElement---事件源
window.event.button---鼠標按鍵的值
window.clipboardData.setData('text',值);---設置剪切板內容
window.clipboardData.getData('text');---獲得剪切板內容
在火狐里都可以用參數的方式
jquery中全部傳參數
body.oncopy---復制的事件
body.onpaste---粘貼的事件
案例一：DOM操作粘貼板
window.onload = function () { //復制內容 document.body.oncopy = function () { setTimeout(function () { var txt = clipboardData.getData('text') + '本文作者李白';//為粘貼板中的內容加標注，注意粘貼板對象clipboardData沒有智能提示，別寫錯了 clipboardData.setData('text', txt); }, 100); } }
案例二：DOM動態創建元素
window.onload = function () { document.getElementById('btnCreate').onclick = function () {//這里一開始寫成了click，click和onclick的區別是onclick才是給這個按鈕注冊click事件 //創建一個層，也就是一個DOM對象 var divObj = document.createElement('div'); //為創建的這個層設置屬性 divObj.style.height = "300px"; divObj.style.width = "500px"; divObj.style.backgroundColor = "red"; divObj.id = 'dv1'; //把這個層添加到body里面 document.body.appendChild(divObj); } document.getElementById('btnDelete').onclick = function () { var Div = document.getElementById('dv1'); document.body.removeChild(Div); //這行代碼就是刪除一個body里面的元素 } var i = 0; document.getElementById('btnAdd').onclick = function () { i++; var inputObj = document.createElement('input'); inputObj.type = 'button'; inputObj.value = '我是新來的' + i; //獲取當前的元素，就是當前的層 var newObj = document.getElementById('dv1'); // newObj.appendChild(inputObj); newObj.insertBefore(inputObj, newObj.firstChild); } }
案例三： DOM方式態添加表格超鏈接
window.onload = function () { document.getElementById('btn').onclick = function () { var dic = { "百度": "http://www.baidu.com", "傳智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" }; //創建名字和網址的超鏈接 var tb = document.createElement('table'); //創建一個表 tb.border = '1'; for (var key in dic) { //創建行 var trObj = document.createElement('tr'); //創建單元格 var td1 = document.createElement('td'); if (typeof (td1.innerText) == 'string') { td1.innerText = key; //為單元格的文字賦值 所以是 td1.innerText,這個是IE里面的 } else { td1.textContent = key; //如果td1.innerText的類型不是string 那么就是在火狐瀏覽器里面，就用td1.textContent } var td2 = document.createElement('td'); td2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>'; //在單元格里面創建一個超鏈接，所以用td2.innerHTML trObj.appendChild(td1); //下面就是把單元格加到行中，把行加到表中，把表加到body里面 trObj.appendChild(td2); tb.appendChild(trObj); } document.body.appendChild(tb); } }
window.onload = function () { document.getElementById('btn').onclick = function () { var dic = { "百度": "http://www.baidu.com", "傳智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" }; var tb = document.createElement('table'); tb.border = '1'; for (var key in dic) { var tr = tb.insertRow(-1); var td1 = tr.insertCell(-1); td1.innerText = key; var td2 = tr.insertCell(-1); td2.innerHTML = '<a href="' + dic[key] + '">' + key + '<a/>'; } document.body.appendChild(tb); } }
案例四：點擊超鏈接變色
//注意這類功能都是在click中把兄弟元素的屬性重新遍歷設置一遍 window.onload = function () { var as = document.getElementsByTagName('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function () { for (var j = 0; j < as.length; j++) { as[j].style.backgroundColor = ''; } this.style.backgroundColor = 'red'; return false; } } }
案例五： 小圖顯示大圖
window.onload = function () { var datas = { 'mv/1-1.jpg': ["mv/1.jpg", "老牛", "163cm"], 'mv/2-1.jpg': ["mv/2.jpg", "老馬", "165cm"], 'mv/3-1.jpg': ["mv/3.jpg", "老蔣", "150cm"] }; var dvs = document.getElementById('dvSmall'); for (var key in datas) { var imageObj = document.createElement('image'); imageObj.src = key; imageObj.setAttribute('k', key); imageObj.style.marginLeft = '10px'; imageObj.style.cursor = 'pointer'; //鼠標進入的時候顯示小手的樣子 dvs.appendChild(imageObj); imageObj.onmouseover = function () { var dvB = document.getElementById('dvBig'); //脫離文檔流，確定位置，顯示 dvB.style.position = 'absolute'; dvB.style.left = this.offsetLeft + 'px'; dvB.style.top = this.offsetTop + this.offsetHeight + 'px'; dvB.style.display = 'block'; //把鍵值對里面的值（這里是一個數組）取出來 var values = datas[this.getAttribute('k')]; //確定顯示的內容 document.getElementById('imBig').src = values[0]; document.getElementById('spName').innerText = values[1]; document.getElementById('spHeight').innerText = values[2]; } //鼠標離開的時候大圖隱藏 imageObj.onmouseout = function () { if (document.getElementById('dvBig').style.display=='block') { document.getElementById('dvBig').style.display = 'none' } } } };
<body> <div id="dvSmall"> </div> <div id="dvBig" style="background-color: Orange; border: 1px solid green; width: 630px; display: none;"> 大頭像:<br /> <img id="imBig" src="#" alt="Alternate Text" /> 姓名:<span id="spName"></span><br /> 身高:<span id="spHeight"></span> </div> </body>
案例六：DOM下列表的高亮顯示
window.onload = function () { var uls = document.getElementById('u').getElementsByTagName('li'); for (var i = 0; i < uls.length; i++) { uls[i].onmouseover = function () { for (var j = 0; j < uls.length; j++) { uls[j].style.backgroundColor = ''; } this.style.backgroundColor = 'red'; //這里用this，不能用uls[i],因為這個是uls[i]注冊的時間里面調用到自己 } uls[i].onclick = function () { for (var j = 0; j < uls.length; j++) { this.style.fontSize = ''; } this.style.fontSize = '50px'; } } }
案例七：復習正則表達式
// var s = '111@sdf.com'; // var regex = /.+@.+/; // var mat = s.match(regex); // alert(mat); 字符串的.match // var msg = '楊中科：13888888888蘇坤：13999999999小胡：133888888888'; // var result = msg.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3'); var msg = ' 今天天氣好晴朗處處好風光 '; function trimString(s) { return s.replace(/^\s+/, '').replace(/\s+$/,'') ;//^表示匹配輸入字符串的開始位置，$表示匹配字符串的結束位置 } //先切前半部分，再切后面，jQuery源碼里面就是這么寫的 var result = trimString(msg); alert(result);
案例八：用鍵盤抬起事件和正則表達式實現密碼強度
<script type="text/javascript"> window.onload = function () { var tds = document.getElementById('tb').getElementsByTagName('td'); document.getElementById('txt').onkeyup = function () {//onkeyup 就是鍵盤抬起的事件 for (var i = 0; i < tds.length; i++) { tds[i].style.backgroundColor = 'gray'; } var result = chechPwd(this.value); if (this.value.length > 0) { if (result <= 1) { tds[0].style.backgroundColor = 'red'; } else if (result == 2) { tds[0].style.backgroundColor = 'blue'; tds[1].style.backgroundColor = 'blue'; } else if (result == 3) { for (var i = 0; i < tds.length; i++) { tds[i].style.backgroundColor = 'green'; } } } } } function chechPwd(str) { var lvl = 0; if (str.match(/\d/)) { lvl++; } if (str.match(/[a-zA-Z]/)) { lvl++; } if (str.match(/^[0-9a-zA-Z]/)) { lvl++; } if (str.length < 6) { lvl--; } return lvl; } </script>
案例九：DOM下的省市聯動
window.onload = function () { var datas = { "吉林": ["長春", "四平", "松原"], "山東": ["青島", "濟南", "煙台"], "山西": ["大同", "太原", "運城"] }; var defult = '山東'; //把省份加載到第一個下拉框中 var s1 = document.getElementById('se1'); for (var key in datas) { var opt1 = document.createElement('option'); opt1.innerText = key; opt1.value = key; opt1.selected = key == defult ? true : false; s1.appendChild(opt1); } //把對應的城市加載到第二個下拉框中 var se2 = document.getElementById('se2'); for (var i = 0; i < datas[defult].length; i++) { var opt2 = document.createElement('option'); opt2.value = datas[defult][i]; opt2.innerText = datas[defult][i]; se2.appendChild(opt2); } //注冊一個第一個select的Change時間 se1.onchange = function () { while (se2.firstChild) { se2.removeChild(se2.firstChild);//用一個循環和removeChild來清空 } for (var i = 0; i < datas[this.value].length; i++) { var opt3 = document.createElement('option'); opt3.innerText = datas[this.value][i]; opt3.value = datas[this.value][i]; se2.appendChild(opt3); } }; }
案例十：DOM的權限管理
window.onload = function () { document.getElementById('toAllLeft').onclick = function () { allLeftToRight(document.getElementById('se1'), document.getElementById('se2')); }; document.getElementById('toAllRight').onclick = function () { allLeftToRight(document.getElementById('se2'), document.getElementById('se1')); }; function allLeftToRight(s1, s2) { var opts = s1.getElementsByTagName('option'); for (var i = opts.length - 1; i >= 0; i--) { s2.insertBefore(opts[i], s2.firstChild); //這里要注意 用的不是.appendchild } }; //=========================== document.getElementById('toRight').onclick = function () { LeftToRight(document.getElementById('se1'), document.getElementById('se2')); }; document.getElementById('toLeft').onclick = function () { LeftToRight(document.getElementById('se2'), document.getElementById('se1')); }; function LeftToRight(s1, s2) { var opts = s1.getElementsByTagName('option'); for (var i = 0; i < opts.length; i++) { if (opts[i].selected) { s2.appendChild(opts[i]); i--;//因為把select1里面的元素移動后 元素個數發生了變化，所以需要I-- } } } };
<body> <div style="margin-left: 400px; margin-top: 10px;"> <select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se1"> <option>添加</option> <option>刪除</option> <option>修改</option> <option>查詢</option> <option>打印</option> </select> <div style="width: 50px; float: left;"> <input type="button" name="name" value=">" style="width: 50px;" id="toRight" /> <input type="button" name="name" value="<" style="width: 50px;" id="toLeft" /> <input type="button" name="name" value=">>" style="width: 50px;" id="toAllLeft" /> <input type="button" name="name" value="<<" style="width: 50px;" id="toAllRight" /> </div> <select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se2"> </select> </div> </body>
下午繼續寫jQuery的總結，過年之前把這些東西都總結一下，希望自己的學習能慢慢進入正軌，希望新年快樂 ^_^