《零基礎學JavaScript(全綵版)》學習筆記

《零基礎學JavaScript(全綵版)》學習筆記

二〇一九年二月九日星期六0時9分

前期：

剛剛學完《零基礎學HTML5+CSS3(全綵版)》，準備開始學習JavaScript。對Web前端好作一個全面深刻的瞭解，爲Python編程的提升打下一個堅實的基礎。

本書除了項目實戰，共計17章390頁，不光自己的視頻，光騰訊課堂的JS視頻就有35課時以上。計劃用時4天到7天的時間學完。

仍是先把書過一遍吧，看書比較好掌握進度，而後再看書補補漏。

 

第1篇   基礎知識

第1章 JavaScript簡介

一、JavaScript的起源、特色、應用

二、WebStorm的下載與安裝

三、JavaScript在HTML中的使用：頁面直接嵌入JS代碼；連接外部JS文件；做爲標記的屬性值使用。

四、JS的基本語法：執行順序；大小寫敏感；JS會忽略空格、換行和製表符，但換行有斷句的做用；每行結尾的分號無關緊要；//單行註釋，/*……*/多行註釋

五、document.write():JavaScript語句，表示能夠直接在頁面中輸出括號中的內容。

六、alert():JS語句，彈出一個對話框，顯示括號內的內容。

七、alert(new Date().toLocaleString());顯示當前的日期和時間

 

第2章 JavaScript語言基礎

數據類型：數值型：（十進制,十六進制,八進制,浮點型數據,特殊值Infinity,特殊值NaN）；

          字符串型；布爾型；特殊數據類型（未定義值，空值(null)）

常量和變量：常量；變量（命名、聲明、賦值、類型）

運算符：算術運算符、字符串運算符、比較運算符、賦值運算符、邏輯運算符、條件運算符、其餘運算符、運算符優先級。

表達式：

數據類型的轉換規則：

一、 特殊值：Infinity正無窮大；-Infinity負無窮大。

二、 特殊值NaN：非數字。好比0/0.

三、 逗號運算符用於將多個表達式排在一塊兒，而整個表達式的值爲最後一個表達式的值。

四、 typeof運算符：返回操做數的數據類型。

五、 new運算符：建立一個新的內置對象實例。

六、 變量聲明：var

 

第3章 JavaScript基本語句

條件判斷語句：if語句；switch語句

循環語句：while語句；do…while語句；for語句

跳轉語句：continue語句；break語句

異常處理語句：try…catch…finall語句；Error對象；throw語句拋出異常

 

第4章 函數

函數的定義和調用：函數的定義；函數的調用(簡單調用、事件響應調用、連接調用)

函數的參數：

函數的返回值：

嵌套函數：嵌套定義；嵌套調用

遞歸函數：

變量的做用域：全局變量和局部變量；變量的優先級

內置函數：數值處理函數；字符串處理函數

定義匿名函數：在表達式中定義函數；使用Function()構造函數

一、 定義函數： function 函數名（[參數列表]）{語句 [return 返回值]}

二、 函數的調用：經過連接調用<a href="javascript:test();">單擊連接</a>

三、 形參、實參

四、 函數的返回值：return 表達式;

五、 嵌套函數；遞歸函數：本身調用本身。遞歸兩步：找規律，找出口！

六、 內置函數：數值處理處理函數：parseInt(string,n)字符串轉整數；parseFloat()字符串轉浮點數；

isNaN(num)判斷值是否爲NaN;isFinite(num)檢驗參數是否有限；

七、 字符串處理函數：eval(string)計算字符串表達式的值：eval("x=5;y=6;document.write(x*y)");

八、定義匿名函數：在表達式中定義函數和使用Function()構造函數定義函數。

   var 變量名 = function(參數1，參數2，…){函數體}；  不須要指定函數名，直接賦給變量便可。

   構造函數可動態地建立函數：

   var 變量名 = new Function("參數1"，「參數2」……"函數體")；參數和函數體都必須是字符串。

   例如：var sum = new Function("x","y","alert(x+y);");     sum(10,20);

二〇一九年二月九日星期六2時14分40秒

 

渡一教育視頻補遺：

JavaScript運行三部曲：（js特色：單線程+解釋性語言）

第一步：語法分析：先掃描一遍

第二步：預編譯：函數聲明總體提高；變量的聲明提高（變量賦值沒提高）

第三步：解釋執行

預編譯前奏：

一、 imply global:暗示全局變量：即任何變量，若是變量未經聲明就賦值，此變量就爲全局對象全部。

二、 一切聲明的全局變量全是window的屬性。

   2/9/2019 12:42:41 PM

預編譯四部曲：

一、 建立AO對象  --Activation Object 活躍對象-做用域-執行期上下文

全局的爲GO對象—Global O bject window對象

二、 找形參和變量聲明，將變量和形參名做爲AO屬性名。值爲undefined

三、 將實參值和形參統一

四、 在函數體裏面找函數聲明，值賦予函數體

預編譯發生在函數執行的前一刻。

！！ 雙非

敲代碼的指法：……

[[scope]]做用域鏈

當即執行函數：此類函數沒有聲明，在一次執行事後即釋放。適合作初始化工做。

只有表達式才能被執行符號執行，()是執行符，先執行外面的()。表達式裏面的函數在外面就失去了意義，因而：

(function test(){console.log('a');}())就變成了當即執行函數：(function(){console.log('a');}())

閉包：當內部函數被保存到外部時，將會生成閉包。閉包會致使原有做用域鏈不釋放，形成內存泄露。

閉包的做用：實現公有變量，函數累加器；能夠作緩存（存儲結構）eater；能夠實現封裝，屬性私有化，Person()；模塊化開發，防止污染全局變量。

閉包的防範：閉包會致使多個執行函數共用一個公有變量，若是不是特殊須要，應儘可能防止這種狀況發生。

函數只有在執行的時候纔會關注函數體內的變量，當造成閉包的時候，在外部執行函數時訪問的永遠是內部函數最後造成的變量值！！！函數在定義的時候不用看函數體內是什麼東西！！！除非函數當即執行！！！

 

二〇一九年二月九日星期六20時2分

第5章 對象

對象簡介：什麼是對象；對象的屬性和方法；JS對象的種類

自定義對象建立：直接建立自定義對象；經過自定義構造函數建立對象；經過Object對象建立自定義對象。

對象訪問語句：for…in 語句;with語句

經常使用內部對象：Math對象；Date對象

一、 對象的屬性：包含在對象內部的變量。用來描述對象特性的一組數據。對象狀態。

二、 對象的方法：包含在對象內部的函數。用來實現某個功能。對象行爲。

三、 對象的種類：自定義對象；預約義對象：內置對象和瀏覽器對象。

四、 直接建立自定義對象：var 對象名 = {屬性名1:屬性值1,屬性名2:屬性值2,屬性名3:屬性值3,……}

