//逗比小憨憨
/*第一章
*HTML引用js方法：
*1,外部引用：HTML外部引用js：<script src=”js/day1.js”></script>
*2,內部引用：<script> alert(“逗比小憨憨”);</script>
*3,元素事件引用：<input type=”button” value=”button” onclick=”alert(‘welcome’)” />
*/
/*第二章
* 變量定義：
* 1，變量由數字，字母，下劃線，$組成，且不能以數字開頭
* 2，變量不能使用系統關鍵詞
* 3變量定義語法：var 變量1=變量值,變量2=變量值,…;
*/
//舉例：
var a = 10;
document.write(a);//在頁面輸出一個內容
/*
* 數據類型：
* 1，基本數據類型：數字，字符串，布爾值，未定義值(undefined)，空值(null)
* 2，引用數據類型：數組，對象
* 其中：數字不區分整型和浮點型
*/
/*
* 運算符：
* 1，算術運算符:+ – * / % ++ —
* 加法運算規則：數字+數字=數字； 數字+字符串=字符串； 字符串+字符串=字符串
* 2，
*/
//舉例：
var a = 10;
var str = “逗比小憨憨”;
document.write(str + a, typeof(str + a));
/*
* 賦值運算符：= += -= *= /=
* 比較運算符：> < >= <= == !=
* 邏輯運算符：&& || !
* 條件運算符：var b=條件?表達式1:表達式2;//相當於C語言中三目運算符
*/
/*
* 表達式語句：一個分號對應一條語句
* 類型轉換：
* 1，隱式類型轉換（js自動完成的）
* 2，顯式類型轉換
* (1)字符串轉數字：Number(),parseInt(),parseFloat()（字符串必須是數字字符串）
* (2)數字轉字符串：toString
* (3)轉義字符：\’ \” \n等
* 3，注釋： 單行注釋 和 多行注釋 用法：與C語言注釋一樣
*/
//舉例：
document.write(“Number(\”123\”):” +Number(“123”) + “<br/>”);
document.write(parseInt(“+123.456px”));//第一個字符為+或-也進行轉換，從左往右取整數
document.write(parseFloat(“123.456px”));
var num = 123;
document.write(num.toString());
/*第三章
* 流程控制：
* 1，順序結構：程序代碼從上到下，從左到右依次執行
* 2，選擇結構：
* (1)if語句:（單重if）
* <1>:if(條件){語句塊}
* <2>:if(條件){語句塊} else{語句塊}
* <3>:if(條件){語句塊} else if(條件){語句塊} else{語句塊}
* (2)switch語句：
* switch(判斷值){ case 取值1:語句塊1;break;
* case 取值2:語句塊2;break;
* …
* default:語句塊n;break;}
* 3,循環結構：
* (1)while循環：
* while(條件){語句塊}
* (2)do…while循環：
* do{語句塊}while(條件);
* (3)for循環：
* for(初始化表達式;條件表達式;循環後操作表達式){語句塊}
*/
//舉例：計算1+2+3+…+100
var n = 1, sum = 0;
while(n <= 100)
{
sum += n;
n++;
}
document.write(sum);
//找出100-1000中的水仙花數
var str1 = “”;
for(var i = 100; i < 1000; i++)
{
var a = i / 100; //取百位上的數字
a = parseInt(a);
var b = i % 100 / 10; //取十位上的數字
b = parseInt(b);
var c = i % 10; //取個位上的數字
c = parseInt(c);
if(i == (a * a * a + b * b * b + c*c*c))
{
str1 = str1 + i + “、”;
}
}
document.write(“水仙花數有：” + str1);
//判斷一個數是不是整數
window.onload = function()
{
var n = 3.14159;
if(parseInt(n) == parseFloat(n))
{
document.write(n + “是整數”);
}
else
{
document.write(n + “不是整數”);
}
}
/*第四章
* 函數：
* 1，函數的定義:函數名命名規則遵循變量命名規則
* (1)沒有返回值的函數定義：function(參數1，參數2，…){語句塊}
* (2)有返回值的函數定義：function(參數1，參數2，…){語句塊; return 返回值}
* 2，變量的作用域：全局變量，局部變量
* 3，函數的調用：
* (1)直接調用：函數名(實參1,實參2,…);
* (2)在表達式中調用:例如：var sum = 函數名(實參1,…)
* (3)在超鏈接中調用：<a href=”javascript:函數名”> </a>
* (4)在事件中調用
* 4，函數嵌套
* 5，內置函數：比如：parseInt()
*/
//舉例：
function add_sum(e, f){
var sum = e + f;
document.write(sum);
}
add_sum(10, 20);
function test(){alert(“doubi”);}//供超鏈接調用測試的函數
/*第五章
* 1，js中對象分為：自定義對象和內置對象
* 2，常用的內置對象：字符串對象，數組對象，日期對象，數值對象
* 3，字符串對象相關知識點：
* 3.1 獲取字符串長度：語法： 字符串名.length
* 3.2大小寫轉換： 字符串名.toLowerCase(),字符串名.toUpperCase()
* 3.3獲取一個字符：字符串名.charAt(n)
* 3.4獲取字符串： 字符串名.substring(start, end)
* 3.5替換字符串： 字符串.replace(原字符串或正則表達式, 替換字符串)
* 3.6分割字符串： 字符串.split(“分隔符”)
* 3.7檢索字符串的位置： 字符串.indexOf(指定字符串),字符串.lastIndexOf(指定字符串)
* indexOf：返回首次出現的位置 lastIndexOf：返回最後一次出現的位置 沒找到返回-1
* 3.8刪除字符串中的一個字符：
*/
//舉例
var str = “This is doubixiaohanhan”;
document.write(“字符串長度為：” + str.length);//空格也計算在內
document.write(“轉為大寫字母:” + str.toUpperCase());
document.write(“轉為小寫字母:” + str.toLowerCase());
document.write(“獲取第3個字符: ” + str.charAt(3));//字符串下標從0開始計算
document.write(str.substring(8, 23));
document.write(str.replace(“doubixiaohanhan”, “hahahahahaha”));
var str1 = str.split(” “);//以空格作為分隔符
for(var i = 0; i < 3; i++)
document.write(str1[i]);
document.write(str.indexOf(“bi”));
document.write(str.lastIndexOf(“han”));
//找出字符串中所有字符b,不區分大小寫
var n = 0,str1 = “doubixiaohanhan”;
document.write(“源字符串:” + str1);
for(var j = 0; j < str1.length; j++)
{
var char = str1.charAt(j);
if(‘h’ == char.toLowerCase())
{
document.write(char);
n = n + 1;
}
}
document.write(“字符串中有” + n + “個字符h”);
//統計字符串中數字的個數
function get_number(str){
var num = 0, i = 0;
while(i < str.length){
var char = str.charAt(i);
if((char != ” “) && (!isNaN(char))){//isNaN:不是數字則返回true
num++;
}
i++;
}
alert(“執行完畢”);
return num;
}
var ret = get_number(“dou120k53KDDD6656”);
document.write(ret);
/*第六章：數組對象
* 1，數組的創建：（數組 中可以存儲不同類型的數據）
* (1)完整形式：var 數組名=new Array(元素1,元素2,..)
* (2)簡寫形式：var 數組名=[元素1,元素2,…]
* 2，數組的獲取：使用下標獲取，下標從0開始
* 3，數組的賦值：arr[i]=值;
* 4，獲取數組的長度： 數組名.length
* 5，截取數組： 數組名.slice(start, end)
* 6，為數組添加元素：
* (1)在數組開頭添加元素： 數組名.unshift(元素1,元素2,…)
* (2)在數組末尾添加元素： 數組名.push(元素1,元素2,…)
* (3)在數組首部刪除元素： 數組名.shift()
* (4)在數組末尾刪除元素： 數組名.pop()
* (5)數組排序： 升序：數組名.sort(up) 降序：數組名.sort(down)
* 其中：function up(a,b){return a-b;} function down(a,b){return b-a;}
* (6)數組顛倒順序： 數組名.reverse()
* (7)將數組元素連接成字符串： 數組名.join(“連接符”)
* (8)
*/
//舉例
var arr = [“js”,”jquery”];
document.write(arr + ‘\n’);
arr.unshift(“db”);
arr.push(“ab”);
document.write(arr);
arr.shift();
arr.pop();
document.write(arr);
var arr1 = [3, 6, 2, 5, 8, 1];
document.write(arr1);
function up(a,b){return a-b;}
arr1.sort(up);
document.write(arr1);
function down(a,b){return b-a}
arr1.sort(down);
document.write(arr1);
var arr = [“js”,”jquery”,”abcd”];
var re = arr.join(“”);
document.write(re);
document.write(typeof(re));
//例題：將字符串所有字符顛倒順序
function test(str){
var arr = str.split(“”);
document.write(typeof(arr));
arr.reverse();
var re = arr.join(“”);
document.write(typeof(re));
return re;
}
document.write(“javascript顛倒後： ” + test(“javascript”));
/*第七章：時間對象
* 創建一個日期對象必續使用new關鍵字：語法： var 日期對象名 = new Date();
* Date對象的方法有很多，主要分為兩大類：獲取時間：getXxx() 和 設置時間：setXxx()
*
* getFullYear() 獲取年份：取值4位數字
* getMonth() 獲取月份：取值0（一月）-11（十二月）整數
* getDate() 獲取日數：取值0-31整數
* getHours() 獲取小時：取值0-23整數
* getMinutes() 獲取分鐘：取值0-59整數
* getSeconds() 獲取秒數：取值0-59整數
* getMilliseconds() 獲取毫秒
* getDay() 獲取星期幾：0表示星期天
* setFullYear(year,month,day) 設置年月日
* setMonth(month,day) 設置月日
* setDate(day) 設置日 : 1-31整數
* setHours(hour,min,sec,millsec) 設置時分秒毫秒
* setMinutes(min,sec,millsec) 設置分秒毫秒
* setSeconds(sec,millsec) 設置秒毫秒
*/
//舉例
var d = new Date();
var myyear = d.getFullYear();
var mymonth = d.getMonth();
var myday = d.getDate();
var myday1 = d.getDay();
var weekend = [“星期天”,”星期一”,”星期二”,”星期三”,”星期四”,”星期五”,”星期六”];
document.write(myyear + “年”+(mymonth+1)+”月”+myday+”日”+weekend[myday1]);
/*第八章：數學對象
* 數學對象不需要使用new關鍵字來創造，而是直接使用它的屬性和方法
* 語法： Math.屬性 Math.方法
* 註：屬性往往都是常量，比如：圓周率：PI （常用格式：度數*Math.PI/180）
* Math中方法常用有：
* max min sin cos tan asin acos atan floor ceil random atan2
* Math中方法不常用有：
* abs sqrt log pow exp
* random():用於生成0-1之間的隨機數，即： [0,1)
* 隨機生成某個範圍的任意數：
* 1，Math.random()*m:生成0~m之間的隨機數
* 2，Math.random()*m+n:生成n~m+n之間的隨機數
* 3，Math.random()*m-n:生成-n~m-n之間的隨機數
* 4，Math.random()*m-m:生成-m~0之間的隨機數
*/
//舉例
var a = Math.max(3,9,10,2,4,6,12,67,9);
document.write(a);
var b = 0.6;
document.write(Math.floor(b));//floor向下取整
document.write(Math.ceil(b)); //ceil向上取整
document.write(Math.random()*10);
//例題：生成隨機驗證碼
function random_validate(str){
var arr = str.split(“”);
var result = “”;
for(var i = 0;i < 4; i++){
var n = Math.floor(Math.random()*arr.length);
result += arr[n];
}
return result;
}
document.write(random_validate(“asjcbakavbavakvhakjbvkvJASSDKABKAVAVJ24123435”));
/*第九章：DOM基礎
* DOM：document object model文檔對象模型（W3C定義的一個標準）
* DOM操作：理解：元素操作；DOM採用樹形結構
* 重點：每一個元素就是一個節點，每個節點就是一個對象。操作元素時其實就是把這個元素看成一個對象，
* 然後使用其對象的屬性和方法進行操作。節點包括元素，二者實際不是同一概念
* DOM節點有12種類型，其中常用的三種：元素節點，屬性節點，文本節點
* 不同節點的nodeType屬性值：
* 元素節點：1
* 屬性節點：2
* 文本節點：3
*
* 一，獲取元素（實際獲取元素節點），js種有以下方式：
* 1，getElemnetById()
* 2，getElemnetByTagName():返回一個類數組（偽數組）：只能使用length屬性和下標形式
* 3，getElemnetByClassName()
* 4，getElemnetByName():只用於表單元素，一般用於單選按鈕和複選框
* 5，querySelector()和querySelectorAll()
* 6，document.title()和document.body()
* 二，創建元素：（動態DOM操作）
* 創建元素節點：createElement()
* 創建文本節點：createTextNode()
* 總結：創建一個元素的步驟：
* (1)創建元素節點：createElement()
* (2)創建文本節點：createTextNode()
* (3)把文本節點插入元素節點：appendChild()
* (4)把組裝好的元素插入到已有的元素中：appendChild()
* 三，插入元素
* 1，appenChild() :把一個元素插到父元素的內部子元素的末尾
* 2，insertBefore():把一個元素插到父元素的內部某個子元素的之前
*
* 四，刪除元素：removeChild()
* 五，賦值元素：obj.cloneNode(bool)
* obj:被複制的對象
* bool:參數 true：複製元素本身及其子元素 false：僅僅複製本身
* 六，替換元素：replaceChild(new,old)
*/
//創建簡單元素
window.onload =function(){
var oDiv = document.getElementById(“content”);
var oStrong = document.createElement(“strong”);
var oTxt = document.createTextNode(“逗比小憨憨”);
oStrong.appendChild(oTxt);
oDiv.appendChild(oStrong);
}
//創建帶屬性的元素
window.onload =function(){
var oInput = document.createElement(“input”);
oInput.id = “sumit”;
oInput.type = “button”;
oInput.value = “提交”;
document.body.appendChild(oInput);
}
//創建動態圖片
window.onload =function(){
var oImg = document.createElement(“img”);
oImg.className = “doubi”;
oImg.src = “img/doubi.jpg”;
oImg.style.border = “1px solid silver”;
document.body.appendChild(oImg);
}
//創建多個元素
window.onload =function(){
var oTable = document.createElement(“table”);
for(var i = 0; i < 3;i++){
var oTr = document.createElement(“tr”);
for(var j = 0; j < 3; j++){
var oTd = document.createElement(“td”);
oTr.appendChild(oTd);
}
oTable.appendChild(oTr);
}
document.body.appendChild(oTable);
}
//子元素插到末尾
window.onload =function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oU1 = document.getElementById(“list”);
var oTxt = document.getElementById(“txt”);
var textNode = document.createTextNode(oTxt.value);
var oLi = document.createElement(“li”);
oLi.appendChild(textNode);
oU1.appendChild(oLi);
}
}
//子元素插到某個子元素之前
window.onload =function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oU1 = document.getElementById(“list”);
var oTxt = document.getElementById(“txt”);
var textNode = document.createTextNode(oTxt.value);
var oLi = document.createElement(“li”);
oLi.appendChild(textNode);
oU1.insertBefore(oLi, oU1.firstElementChild);
}
}
//刪除子元素
window.onload =function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oU1 = document.getElementById(“list”);
oU1.removeChild(oU1.lastElementChild);
}
}
//複製元素
window.onload =function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oU1 = document.getElementById(“list”);
document.body.appendChild(oU1.cloneNode(1));
}
}
//替換元素
window.onload =function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oFirst = document.querySelector(“body *:first-child”);
var oTag = document.getElementById(“tag”);
var oTxt = document.getElementById(“txt”);
var oNewTag = document.createElement(oTag.value);
var oNewTxt = document.createTextNode(oTxt.value);
oNewTag.appendChild(oNewTxt);
document.body.replaceChild(oNewTag, oFirst);
}
}
/*第十章：DOM進階
* 操作HTML元素屬性的方式：對象屬性和對象方法
* 不管是用那種方式，都需要涉及兩個操作：獲取HTML屬性值，設置HTML屬性值
* 一，獲取HTML屬性值：
* 語法： obj.attr (obj是元素名，是一個DOM對象，指的是getElementById()
* 等方法獲取到的元素節點)
* 二，設置HTML屬性值： obj.attr = “值”;
* 三，HTML屬性操作(對象方法)
* 1，getAttribute()：獲取元素的某個屬性值
* 2，setAttribute()：設置元素的某個屬性值,參數1：屬性名 參數2：屬性值
* 3，removeAttribute()：刪除某個屬性
* 4，hasAttribute()：判斷元素是否含有某個屬性
* 四，總結：
* 1，“對象屬性方式”和“對象方法方式”都可以操作靜態HTML的屬性和動態DOM屬性
* 2，只有“對象方法方式”才可以操作自定義屬性
*
* 五，CSS屬性操作：是指js操作一個元素的CSS樣式
* 1，獲取CSS屬性值：getComputeStyle(obj).attr <==> getComputeStyle(obj)[“attr”]
* obj：DOM對象 attr：CSS屬性名
* 2，設置CSS屬性值
* (1)style對象：行內樣式 語法：obj.style.attr=”值”
* (2)cssText方法
* 六，DOM遍歷
* 1，查找父元素：obj.parentNode obj:DOM對象
* 2，查找子元素：
* (1)childNodes,firstChild,lastChild
* (2)children,firstElementChild,lastElementChild
* 註：childNodes：獲取所有節點包括文本節點 children：獲取所有元素節點，不包括文本節點
* 3，查找兄弟元素:
* (1)previousSibling：查找前一個兄弟節點
* (2)nextSibling：查找後一個兄弟節點
* (3)previousElementSibling：查找前一個兄弟元素節點
* (4)nextElementSibling：查找後一個元素節點
* 七，innerHTML與innerText
*/
//獲取靜態HTML中的屬性值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
alert(oBtn.id);
}
}
//獲取動態HTML中的屬性值
window.onload = function(){
var oInput = document.createElement(“input”);
oInput.id = “submit”;
oInput.type = “button”;
oInput.value = “提交”;
document.body.appendChild(oInput);
oInput.onclick = function(){
alert(oInput.id);
}
}
//獲取單行文本框的值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oTxt = document.getElementById(“txt”);
alert(oTxt.value);
//document.write(oTxt.value);
}
}
//獲取單選框的值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
var oFruit = document.getElementsByName(“fruit”);
oBtn.onclick = function(){
for(var i = 0; i < oFruit.length; i++){
if(oFruit[i].checked){
alert(oFruit[i].value);
}
}
}
}
//獲取複選框的值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
var oFruit = document.getElementsByName(“fruit”);
var str = “”;
oBtn.onclick = function(){
for(var i = 0; i < oFruit.length; i++){
if(oFruit[i].checked){
str +=oFruit[i].value;
}
}
alert(str);
}
}
//獲取下拉列表的值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
var oSelect = document.getElementById(“select”);
oBtn.onclick = function(){
alert(oSelect.value);
}
}
//設置屬性值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
oBtn.value = “button”;
document.write(oBtn.value);
}
}
//獲取固有屬性值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
alert(oBtn.getAttribute(“id”));
}
}
//獲取自定義屬性值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
//alert(oBtn.data);//oBtn.data是不能獲取自定義屬性值
alert(oBtn.getAttribute(“data”));
}
}
//獲取自定義屬性值
window.onload = function(){
var oTd = document.getElementsByTagName(“td”);
for(var i = 0;i < oTd.length; i++){
oTd[i].onclick = function(){
var oParent = this.parentNode;
oParent.style.color = “white”;
oParent.style.backgroundColor = “red”;
};
}
}
//childNodes與children的比較
window.onload = function(){
var oU1 = document.getElementById(“list”);
var childNodes = oU1.childNodes.length;
var children = oU1.children.length;
alert(“childNodes的長度：”+childNodes + “\n” +”children的長度：”+children);
}
/*第十一章：事件基礎
* 一，在js中一個事件分為三部分：
* 1，事件主角：是按鈕還是div元素或是其它？
* 2，事件類型：是點擊還是移動或其它？
* 3，事件過程：這個事件都發生了些什麼？
* 二，js中常用的事件：
* 1，鼠標事件
* 2，鍵盤事件
* 3，表單事件
* 4，編輯事件
* 5，頁面事件
* 三，js中事件調用方式：
* 1，在script標籤中調用：指的是在<script><script/>標籤內調用事件
* 語法： obj.事件名 = function(){};
* 2，在元素中調用：指的是直接HTML屬性中調用事件
* 四，鼠標事件
* onclick 鼠標單擊事件
* onmouseover 鼠標移入事件
* onmouseout 鼠標移出事件
* onmousedown 鼠標按下事件
* onmouseup 鼠標鬆開事件
* onmousemove 鼠標移動事件
* 五，鍵盤事件
* 1，鍵盤按下：onkeydown
* 2，鍵盤鬆開：onkeyup
* 註：指按下或鬆開的一瞬間，先有按下後有鬆開
* 鍵盤事件一般用途：表單操作和動畫控制
* 六，表單事件
* 1，onfocus：獲取焦點時觸發的事件 onblur：獲取失去焦點時觸發的事件
* 註：只有超鏈接和表單元素（單選框，多選框，單行文本框，多行文本框，下拉列表）才有上述功能
* 備註：判斷一個元素是否有焦點的方法：
* 打開一個頁面後按tab鍵，能夠選中的就是具有焦點特性的元素
* 焦點事件（onfocus，onblur）一般用於單行文本框和多行文本框
* 2，onselect：當我們選中單行/多行文本框中內容時就會觸發該事件
* 3，onchange：常用於具有多個選項的表單元素：
* (1)單選框選擇某一項時觸發
* (2)多選框選擇某一項時觸發
* (3)下拉列表選擇某一項時觸發
* 4，submit（一般結合後端技術使用，此處暫時不管）
* 七，編輯事件(一般用於保護版權)
* 1，oncopy：可以用於頁面內容被複制
* 2，onselectstart：可以用於防止頁面內容被選取：本質上是防止頁面內容被複制
* 3，oncontexmenu
* 八，頁面事件
* 1，onload：表示文檔加載完成後再執行的一個事件
* window.onload：一般用於在想要獲取頁面中某一個元素的時候才會用到
* 2，onbeforeunload：表示離開頁面之前觸發的一個事件
*/
//鼠標移入移出
window.onload = function(){
var oP = document.getElementById(“content”);
oP.onmouseover = function(){
this.style.color = “red”;
}
oP.onmouseout = function(){
this.style.color = “yellow”;
}
}
//鼠標按下鬆開
window.onload = function(){
var oDiv = document.getElementById(“title”);
var oBtn = document.getElementById(“btn”);
oBtn.onmousedown = function(){
oDiv.style.color = “red”;
}
oBtn.onmouseup = function(){
oDiv.style.color = “blue”;
}
oBtn.onmousemove = function(){
oDiv.style.color = “green”;
}
}
//統計輸入字符的長度（鍵盤按下鬆開實驗）
window.onload = function(){
var oTxt = document.getElementById(“txt”);
var oNum = document.getElementById(“num”);
oTxt.onkeyup = function(){
var str = oTxt.value;
oNum.innerHTML = str.length;
}
}
//統計輸入字符的長度（鍵盤按下鬆開實驗）
window.onload = function(){
var oTxt = document.getElementById(“txt”);
var oDiv = document.getElementById(“content”);
var myregex = /^[0-9]*$/;
oTxt.onkeyup = function(){
if(myregex.test(oTxt.value)){
oDiv.innerHTML = “輸入正確”;
}
else{
oDiv.innerHTML = “必續輸入數字”;
}
}
}
//搜索框（焦點的應用）
window.onload = function(){
var oSearch = document.getElementById(“search”);
oSearch.onfocus = function(){
if(this.value == “逗比小憨憨”){
this.value = “”;
}
};
oSearch.onblur = function(){
if(this.value == “”){
this.value = “逗比小憨憨”;
}
};
}
//focus方法:onfocus是一個屬性
window.onload = function(){
var oTxt = document.getElementById(“txt”);
oTxt.focus();
}
//onselect事件
window.onload = function(){
var oTxt1 = document.getElementById(“txt1”);
var oTxt2 = document.getElementById(“txt2”);
oTxt1.onselect = function(){
alert(“你選中了單行文本框中的內容”);
}
oTxt2.onselect = function(){
alert(“你選中了多行文本框中的內容”);
}
}
//select方法：當使用搜索框時，每次點擊搜索框，它就會幫我們自動選中文本框中的所有內容
window.onload = function(){
var oSearch = document.getElementById(“search”);
oSearch.onclick = function(){
this.select();
};
}
//onchange事件用於單選框
window.onload = function(){
var oFruit = document.getElementsByName(“fruit”);
var oP = document.getElementById(“content”);
for(var i = 0;i < oFruit.length; i++){
oFruit[i].onchange = function(){
if(this.checked){
oP.innerHTML = “你選擇的是: “+this.value;
}
}
};
}
//onchange事件用於複選框
window.onload = function(){
var oFruit = document.getElementsByName(“fruit”);
var oSel = document.getElementById(“sel”);
for(var i = 0; i < oFruit.length; i++)
alert(oFruit[i].value);
oSel.onchange = function(){
if(this.checked){
for(var i = 0; i < oFruit.length; i++){
oFruit[i].checked = true;
}
}
else{
for(var i = 0; i < oFruit.length; i++){
oFruit[i].checked = false;
}
}
};
}
//onchange事件用於下拉列表
//選擇下拉列表的某一選項時，觸發的是onchange事件，而不是onselect事件；
onselect事件僅僅當選擇文本框中內容時才會觸發
window.onload = function(){
var oList = document.getElementById(“list”);
oList.onchange = function(){
var link = this.options[this.selectedIndex].value;
window.open(link);
};
}
//oncopy事件的應用
window.onload = function(){
document.body.oncopy =function(){
return false;
}
}
//onselectstart事件的應用
window.onload = function(){
document.body.onselectstart =function(){
return false;
}
}
//oncontexmenu事件的應用
window.onload = function(){
document.body.oncontextmenu =function(){
return false;
}
}
//onload,onbeforeunload事件的應用
window.onload = function(){
alert(“doubi”);
}
window.onbeforeunload = function(e){
e.returnValue = “你準備離開頁面”;
}
/*第十二章:事件進階
* 在js中想要給元素添加一個事件，有兩種方式：
* 1，事件處理器：缺點：無法為一個元素添加多個相同事件
* 2，事件監聽器：優點：事件處理器的缺點；(可以添加多個相同事件)
* 指定是使用addEventListener()方法為一個元素加事件（又稱綁定事件）
* 語法：obj.addEventListener(type,fn,false)
* obj:DOM對象 type:是一個字符串，指的是事件類型，不需要加上on前綴
* fn:是一個函數名或一個匿名函數 false:表示事件冒泡階段調用
* 3，解綁事件:obj.removeEventListener(type,fn,false)
* 4，event對象：當一個事件發生的時候，這個事件有關信息都會臨時保存到一個指定的地方，這個
* 地方就是event對象。對於每一個事件，都有一個對應的event對象。
* event對象的常用屬性：
* type: 事件類型
* keyCode: 鍵碼值
* shiftKey: 是否按下shift鍵
* ctrlKey: 是否按下ctrl鍵
* altKey: 是否按下alt鍵
*
* keyCode：獲取按下的哪個鍵；語法：event.keyCode
* 返回一個數值，常用的鍵值對照表：
* W（上） 87
* S（上） 83
* A（上） 65
* D（上） 68
* 上箭頭 38
* 下箭頭 40
* 左箭頭 37
* 右箭頭 39
*
* this:
* this是極其複雜，在事件操作中，可以理解：哪個DOM對象（元素節點）調用了
* this所在函數，那麼this指向的就是哪個DOM對象
*/
//例題
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.addEventListener(“click”, alterMes, false);
function alterMes(){
alert(“javascript”);
}
}
//上述等價於下面程序
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.addEventListener(“click”, function(){
alert(“javascript”);}, false);
}
//獲取事件的類型
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(e){//e是一個變量名存儲一個event對象
//實際上每次調用一個事件的時候，js都會默認給這個事件函數加上一個隱藏的參數
//這個參數就是event對象，一般來說，event事件是作為事件函數的第一個參數傳入
alert(e.type);
}
}
//禁止shift，alt,ctrl鍵
window.onload = function(){
document.onkeydown = function(e){
if(e.shiftKey || e.altKey || e.ctrlKey){
alert(“禁止使用shift，alt,ctrl鍵”)
}
}
}
//獲取上下左右方向鍵
window.onload = function(){
var oSpan = document.getElementsByTagName(“span”)[0];
window.addEventListener(“keydown”,doubi,false);
function doubi(e){
switch(e.keyCode)
{
case 38:
case 87:oSpan.innerHTML = “上”;break;
case 39:
case 68:oSpan.innerHTML = “右”;break;
case 40:
case 83:oSpan.innerHTML = “下”;break;
case 65:
case 37:oSpan.innerHTML = “左”;break;
default:oSpan.innerHTML = “”;break;
}
}
}
/*第十三章：window對象
* 在js中一個瀏覽器的窗口就是一個window對象。實際上每次打開一個頁面時，瀏覽器都會自動為這個頁面
* 創建一個window對象。window對象存放了這個頁面的所有信息。
* window對象下的子對象：
* document 文檔對象，用於操作頁面元素
* title
* body
* forms
* images
* links
* location 地址對象，用於操作URL地址
* navigator 瀏覽器對象，用於獲取瀏覽器版本信息
* history 歷史對象，用於操作瀏覽歷史
* screen 屏幕對象，用於操作屏幕寬度高度
* 註：location等對象又稱為BOM（browser object module瀏覽器對象模型）
* 上述子對象可以看成window對象的屬性
*
* window對象常用的方法：
* alert() 提示對話框
* confirm() 判斷對話框
* prompt() 輸入對話框
* open() 打開窗口
* close() 關閉窗口
* setTimeout() 開啟一次性定時器
* clearTimeout() 關閉一次性定時器
* setInterval() 開啟重複性定時器
* clearInterval() 關閉重複性定時器
* 註：對於window對象來說，不管它的屬性還是方法，都可以省略window前綴
*
* 相關操作：
* 1，窗口操作
* (1)打開窗口：語法：window.open(url,target)
* (2)關閉窗口：語法：window.close()
* 2，對話框：
* (1)alert(“提示文字”)：一般僅僅用於提示文字，在其換行使用：”\n”;無返回值
* (2)confirm(“提示文字”)：用於不僅提示文字，還供確認;返回布爾值
* (3)prompt(“提示文字”)：不僅提示文字，還能返回一個字符串
* 3，定時器
* (1)setTimeout(code,time)
* 其中code：一段代碼或一個函數或一個函數名 time：時間，單位ms，表示要過多長時間才執行code中的代碼
* (2)clearTimeout()
* (3)setInterval(code,time)
* (4)clearInterval()
* 4，location對象
* location對象的屬性
* href 當前頁面地址 作用：獲取或設置當前頁面的地址
* search 當前頁面地址？後面的內容 作用：獲取或設置當前頁面的地址？後面的內容
* 地址？後面的內容也叫做查詢字符串(querystring)，一般用於數據庫查詢用的，而且大量用到
* hash 當前頁面地址#後面的內容 作用：獲取或設置當前頁面的地址#後面的內容
* #一般用於錨點鏈接
* 5，navigator對象：用於獲取瀏覽器的類型
* 語法：window.navigator.userAgent
*/
//舉例
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
window.open(“http://www.baidu.com”,”_blank”);//在新窗口打開
window.open(“http://www.baidu.com”,”_self”);//在當前窗口打開
}
}
//操作空白窗口中的元素
window.onload = function(){
var oBtn = document.getElementsByTagName(“input”);
var opener = null;
oBtn[0].onclick = function(){
opener = window.open();
var strHtml = ‘<!DOCTYPE html>\
<html>\
<head>\
<title></title>\
</head>\
<body>\
<div>逗比小憨憨</div>\
</body>\
</html>’;
opener.document.write(strHtml);
};
oBtn[1].onclick = function(){
var oDiv = opener.document.getElementsByTagName(“div”)[0];
oDiv.style.fontWeight = “bold”;
oDiv.style.color = “hotpink”;
};
}
//confirm對話框的使用
window.onload = function(){
var oBtn = document.getElementById(“btn1”);
oBtn.onclick = function(){
if(confirm(“確定要跳轉到首頁嗎?”)){
window.location.href = “http://www.baidu.com”;
}else{
document.write(“取消”);
}
};
}
//prompt對話框的使用
window.onload = function(){
var oBtn = document.getElementById(“btn1”);
oBtn.onclick = function(){
var name = window.prompt(“請輸入您的名字:”);
document.write(“歡迎來到<strong>”+name+”</strong>”);
};
}
//setTimeout()的使用
window.onload = function(){
setTimeout(‘alert(“doubi”)’, 2000);
}
//setTimeout()的使用,其中code是一個函數
window.onload = function(){
setTimeout(‘alert(“doubi”)’, 2000);
}
////setTimeout()的使用,其中code是一個函數名
window.onload = function(){
setTimeout(alertMes, 2000);
function alertMes(){
alert(“doubixiaohanhan”);
}
}
//clearTimeout()的使用
window.onload = function(){
var oBtn = document.getElementsByTagName(“input”);
var timer = null;
oBtn[0].onclick = function(){
//alert(“你已點擊開始定時按鈕”);
timer = setTimeout(alertMes, 5000);
function alertMes(){
alert(“doubixiaohanhan”);
}
};
oBtn[1].onclick = function(){
clearTimeout(timer);
}
}
//setInterval()的使用
var n = 10;
window.onload = function(){
var t = setInterval(countdown,1000);
};
function countdown(){
if(n > 0){
n–;
document.getElementById(“num”).innerHTML = n;
}
}
//setInterval()的使用,在圖片輪播開發中特別有用
window.onload = function(){
var oBtn = document.getElementsByTagName(“input”);
var oDiv = document.getElementsByTagName(“div”)[0];
var colors = [“red”,”yellow”,”blue”,”green”,”purple”,”orange”];
var time = null;
var i = 0;
oBtn[0].onclick = function(){
clearTimeout(time);
time = setInterval(function(){
oDiv.style.backgroundColor = colors[i];
i++;
i = i%colors.length;
},1000);
};
oBtn[1].onclick = function(){
clearInterval(time);
};
}
//href的使用
window.onload = function(){
var url = window.location.href;
document.write(“當前頁面地址：”+ url);
window.setTimeout(code,3000);
function code(){
url = window.location.href = “http://www.baidu.com”;
window.open(url);
};
}
//navigator的使用
window.onload = function(){
//indexOf(用於查找某個字符串在字符串中首次出現的位置，如果找不到返回-1)
if(window.navigator.userAgent.indexOf(“MSIE”) != -1){
alert(“這是IE瀏覽器”);
}
else if(window.navigator.userAgent.indexOf(“Chrome”) != -1){
alert(“這是谷歌瀏覽器”);
}
else if(window.navigator.userAgent.indexOf(“Firefox”) != -1){
alert(“這是火狐瀏覽器”);
}
else;
}
/*第十四章：document對象
* 瀏覽器會為每個窗口內的HTML頁面自動創建一個document對象
* 一，document對象常用的屬性
* document.title 獲取文檔的title
* document.body 獲取文檔的body
* document.forms 獲取文檔的forms
* document.images 獲取文檔的images
* document.links 獲取文檔的links
* document.cookie 獲取文檔的cookie
* document.URL 獲取文檔的URL
* document.referrer 獲取文檔的referrer:獲取用戶在訪問當前頁面
* 之前所在的頁面地址，可以統計用戶都是通過什麼方式來訪問頁面的
* 其中：使用document.getElementByTagName(“forms/img/a”)操作
* forms、images、links
* 二，document對象常用的方法
* document.getElementById() 通過id獲取元素
* document.getElementByTagName() 通過標籤名獲取元素
* document.getElementByClassName() 通過class獲取元素
* document.getElementByName() 通過name獲取元素
* document.querySelector() 通過選擇器獲取元素，只獲取第一個
* document.querySelectorAll() 通過選擇器獲取元素，獲取所有
* document.createElement() 創建元素節點
* document.createTextNode() 創建文本節點
* document.write() 輸出內容
* document.writeln() 輸出內容並換行
*/
//獲取url
window.onload = function(){
var url = document.URL;
document.write(url);
}
//輸出內容並換行
window.onload = function(){
var url = document.URL;
document.writeln(url);
document.writeln(“doubixiaohanhan”);
}
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/217010.html
微信掃一掃 
支付寶掃一掃 