五、 自定義構造函數建立對象：調用構造函數要用new運算符；參數一般用於初始化新對象，this關鍵字。

例如：構造函數：function Student(name,sex,age){this.name=name;this.sex=sex;this.age=age;}

      建立一個新對象：var student1 = Student("張三"，"男"，25);

   定義方法：在構造函數裏：this.showName=ShowName; 在構造函數外定義：function showName(){…}

       或者在構造函數裏直接定義：this.showName=function(){alert(this.name);};

六、prototype屬性是全部函數都具備的屬性，用於向對象添加屬性和方法：object.prototype.name=value

   如：Student.prototype.show=function(){alert("姓名:"+this.name+"\n性別:"+this.sex);}

       var student1=new Student("張三","男");

       student1.show();

七、經過內置對象建立自定義對象：obj=new Object([value]) 如：var student=new Object();

八、專門應用於對象的語句：for…in;用於遍歷對象的每個屬性，每次將屬性名做爲字符串存在變量中。for(var example in object){……}

with(對象名稱){語句}：大括號中的屬性引用就不在須要對象名加點的形式了。

九、經常使用內部對象：內部動態對象必須用new建立實例才能引用；內部靜態對象能夠直接引用。

十、靜態對象Math：數學常量和數學函數。PI圓周率、abs(x)絕對值、exp(x)乘方、max(n1,n2…)最大值、

    min()、pow(x,y)x的y次方、random()隨機數、round(x)四捨五入取整、sqrt(x)平方根

十一、日期對象：dateObj = new Date()

              dateObj = new Date(dateVal)

              dateObj = new Date(year,month,date[,hour[,minutes[,seconds[,ms]]]])

getFullYear()/getMonth()+1/getDate()/getDay() 獲取當前年月日星期 toString()日期轉字符串

 

第6章 數組

數組：數組概念；數組元素

定義數組：定義空數組；指定數組長度；指定數組元素；直接定義數組

操做數組元素：數組元素的輸入和輸出；數組元素的添加；數組元素的刪除

數組元素的屬性：length屬性；prototype屬性

數組的方法：數組的添加和刪除；設置數組的排列順序；獲取某段數組元素；數組轉換成字符串

一、 JS是一種弱類型語言，數組中的每一個元素的類型能夠不一樣，甚至數組能夠包含數組。

二、 定義空數組： arrayObject = new Array() 而後再給數組賦值arr[0]="零基礎學JavaScript";

三、 定義數組時能夠定義數組的個數：arrayObject = new Array(size)

四、 定義數組時直接賦值：arrayObject = new Array(element1,element2,element3,…)

五、 直接定義數組：不使用構造函數，直接把數組元素放在一箇中括號中：

arrayObject =[element1,element2,element3,…]

六、 數組元素的刪除：delete arr[1]; 刪除的只是元素的值，變爲undefined，元素的個數並未減小。

七、 數組的屬性：arr.length 數組的長度（元素個數）；自定義屬性：Array.prototype.name=value

八、 數組的添加和刪除：

concat()方法：將其餘數組鏈接到當前數組的尾部，產生一個新數組，原數組的元素和長度不變

   arrayObject.concat(arrayX,arrayX,……,arrayX)

push()方法：向數組末尾添加一個或多個元素，返回添加後的數組的長度。

unshift()方法：向數組的開頭添加一個或多個元素，數組新長度。

pop()方法：刪除數組最後一個元素，返回刪除元素的值！

shift()方法：刪除數組中第一個元素的值，並返回刪除元素的值。

splice()方法：刪除數組中指定位置的元素，還能夠向指定位置添加元素。

   arrayObject.splice(start,length,element1,element2,…)

九、設置數組的排列順序：reverse()顛倒數組中元素的順序；sort()數組排序；

十、獲取某段數組元素：arrayObject.slice(start,end)

十一、數組轉換成字符串：

arrayObject.toString() 返回的元素之間用逗號分隔

arrayObject.toLocalString()轉換成本地字符串

arrayObject.join(separator)將數組中全部元素放入一個字符串中

 

二〇一九年二月十日星期日0時3分

第7章 String對象

String對象的建立

String對象的屬性：length屬性；constructor屬性；prototype屬性

String對象的方法：查找字符串；截取字符串；大小寫轉換；鏈接和拆分；格式化字符串

一、String對象是動態對象，使用構造函數能夠顯式建立字符串對象：

   var newstr = new String(StringText)

   任何一個字符串常量均可以看作是一個String對象，可直接用.調用其屬性和方法，不一樣的是typeof返回值不一樣，一個是string類型，一個是object類型。

二、字符串的長度stringObject.length; 判斷當前對象類型：newStr.constructor==String

自定義屬性或方法：String.prototype.name=value

三、String對象的方法：

   查找字符串：charAt()返回指定位置的字符；indexOf()返回子字符串在字符串中首次出現的位置。

       lastIndexOf()返回子字符串在字符串中最後出現的位置

   截取字符串：slice()提取字符串的片斷；substr()從指定位置開始提取指定長度的字符串。

       substring()提取兩個指定索引之間的字符（不含索引元素）。

   大小寫轉換：toLowerCase()轉成小寫，toUpperCase()轉成大寫。

   鏈接和拆分：鏈接兩個或多個字符串：stringObject.concat(stringX,stringX,…)

               把一個字符串分割成字符串數組：stringObject(separator,limit)

五、 格式化字符串：anchor()建立html錨;big()small()fontsize()字體大小和指定字號;

bold()italics()粗斜體;link()strike()blink()fixed()fontcolor()sub()sup()

 

二〇一九年二月十日星期日0時57分

第2篇 核心技術

第8章 JavaScript事件處理

本章概覽：JavaScript是一種基於對象的語言。最基本的特徵就是事件驅動（event-driven）。

一般將鼠標或熱鍵的動做稱爲事件(event);將由鼠標或熱鍵引起的一連串動做,稱爲事件驅動(event-driven);而將對事件進行處理的程序或函數，則稱爲事件處理程序(Event Handler)。

 

事件與事件處理概述：什麼是事件；JS經常使用事件；事件的調用；事件對象

表單相關事件：得到焦點與失去焦點的事件；失去焦點內容改變事件；表單提交與重置事件

鼠標和鍵盤事件：鼠標單擊事件；鼠標按下和鬆開事件；鼠標移入和移出事件；鼠標移動事件；鍵盤事件

頁面事件：加載與卸載事件；頁面大小事件

 

一、JavaScript經常使用事件：

a.窗口事件,只在body和frameset元素中才有效

onload      頁面或圖片加載完成時

onunload     用戶離開頁面時

b.表單元素事件,在表單元素中才有效

onchange     框內容改變時

onsubmit     點擊提交按鈕時

onreset     從新點擊鼠標按鍵時

onselect     文本被選擇時

onblur      元素失去焦點時

onfocus     當元素獲取焦點時

c.鍵盤事件

onkeydown    按下鍵盤按鍵時

onkeypress    按下或按住鍵盤按鍵時

onkeyup     放開鍵盤按鍵時

d.鼠標事件

onclick     鼠標點擊一個對象時

ondblclick    鼠標雙擊一個對象時

onmousedown 鼠標被按下時

onmousemove 鼠標被移動時

onmouseout    鼠標離開元素時

onmouseover 鼠標通過元素時

onmouseup    釋放鼠標按鍵時

e.其餘事件

onresize     當窗口或框架被從新定義尺寸時

onabort     圖片下載被打斷時

onerror     當加載文檔或圖片時發生錯誤時

二、事件調用：在HTML中調用：<input name="save" type="button" value="保存" onclick="alert('');">

   在JS中調用：首先要得到對象的引用：b_save=document.getElementById("save");

而後綁定單擊事件：b_save.onclick=function(){……}

三、表單得到焦點和失去焦點事件：<input type="text" onFocus="txtfocus()" onBlur="txtblur()">

四、表單失去焦點內容改變事件：通常用於下拉菜單中。 <select name="menu1" onChange="Fcolor()">

    var e=windows.event; //獲取事件對象   var obj=e.srcElement; //獲取發生事件的元素

有了這個元素，就能夠就對這個元素的屬性進行操做了！

六、 表單提交和重置事件：<form name="formname" onsubmit="return Funname" onreset="return Funname"></form>

eval("obj."+"text"+i).value==""  eval()計算某個字符串並執行其中的js代碼

七、 鼠標單擊事件onclick;鼠標按下和鬆開事件onmousedown,onmouseup;鼠標移入和移出事件onmouseover,onmouseout;鼠標移動事件onmousemove

八、 鍵盤事件：onkeypress,onkeydown,onkeyup

document.onkeydown = function(e) {

    if (13 == e.k&& e.ctrlKey) //Ctrl+Enter鍵，還有：altKey、shiftKey

{   saveComment();    }}

又例如：

<script type="text/javascript">

function Refurbish(){//定義Refurbish()函數

if (window.event.keyCode==65){//若是按下了鍵盤上的A鍵

     location.reload();//對頁面進行刷新

}}

document.onkeydown=Refurbish;//當按下鍵盤上的按鍵時調用函數

</script>

<img src="1.jpg" width="805" height="554">

九、鍵盤碼keycode：

k8 = BackSpace BackSpace 
k9 = Tab Tab 
k12 = Clear 
k13 = Enter 
k16 = Shift_L 
k17 = Control_L 
k18 = Alt_L 
k19 = Pause 
k20 = Caps_Lock 
k27 = Escape Escape 
k32 = space space 
k33 = Prior 
k34 = Next 
k35 = End 
k36 = Home 
k37 = Left 
k38 = Up 
k39 = Right 
k40 = Down 
k41 = Select 
k42 = Print 
k43 = Execute 
k45 = Insert 
k46 = Delete 
k47 = Help 
k48 = 0 equal braceright 
k49 = 1 exclam onesuperior 
k50 = 2 quotedbl twosuperior 
k51 = 3 section threesuperior 
k52 = 4 dollar 
k53 = 5 percent 
k54 = 6 ampersand 
k55 = 7 slash braceleft 
k56 = 8 parenleft bracketleft 
k57 = 9 parenright bracketright 
k65 = a A 
k66 = b B 
k67 = c C 
k68 = d D 
k69 = e E EuroSign 
k70 = f F 
k71 = g G 
k72 = h H 
k73 = i I 
k74 = j J 
k75 = k K 
k76 = l L 
k77 = m M mu 
k78 = n N 
k79 = o O 
k80 = p P 
k81 = q Q at 
k82 = r R 
k83 = s S 
k84 = t T 
k85 = u U 
k86 = v V 
k87 = w W 
k88 = x X 
k89 = y Y 
k90 = z Z 
k96 = KP_0 KP_0 
k97 = KP_1 KP_1 
k98 = KP_2 KP_2 
k99 = KP_3 KP_3 
k100 = KP_4 KP_4 
k101 = KP_5 KP_5 
k102 = KP_6 KP_6 
k103 = KP_7 KP_7 
k104 = KP_8 KP_8 
k105 = KP_9 KP_9 
k106 = KP_Multiply KP_Multiply 
k107 = KP_Add KP_Add 
k108 = KP_Separator KP_Separator 
k109 = KP_Subtract KP_Subtract 
k110 = KP_Decimal KP_Decimal 
k111 = KP_Divide KP_Divide 
k112 = F1 
k113 = F2 
k114 = F3 
k115 = F4 
k116 = F5 
k117 = F6 
k118 = F7 
k119 = F8 
k120 = F9 
k121 = F10 
k122 = F11 
k123 = F12 
k124 = F13 
k125 = F14 
k126 = F15 
k127 = F16 
k128 = F17 
k129 = F18 
k130 = F19 
k131 = F20 
k132 = F21 
k133 = F22 
k134 = F23 
k135 = F24 
k136 = Num_Lock 
k137 = Scroll_Lock 
k187 = acute grave 
k188 = comma semicolon 
k189 = minus underscore 
k190 = period colon 
k192 = numbersign apostrophe 
k210 = plusminus hyphen macron 
k211 = 
k212 = copyright registered 
k213 = guillemotleft guillemotright 
k214 = masculine ordfeminine 
k215 = ae AE 
k216 = cent yen 
k217 = questiondown exclamdown 
k218 = onequarter onehalf threequarters 
k220 = less greater bar 
k221 = plus asterisk asciitilde 
k227 = multiply division 
k228 = acircumflex Acircumflex 
k229 = ecircumflex Ecircumflex 
k230 = icircumflex Icircumflex 
k231 = ocircumflex Ocircumflex 
k232 = ucircumflex Ucircumflex 
k233 = ntilde Ntilde 
k234 = yacute Yacute 
k235 = oslash Ooblique 
k236 = aring Aring 
k237 = ccedilla Ccedilla 
k238 = thorn THORN 
k239 = eth ETH 
k240 = diaeresis cedilla currency 
k241 = agrave Agrave atilde Atilde 
k242 = egrave Egrave 
k243 = igrave Igrave 
k244 = ograve Ograve otilde Otilde 
k245 = ugrave Ugrave 
k246 = adiaeresis Adiaeresis 
k247 = ediaeresis Ediaeresis 
k248 = idiaeresis Idiaeresis 
k249 = odiaeresis Odiaeresis 
k250 = udiaeresis Udiaeresis 
k251 = ssharp question backslash 
k252 = asciicircum degree 
k253 = 3 sterling 
k254 = Mode_switch

 

十、頁面事件：加載事件,網頁加載完成後觸發的事件onload;卸載事件，刷新、關閉、跳轉時發生onunload。頁面大小事件：onresize

                                   2/10/2019 4:09:42 AM

 

二〇一九年二月十日星期日12時11分25秒

第9章 文檔對象

文檔對象概述：文檔對象介紹；文檔對象的經常使用屬性；文檔對象的經常使用方法

文檔對象的應用：連接文字顏色的設置；文檔背景色和前景色的設置；獲取並設置URL；在文檔中輸出數據；動態添加一個HTML標記；獲取文本框並修改其內容

 

一、 JavaScript會爲每一個HTML文檔自動建立一個Document對象，經過Document對象能夠操做HTML內容

二、
瀏覽器對象模型（Browser Object Model，BOM）：window對象是核心,其餘對象都是window屬性。

BOM中定義了6種重要的對象：

    1.window對象表示瀏覽器中打開的窗口；

    2.document對象表示瀏覽器中加載頁面的文檔當對象；

    3.location對象包含了瀏覽器當前的URL信息；

    4.navigator對象包含了瀏覽器自己的信息；

    5.screen對象包含了客戶端屏幕及渲染能力的信息；

        6.history對象包含了瀏覽器訪問網頁的歷史信息；

window對象的主要屬性：

 

window對象的主要方法：

 

window對象的主要功能

window對象對應着Web瀏覽器的窗口，使用它能夠直接對瀏覽器窗口進行操做。window對象提供主要功能能夠分爲如下5類：

    （1）調正窗口大小和位置；

    （2）打開新窗口；

    （3）顯示系統提示框；

    （4）在狀態欄上顯示信息；

        （5）實現實時操做；

三、 文檔對象的經常使用屬性：

 

應用實例：

 

建立窗口對象：

 

四、 文檔對象的經常使用方法：

 

對象屬性

document.title //設置文檔標題等價於HTML的title標籤

document.bgColor  //設置頁面背景色

document.fgColor  //設置前景色(文本顏色)

document.linkColor //未點擊過的連接顏色

document.alinkColor  //激活連接(焦點在此連接上)的顏色

document.vlinkColor  //已點擊過的連接顏色

document.URL  //設置URL屬性從而在同一窗口打開另外一網頁

document.fileCreatedDate   //文件創建日期，只讀屬性

document.fileModifiedDate   //文件修改日期，只讀屬性

document.fileSize 　　　     //文件大小，只讀屬性

document.cookie　　　　     //設置和讀出cookie

document.charset 　　　　 //設置字符集 簡體中文:gb2312

經常使用對象方法

document.close()

document.open()

document.writeIn()

document.write() 　　　　       //動態向頁面寫入內容

document.createElement(Tag)　　 //建立一個html標籤對象

document.getElementById(ID) 　  //得到指定ID值的對象

document.getElementsByName(Name)  //得到指定Name值的對象

document.getElementsByClassName(「className」)  //得到指定class值的對象(數組)

document.getElementsByTagName(「TagName」) //得到指定Tag對象

document.body.appendChild(oTag)

 

例如：動態添加文本框：

<script type="text/javascript">

function addInput(){

    var txt=document.createElement("input");//動態添加一個input文本框

    //var t=document.getElementById("text") 獲取一個元素，經過t達到對這個元素的操做

    txt.type="text";//爲添加的文本框type屬性賦值

    txt.name="txt";//爲添加的文本框name屬性賦值

    txt.value="動態添加的文本框";//爲添加的文本框value屬性賦值

document.form1.appendChild(txt);//把文本框做爲子節點追加到表單中 }

</script>

五、 跳轉頁面：document.URL="new.html"

 

第10章 表單對象

文檔(Document)對象的forms屬性能夠返回一個數組，數組中的每一個元素都是一個form對象。form對象又稱表單對象，經過該對象能夠實現輸入文字、選擇選項和提交數據等功能。

表單元素：文本框（屬性方法應用）；按鈕（屬性方法應用）；單選框和複選框（屬性方法應用）；下拉菜單（屬性方法Option應用）

訪問表單和表單元素：JS訪問表單；JS訪問表單元素

表單對象的屬性、方法與事件

一、JS訪問表單的三種方法：數組編號訪問document.form[0];表單名稱訪問document.myform;

定位訪問document.getElementById("form1")

二、Js訪問表單元素：數組編號訪問document.form1.element[0];元素名稱訪問document.form1.text1;

    ID定位訪問:document.getElementById("elementID")

三、表單對象的屬性：name/action/method/enconding/id/length/target/element

   表單對象的方法：reset()/submit()   表單對象的事件：reset/submit

四、文本框的屬性：id/name/type/value/rows/cols/disabled

   文本框的方法：blur()/focus()/click()/select()

   onclick="return checkinput()"  若是函數返回真則跳轉，不然不跳轉。

五、按鈕三種按鈕：普通按鈕一般調用函數；提交按鈕用來提交表單；重置按鈕用來重置表單。

   按鈕的屬性：id/name/type/value/disabled 按鈕的方法blur()/focus()/click()

   <form name="form1" method="post" onSubmit="return Mycheck()">…</form>

六、單選框和複選框的屬性：id/name/type/value/length/checked/disabled 方法：blur()/focus()/click()

七、下拉菜單：<select><option>。<select>用於聲明下拉菜單，<option>用於建立下拉菜單選項。

   下拉菜單select的屬性:id/name/type/value/multiple多選/length個數/option數組/selectedIndex/disabled

下拉菜單select方法：blur()/focus()/click()/remove(i)

八、建立下拉菜單選項的構造函數：new Option(text,value,defaultSelected,selected)

  例如,表單myform,下拉菜單meselect,爲其添加一個下拉菜單選項：

       document.myform.myselect.options[0] = new Option("text","value");

Option屬性：defaultSelected是否默認；index數組option[]下標；selected是否選中；

        text選項中的文字；value選項中的值。

 

第11章 圖像對象

圖像對象概述：圖像對象介紹；圖像對象的屬性；圖像對象的事件

圖像對象的應用：圖片的隨機顯示；圖片置頂；圖片翻轉效果

一、JS中的三種引用圖片的方式：按編號：document.images[0];按名稱：document.images[imageName];

    ID定位訪問：document.getElementById("imageID")

二、圖像對象的屬性：border/height/width/name/src/alt顯示的文字/hspace/vspace文字與圖片的距離

    lowsrc低分辨率圖片/complete徹底加載判斷

三、圖像對象的事件：image對象沒有方法，除了經常使用的事件，還有abort/error等事件。

    abort放棄加載；load成功加載；error加載出錯；click/dblclick/mouseover/mouseout/……

setTimeout("changebg()",1000) //每隔1秒（1000毫秒）執行一次

圖片置頂：document.documentElement.scrollTop; document.documentElement.scrollLeft; document.documentElement.clientWidth三個關鍵屬性。setInterval('permute()',1)每隔1毫秒。

四、圖片翻轉效果：CSS濾鏡技術。Filter:濾鏡名稱(參數)；可在各個標記的style屬性中設置濾鏡。

 

alpha 設置透明度

blendTrans 設置淡入淡出效果

blur 創建模糊效果

chroma 把指定的顏色設置爲透明

dropShadow 設置投射陰影

flipH 水平翻轉

flipV 垂直翻轉

glow 爲對象的外邊界增長光效

gray 設置灰度顯示

invert 翻轉色調亮度，創建底片效果

Light 在一個對象上進行燈光投影

Mask 爲一個對象創建透明膜

RevealTrans 設置濾鏡的轉換效果

shadow 創建立體式陰影效果

wave 波形效果

xray X光效果，只顯示對象的輪廓

 

例如：function Hturn(){

    image11.style.filter = image11.style.filter =="flipH"?"":"flipH";//設置水平翻轉

}

 

第12章 文檔對象模型(DOM)

DOM概述

DOM對象節點屬性

節點的操做：建立節點；插入節點；複製節點；刪除節點；替換節點

獲取文檔中的指定元素；經過元素的name屬性獲取元素

與DHTML相對應的DOM:innerHTML和innerText屬性；outerHTML和outerText屬性

一、在文檔對象模型中，每一個對象均可稱爲一個節點（Node）:根節點/父節點/子節點/兄弟節點/後代/葉子節點

元素節點、文本節點、屬性節點

二、DOM對象節點屬性：在對節點進行查詢時，首先使用getElementById()方法來訪問指定的id節點，而後應用nodeName屬性、nodeType屬性和nodeValue屬性來獲取該節點的名稱、類型和值。另外，經過使用parentNode,firstChild,lastChild,previousSibling和nextSibling等屬性，能夠遍歷文檔樹！

須要對文檔現有信息進行檢索的時候下面DOM方法最有用：

getElementById

getElementByTagName

getAttribute

firstChild.nodeValue     元素的第一個節點的內容

在須要把信息添加到文檔中去時，如下DOM最有用：

createElement                 建立元素節點

createTextNode（須要的內容）  建立文本節點

appendChild                   添加到元素節點

insertBofore

insertAfter                   須要本身編寫

setAttribute               

元素在節點中的位置信息：

parentNode 當前節點的父節點

nextSibling   當前節點的後一個兄弟節點

previousSibling  當前節點的前一個兄弟節點

childNodes 子節點列表

firstChild 當前節點的第一個子節點

lastChild  當前節點的最後一個子節點

元素信息：

nodeName 節點的名稱

nodeValue 節點的值，通常都是文件文本

nodeType 節點的類型

attributes 元素的屬性列表

style     每一個元素都有一個style屬性 他們也都是一個對象

三、 節點的操做：建立添加節點

<script type="text/javascript">

function completePoem(){  //定義completePoem()函數

var div = document.createElement('div');//建立div元素

div.className = 'poem';                 //爲div元素添加CSS類名

var last = myform.last.value;           //從myform中的input(last)中獲取古詩最後一句

txt=document.createTextNode(last);      //建立文本節點

div.appendChild(txt);                   //將文本節點添加到建立的div元素中

document.getElementById('poemDiv').appendChild(div);//將建立的div元素添加到id爲poemDiv的div元素中

}

</script>

四、 節點操做：插入節點  insertBefore(new,ref)  將新的子節點添加到指定的子節點的前面（能夠先寫這一行語句，而後，圍繞着這一行的參數再寫別的語句，就比較容易理順其邏輯關係了）

node.parentNode.insertBefore(newNode,node)   插入定位得巧妙！

五、 複製節點：obj.cloneNode(deep)

六、 刪除節點：obj.removeChild(oldChild)

七、 替換節點：obj.replaceChild(new,old)

八、 獲取文檔中指定的元素

經過元素的id屬性獲取元素document.getElementById('userId');

經過元素的name屬性獲取元素：document.getElementName('likeRadio');返回的是一個數組

九、 經過DHTML對象模型直接得到網頁對象，經過innerHTML,innerText,outerHTML,outerText能夠很方便地讀取、修改HTML元素內容。

innerHTML能夠用於爲指定的HTML文本替換元素的內容。好比：

document.geyElementById("clock").innerHTML="2017-<b>12</b>-24";

innerText即便指定的HTML文本也會原樣輸出。

innerHTML,innerText還能夠獲取元素的內容。

outerHTML,outerText替換的是整個目標節點，也就是這兩個屬性還對元素的自己進行修改。

 

第13章 Window窗口對象

窗口事件：通用窗口事件；擴展窗口事件

控制窗口：移動窗口；窗口滾動；改變窗口大小；訪問窗口歷史；設置超時

Window對象概述：屬性、方法、使用

對話框：警告對話框；確認對話窗；提示對話框

打開與關閉窗口：打開窗口；關閉窗口

一、Window對象的屬性

  document/frames/location/name/status/defaultStatus/top/parent/opener/closed/self/screen/navigator

二、Window對象的方法

alert()/confirm()/prompt()/open()/close()/focus()/blur().scrollTo(x,y)/scrollBy(offsetx,offsety)/setTimeout(timer)/setInterval(interval)/moveTo(x,y)/moveBy(offsetx,offsety)/resizeTo(x,y)/resizeBy(offset,offsety)/print()/navigate(URL)

三、Window對象的使用

  Window是不須要new運算符來建立對象的。self表明當前窗口，parent表明父級窗口

 

四、對話框：警告窗口alert();確認窗口confirm();提示窗口prompt（str1，str2）

五、打開與關閉窗口：windowVar=window.open(url,windowname[,location])

   關閉窗口：window.close();或close();或this.close();

六、 控制窗口：移動窗口：window.moveTo(x,y)將窗口移動到指定位置。window.resizeTo(x,y)將窗口改爲指定大小。screen屏幕對象，反應了當前屏幕設置：屬性：width/height/colorDeph……

窗口滾動：scroll(x,y)指定窗口的當前位置。scrollTo(x,y)與scroll（x,y）相同，都是絕對位置。scrollBy(x,y)相對位置滾動。resizeBy(x,y)當前窗口改爲指定大小（x,y）。

七、訪問窗口歷史：[window.]history.property|method([parameters])

   屬性：length歷史列表的長度，用於判斷列表中的入口數目；current當前文檔的URL

         next 歷史列表的下一個URL；previous 歷史列表的前一個URL

   方法：back()退回前一頁；forward()從新進入下一頁；go（）進入指定的網頁

八、設置超時：timerID=setTimout(要執行的代碼，毫秒爲單位的時間); 停止：clearTimeout(timerId)

九、窗口事件：window.通用事件名=要執行的JS代碼

              onfocus/onblur/onload/onunload/onresize/onerror

    擴展窗口事件：onafterprint窗口被打印後；onbeforeprint敞口被打印或預覽前；

        onbeforeunload窗口未被載入前；ondragdrop文檔被拖到窗口使；onhelp當幫助鍵F1按下時；

        onresizeend調整大小結束時；onresizestart調整大小開始時；onscroll滾動條滾動時。

                                   2/10/2019 10:20:00 PM  （22:20:10）

二〇一九年二月十一日星期一0時6分

第3篇 高級應用

第14章 Ajax技術

Ajax概述：Ajax應用案例；開發模式；優勢

Ajax的技術組成：XMLHttpRequest對象；XML語言；JavaScript腳本語言；DOM；CSS

XMLHttpRequest對象：對象的初始化；經常使用屬性；經常使用方法

一、 Ajax是Asynchronous JavaScript And XML縮寫，異步JavaScript和XML技術，客戶端異步請求，不須要刷新頁面的狀況下與服務器進行通訊。加強的JavaScript，更新部分頁面內容而不重載整個頁面。

二、 Ajax開發模式：用戶的行爲將變成對Ajax引擎的一次JavaScript調用。而不是每次操做都觸發一次HTTP請求。

三、 Ajax的優勢：經過引入中間媒介（Ajax引擎）：①把一部分服務器負擔的工做轉移到了客戶端。②不須要重載整個頁面的狀況下經過DOM及時將更新的內容顯示在頁面上。③可調用XML等外部數據，是頁面顯示和數據分離。④不須要下載插件和小程序。⑤沒有平臺限制。

缺點就是：⑥大量的JavaScript代碼，不易維護。⑦可視化設計上比較困難。⑧打破「頁」的概念。⑨給搜索引擎帶來困難。

四、 Ajax的技術組成：Ajax是XMLHttpRequest對象和JavaScript、XML語言、DOM、CSS等多種技術的組合。但，只有XMLHttpRequest對象是新技術。XMLHttpRequest對象是一個具備應用程序接口的JavaScript對象，可以使用超文本傳輸協議（HTTP）鏈接服務器。微軟、1999年、IE5.0

五、 XML語言，Extensible Markup Language,可擴展的標記語言。描述結構化數據格式。

六、 JavaScript腳本語言，Ajax就是利用它將DOM,XHTML(HTML),XML,CSS等技術綜合了起來，並控制它們的行爲。JS不是Java語言的精簡版，只能在某個解釋器或「宿主」上運行，如ASP,PHP,JSP,瀏覽器或windows腳本宿主。

七、 DOM文檔對象模型的縮寫，它爲XML文檔的解析定義了一組接口。解析器讀入整個文檔，而後構建一個駐留內存的樹結構。最後經過DOM能夠遍歷樹以獲取來自不一樣位置的數據！

八、 CSS層疊樣式表的縮寫。

九、 XMLHttpRequest是Ajax中最核心的技術。Ajax能夠像桌面應用程序同樣只同服務器進行數據層面的交換，不用每次都刷新頁面，也不用每次都將數據處理工做交給服務器來作。

XMLHttpRequest對象的初始化：

IE瀏覽器會把XMLHttpRequest實例化爲一個ActiveX對象：

    var http_request =new ActiveXObject("Msxml2.XMLHTTP");

或： var http_request =new ActiveXObject("Microsoft.XMLHTTP");

非IE瀏覽器會實例化爲一個本地JavaScript對象（如：Firefox,Opera,Mozilla,Safari）

     var http_request = new XMLHttpRequest();

十、XMLHttpRequest屬性：

指定狀態改變時所觸發的事件處理器屬性：http_request.onreadystatechange=getResult();

    獲取請求狀態屬性：readyState 5個值：0未初始化，1正在加載，2已加載，3交互中，4完成

    獲取服務器字符串響應屬性：var h=http_request.responseText;

    獲取服務器的XML響應的屬性：var xmldoc = http_request.responseXML;

    返回服務器的HTTP狀態碼的屬性：http_request.status 100繼續發送請求；200請求已成功；202請求已接受，但還沒有成功；400錯誤的請求；404文件未找到；408請求超時；500內部服務器錯誤；501服務器不支持當前請求所須要的某個功能。

十一、XMLHttpRequest對象的經常使用方法：

    建立新請求的方法：open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

    向服務器發送請求的方法：send(content)

    設置請求的HTTP頭的方法：setRequestHeader("header","value")

    中止或放棄當前異步請求的方法：abort()

    返回HTTP頭信息的方法：getResponseHeader("headerLabel")或getAllResponseHeaders()

                                           2/11/2019 2:06:02 AM

二〇一九年二月十一日星期一上午10時35分

第15章 jQuery基礎

jQuery概述

jQuery下載與配置

jQuery選擇器：工廠函數；基本選擇器；層級選擇器；過濾選擇器；屬性選擇器；表單選擇器

一、 jQuery是一套簡潔、快速、靈活的JavaScript腳本庫。

二、 下載與配置：把下載下來的庫放入項目指定的文件夾JS中，而後在全部腳本文件<script>以前引用。

<script type="text/javascript" scr="JS/jquery-3.3.1.min.js"></script>

三、 jQuery的工廠函數：$() 例如：$("div")  $("#username")  $(".btn_grey")

四、 基本選擇器：ID選擇器、元素選擇器、類名選擇器、多種匹配條件選擇器和通配符選擇器。

1、ID選擇器：$("#id"); id在頁面中是惟一的，若是有兩個相同的，JS可能會報錯！

例如：$(document).ready(function(){                 //在頁面加載完成後執行代碼。

  $("input[type='button']").click(function(){      //爲按鈕綁定單擊事件

          var inputValue = $("#testInput").val();    //獲取文本框的值

          alert(inputValue);    //輸出文本框的值

      });  });

text():獲取或者改變指定元素的文本

html():獲取或改變指定元素的html元素以及文本

val():獲取或者改變指定元素的value值（通常是表單元素）

以上3個都是jquery類庫中的語法,基本沒啥區別，都是得到當前對象的value值（通常是表單元素）

只是，this.value是js的原生語法；$(this).val()是jquery的語法，須要引入jquery庫文件

2、元素選擇器：$("element"); 多數狀況下，元素選擇器匹配的是一組數據。

例如：$(document).ready(function(){       //在頁面加載完成後執行代碼。

        $("input[type='button']").click(function(){     //爲按鈕綁定單擊事件

            $("div").eq(0).html("<img src='images/strawberry1.jpg'/>這裏長出了一片草莓");  //獲取第一個div元素

            $("div").get(1).innerHTML="<img src='images/fish1.jpg'/>這裏的魚沒有了";    //獲取第二個div元素

        });  });

    索引器eq()返回的仍是一個JQ對象，因此，必需要用JQ方法HTML()來載入新元素

索引器get()返回的是一個JS對象（DOM對象），因此，必需要用DOM對象的方法innerHTML=""

  3、類名選擇器：$(".class"); 一個元素能夠有多個CSS類，一個CSS類也能夠匹配多個元素。

例如：$(document).ready(function() {       //在頁面加載完成後，因爲沒有綁定時間，當即執行代碼。

        var myClass = $(".myClass");                //選取DOM元素

        myClass.css("background-color","#C50210");  //爲選取的DOM元素設置背景顏色

        myClass.css("color","#FFF");                //爲選取的DOM元素設置文字顏色

    });

  4、複合選擇器：$("selector1,selector2,selectN"); 將多個選擇器組合在一塊兒，逗號分隔，"或"匹配。

      返回一個jQuery包裝集，利用索引器獲取集合中的對象。

  例如：$(document).ready(function() {

$("input[type=button]").click(function(){ //綁定按鈕的單擊事件

             $("div,#span").addClass("change");    //添加CSS中定義的類：.change{}

  }); });

      JQ方法：addClass()向被選定的元素添加一個或多個類（空格分隔），但不會移除已存在的類。

  5、通配符選擇器：$("*");

五、層級選擇器

   (1)ancestor descendant祖孫選擇器：$("ancestor descendant"); 好比$("ul li");

   (2)parent>child父子選擇器：$("parent>child");直接子元素，好比$("form>input");

   (3)prev+next兄弟選擇器：$("prev+next");緊跟prev後面的next元素，好比$("div+img");

   (4)prev~siblings兄弟族選擇器：$("prev~siblings");prev後全部siblings元素,如$("div~ul");

六、過濾選擇器

   (1)簡單過濾器，以：號開頭匹配找到的第一個元素。

 

$("tr:first")    //匹配表格的第一行

$("tr:last")    //匹配表格的最後一行

$("tr:even")   //匹配索引值爲偶數的行

$("tr:odd")    //匹配索引值爲奇數的行

$("tr:eq(1)")   //匹配第二個div元素

$("tr:gt(0)")   //匹配第二個及以上的div元素

$("tr:lt(2)")    //匹配第二個及如下的div元素

$(":header")   //匹配所有的標題元素

$("input:not(:checked)")//匹配沒被選中的元素

$(":animated ")  //匹配全部正在執行的動畫

 

(2)內容過濾器：經過DOM元素包含的文本內容篩選。

過濾器       說明  示例

:contains(text)    匹配包含給定文本的元素       $("li:contains('DOM')")    //匹配含有「DOM」文本內容的li元素

:empty       匹配全部不包含子元素或者文本的空元素 $("td:empty")   //匹配不包含子元素或者文本的單元格(空元素)

:has(selector)     匹配含有選擇器所匹配元素的元素         $("td:has(p)")    //匹配表格的單元格中含有<p>標記的單元格

:parent      匹配含有子元素或者文本的元素 $("td: parent")    //匹配不爲空的單元格，即在該單元格中還包括子元素或者文本

   (3)可見性過濾器：$("input:visible").val() 獲取顯示的input的值；

$("input:hidden:eq(1)").val()獲取第二個隱藏的input的值。

   (4)表單對象的屬性過濾器：

過濾器   說明 示例

:checked 匹配全部選中的被選中元素    $("input:checked")    //匹配checked屬性爲checked的input元素

:disabled匹配全部不可用元素    $("input:disabled")   //匹配disabled屬性爲disabled的input元素

:enabled 匹配全部可用的元素    $("input:enabled ")   //匹配enabled屬性爲enabled的input元素

:selected匹配全部選中的option元素    $("select option:selected")   //匹配select元素中被選中的option

   (5)子元素選擇器

$('li:first-child').css('background', '#ccc'); //每一個父元素第一個li 元素

$('li:last-child').css('background', '#ccc'); //每一個父元素最後一個li 元素

$('li:only-child').css('background', '#ccc'); //每一個父元素只有一個li 元素

$('li:nth-child(odd)').css('background', '#ccc'); //每一個父元素奇數li 元素

$('li:nth-child(even)').css('background', '#ccc'); //每一個父元素偶數li 元素

$('li:nth-child(2)').css('background', '#ccc'); //每一個父元素第三個li 元素

七、 屬性選擇器：經過元素的屬性做爲過濾條件進行篩選對象。

$("div[name]");  $("div[name='test']");  $("div[name!='test']"); 

$("div[name*='test']")含有'test'    $("div[name^='test']")以'test'開頭

$("div[name$='test']")以'test'結尾  $("div[id][name^='test']")複合屬性

八、表單選擇器：匹配常常在表單中出現，但不必定在表單中的元素。

   $(":input");$("form :input");$(":button");$(":checkbox");$(":file");$(":hidden");

$(":image");$(":password");$(":radio");$(":reset");$(":submit");$(":text")

二〇一九年二月十一日星期一17時35分     (2/11/2019 5:34:47 PM)

第16章 jQuery控制頁面和事件處理程序

jQuery控制頁面：

對元素內容和值進行操做：對元素內容操做；對元素值操做

對DOM節點進行操做：建立節點、插入節點、刪除複製替換節點

對元素屬性進行操做

對元素的CSS樣式進行操做：經過修改CSS類實現；經過修改CSS屬性實現

jQuery的事件處理：

    頁面加載響應事件

    jQuery中的事件

    事件綁定：爲元素綁定事件；移除綁定；綁定一次性事件處理

    模擬用戶操做：模擬用戶的操做觸發事件；模仿懸停事件

一、 元素的值一般都是元素的value屬性值。

二、 元素的內容分文本內容和HTML內容：

對文本內容操做：獲取：alert($("div").text());設置：$("div").text("設置包括HTML內容的新文本")

   對HTML內容的操做：alert($("div").html());獲取div中第一個元素的HTML內容

   從新設置div元素的HTML內容：

$("div").html("<span style='color:#FF0000'>我是經過html()方法設置的HTML內容"</span>);

三、對元素值操做：獲取元素的值val();設置全部匹配的元素的值val(val);設置多項值val(arrVal)；

四、對DOM節點進行操做：查建插復刪

   (1)建立節點：建立新元素、將新元素插入到文檔中（父元素中）。

      方法一：var $p=$("<p></p>");  //把p標籤賦值給$p

              $p.html("<span style='color:#ff0000'>方法一添加的內容</span>");

              $("body").append($p);

      方法二：var $txtP=$("<p><span style='color:#ff0000'>方法二添加的內容</span></p>");

              $("body").append($txtP);

      方法三：$("body").append("<p><span style='color:#ff0000'>方法三添加的內容</span></p>");

   (2)插入節點：在元素內部插入節點：append()在匹配的元素內部追加內容，appendTo()將匹配的元素追加到另外一個元素的後面。prepend()prependTo()是追加到前面。

   在元素外部插入：$("#B").after("<p>A</p>");//向id爲B的元素的後面添加一個段落。

       $("<p>test</p>").insertAfter("#B");//將要添加的段落插入到id爲B元素的後面。

       $("#B").before("<p>A</p>");//向id爲B的元素前添加一個段落。

       $("#B").insertBefore("#A");//將要id爲B元素添加到id爲A的元素前面。

(3)刪除、複製和替換節點

   $("#div1").empty(); //刪除div1中的全部子節點。不刪div1。

   $("#div2").remove();  //刪除id爲div2的元素，包括div2自己。

   複製節點：$(function(){

                $("input").bind("click",function(){  //爲按鈕綁定單擊事件

                   $(this).clone().insertAfter(this);  //複製本身但不復制事件處理

});

});

       替換節點：replaceAll(selector)使用匹配的元素替換掉全部selector匹配的元素。

                 replaceWith(content)將全部匹配的元素替換成指定的HTML或DOM元素。

       例如：$("#div1").replaceWith("<div>replaceWith()方法的替換結果</div>");

             $("<div>replaceAll()方法的替換結果</div>").replaceAll("#div2");

五、 對元素屬性的操做

獲取屬性：attr(name),如$("img").attr('src');

設置屬性：attr(key,value) 如$("img").attr("title","草莓正在生長");

設置多個屬性，鍵值對存儲：如：$('div').attr({name:'hahaha',class:'happy'});

移除屬性：$("#box").removeAttr('name class');

六、 對元素的CSS樣式的操做

經過修改CSS類：$("div").addClass("blue line");爲所有div元素添加blue和line兩個CSS類

    $("div").removeClass("line");刪除所有div元素中名稱爲line的CSS類

    $("div").toggleClass("yellow"); 當div元素中存在名爲yellow類時則刪除此類，不然添加

    toggleClass(class,switch):當switch爲true時添加類，爲false時刪除類

經過修改CSS屬性：$("div").css("color");獲取第一個匹配的div元素的color屬性值。

    $("img").css("border","1px soild #000000"); 爲所有img元素設置邊框樣式

    $("tr").css({     以鍵值對的形式設置多個屬性。

       "background-color":"#0A65F3",

        "font-size":"14px",

        "color":"#FFFFFF"

});

七、jQuery的事件處理 「事件是腳本語言的靈魂」

   頁面加載文檔就緒的時候：$(document).ready(function(){代碼段});

可簡寫:$().ready(function(){代碼段});

還可進一步簡寫：$(function(){代碼段});   不提倡，由於不具可讀性！

   jQuery中的事件：

 

blur( ) 元素失去焦點

change( ) 用戶改變域的內容 input, textarea, select

click( ) 鼠標點擊某個對象 幾乎全部元素

dblclick( ) 鼠標雙擊某個對象 幾乎全部元素

error( ) 當加載文檔或圖像時發生某個錯誤

focus( ) 元素得到焦點

keydown( ) 某個鍵盤的鍵被按下 幾乎全部元素

keypress( ) 某個鍵盤的鍵被按下或按住 幾乎全部元素

keyup( ) 某個鍵盤的鍵被鬆開 幾乎全部元素

load( fn ) 某個頁面或圖像被完成加載 window, img

mousedown( fn ) 某個鼠標按鍵被按下 幾乎全部元素

mousemove( fn ) 鼠標被移動 幾乎全部元素

mouseout( fn ) 鼠標從某元素移開 幾乎全部元素

mouseover( fn ) 鼠標被移到某元素之上 幾乎全部元素

mouseup( fn ) 某個鼠標按鍵被鬆開 幾乎全部元素

resize( fn ) 窗口或框架被調整尺寸

scroll( fn ) 滾動文檔的可視部分時 window

select( ) 文本被選定 document, input, textarea

submit( ) 提交按鈕被點擊 form

unload( fn ) 用戶退出頁面 window

 

八、事件綁定

    爲元素綁定事件：bind(type,[data],fn)  fn爲事件處理程序

移除綁定：unbind([type],[data])若是不選參數將刪除匹配元素上的全部綁定事件。

綁定一次性事件處理：one(type,[data],fn)

八、 模擬用戶操做：

九、 模擬用戶的操做觸發事件：triggerHandler()和trigger()（後者，同名的默認行爲會執行！）

$(document).ready(function(){

    $("input:button").bind("click",function(event,msg1,msg2){

        alert(msg1+msg2);          //彈出對話框

    }).trigger("click",["歡迎訪問","明日科技"]);   //頁面加載觸發單擊事件

});

十、模擬懸停事件：hover(over,out)

$(document).ready(function() {

    $("#pic").hover(function(){

        $(this).attr("border",1);//爲圖片加邊框

    },function(){

      $(this).attr("border",0);//去除圖片邊框

  });

});

                           2/11/2019 11:06:51 PM

第17章 jQuery動畫效果

基本動畫效果：隱藏匹配元素；顯示匹配元素

淡入淡出的動畫效果

滑動效果：滑動顯示匹配的元素；滑動隱藏匹配的元素；經過高度的變化動態切換元素的可見性

自定義動畫效果：使用animate()方法建立自定義動畫；使用stop()方法中止動畫

一、隱藏匹配元素：$("img").hide(); 還能夠帶參數hide(speed,[callback])：時長和回調函數

二、顯示匹配元素：show()或show(speed,[callback])

三、淡入淡出的效果：$("img").fadeIn(300);增大不透明度實現淡入。

$("img").fadeOut(300):減小透明度實現淡出。$("img").fadeTo(300,0.15)在0.3秒內透明度到15%

四、滑動效果：slideDown(300)滑動顯示。slideUp()滑動隱藏。slideToggle(600)經過高度變化顯示或隱藏。

$(document).ready(function(){

  $("dd").hide(); //隱藏所有子菜單

$("dt[class!='title']").click(function(){//單擊主菜單執行函數

    if($(this).next().is(":hidden")){//若是匹配的元素被隱藏

      $(this).css("backgroundImage","url(images/title_hide.gif)");//改變主菜單的背景

        $(this).next().slideDown("slow");//滑動顯示匹配的元素

      }else{

      $(this).css("backgroundImage","url(images/title_show.gif)");//改變主菜單的背景

        $(this).next().slideUp("slow");//滑動隱藏匹配的元素

      }});});

五、自定義的動畫效果：animete(params,speed,callback)   params包含屬性和值的映射。

     說明：使用前必須設置元素的定位屬性position爲relative或absolute,才能動起來。

二〇一九年二月十一日星期一23時56分 上海