《零基礎學JavaScript(全彩版)》學習筆記
二〇一九年二月九日星期六0時9分
前期：
剛剛學完《零基礎學HTML5+CSS3(全彩版)》，准備開始學習JavaScript。對Web前端好做一個全面深入的了解，為Python編程的提高打下一個堅實的基礎。
本書除了項目實戰，共計17章390頁，不光本身的視頻，光騰訊課堂的JS視頻就有35課時以上。計划用時4天到7天的時間學完。
還是先把書過一遍吧，看書比較好掌握進度，然后再看書補補漏。
第1篇 基礎知識
第1章 JavaScript簡介
1、JavaScript的起源、特點、應用
2、WebStorm的下載與安裝
3、JavaScript在HTML中的使用：頁面直接嵌入JS代碼；鏈接外部JS文件；作為標記的屬性值使用。
4、JS的基本語法：執行順序；大小寫敏感；JS會忽略空格、換行和制表符，但換行有斷句的作用；每行結尾的分號可有可無；//單行注釋，/*……*/多行注釋
5、document.write():JavaScript語句，表示可以直接在頁面中輸出括號中的內容。
6、alert():JS語句，彈出一個對話框，顯示括號內的內容。
7、alert(new Date().toLocaleString());顯示當前的日期和時間
第2章 JavaScript語言基礎
數據類型：數值型：（十進制,十六進制,八進制,浮點型數據,特殊值Infinity,特殊值NaN）；
字符串型；布爾型；特殊數據類型（未定義值，空值(null)）
常量和變量：常量；變量（命名、聲明、賦值、類型）
運算符：算術運算符、字符串運算符、比較運算符、賦值運算符、邏輯運算符、條件運算符、其他運算符、運算符優先級。
表達式：
數據類型的轉換規則：
1、 特殊值：Infinity正無窮大；-Infinity負無窮大。
2、 特殊值NaN：非數字。比如0/0.
3、 逗號運算符用於將多個表達式排在一起，而整個表達式的值為最后一個表達式的值。
4、 typeof運算符：返回操作數的數據類型。
5、 new運算符：創建一個新的內置對象實例。
6、 變量聲明：var
第3章 JavaScript基本語句
條件判斷語句：if語句；switch語句
循環語句：while語句；do…while語句；for語句
跳轉語句：continue語句；break語句
異常處理語句：try…catch…finall語句；Error對象；throw語句拋出異常
第4章 函數
函數的定義和調用：函數的定義；函數的調用(簡單調用、事件響應調用、鏈接調用)
函數的參數：
函數的返回值：
嵌套函數：嵌套定義；嵌套調用
遞歸函數：
變量的作用域：全局變量和局部變量；變量的優先級
內置函數：數值處理函數；字符串處理函數
定義匿名函數：在表達式中定義函數；使用Function()構造函數
1、 定義函數： function 函數名（[參數列表]）{語句 [return 返回值]}
2、 函數的調用：通過鏈接調用<a href="javascript:test();">單擊鏈接</a>
3、 形參、實參
4、 函數的返回值：return 表達式;
5、 嵌套函數；遞歸函數：自己調用自己。遞歸兩步：找規律，找出口！
6、 內置函數：數值處理處理函數：parseInt(string,n)字符串轉整數；parseFloat()字符串轉浮點數；
isNaN(num)判斷值是否為NaN;isFinite(num)檢驗參數是否有限；
7、 字符串處理函數：eval(string)計算字符串表達式的值：eval("x=5;y=6;document.write(x*y)");
8、定義匿名函數：在表達式中定義函數和使用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特點：單線程+解釋性語言）
第一步：語法分析：先掃描一遍
第二步：預編譯：函數聲明整體提升；變量的聲明提升（變量賦值沒提升）
第三步：解釋執行
預編譯前奏：
1、 imply global:暗示全局變量：即任何變量，如果變量未經聲明就賦值，此變量就為全局對象所有。
2、 一切聲明的全局變量全是window的屬性。
2/9/2019 12:42:41 PM
預編譯四部曲：
1、 創建AO對象 --Activation Object 活躍對象-作用域-執行期上下文
全局的為GO對象—Global O bject window對象
2、 找形參和變量聲明，將變量和形參名作為AO屬性名。值為undefined
3、 將實參值和形參統一
4、 在函數體里面找函數聲明，值賦予函數體
預編譯發生在函數執行的前一刻。
！！ 雙非
敲代碼的指法：……
[[scope]]作用域鏈
立即執行函數：此類函數沒有聲明，在一次執行過后即釋放。適合做初始化工作。
只有表達式才能被執行符號執行，()是執行符，先執行外面的()。表達式里面的函數在外面就失去了意義，於是：
(function test(){console.log('a');}())就變成了立即執行函數：(function(){console.log('a');}())
閉包：當內部函數被保存到外部時，將會生成閉包。閉包會導致原有作用域鏈不釋放，造成內存泄露。
閉包的作用：實現公有變量，函數累加器；可以做緩存（存儲結構）eater；可以實現封裝，屬性私有化，Person()；模塊化開發，防止污染全局變量。
閉包的防范：閉包會導致多個執行函數共用一個公有變量，如果不是特殊需要，應盡量防止這種情況發生。
函數只有在執行的時候才會關注函數體內的變量，當形成閉包的時候，在外部執行函數時訪問的永遠是內部函數最后形成的變量值！！！函數在定義的時候不用看函數體內是什么東西！！！除非函數立即執行！！！
二〇一九年二月九日星期六20時2分
第5章 對象
對象簡介：什么是對象；對象的屬性和方法；JS對象的種類
自定義對象創建：直接創建自定義對象；通過自定義構造函數創建對象；通過Object對象創建自定義對象。
對象訪問語句：for…in 語句;with語句
常用內部對象：Math對象；Date對象
1、 對象的屬性：包含在對象內部的變量。用來描述對象特性的一組數據。對象狀態。
2、 對象的方法：包含在對象內部的函數。用來實現某個功能。對象行為。
3、 對象的種類：自定義對象；預定義對象：內置對象和瀏覽器對象。
4、 直接創建自定義對象：var 對象名 = {屬性名1:屬性值1,屬性名2:屬性值2,屬性名3:屬性值3,……}
5、 自定義構造函數創建對象：調用構造函數要用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);};
6、prototype屬性是所有函數都具有的屬性，用於向對象添加屬性和方法：object.prototype.name=value
如：Student.prototype.show=function(){alert("姓名:"+this.name+"\n性別:"+this.sex);}
var student1=new Student("張三","男");
student1.show();
7、通過內置對象創建自定義對象：obj=new Object([value]) 如：var student=new Object();
8、專門應用於對象的語句：for…in;用於遍歷對象的每一個屬性，每次將屬性名作為字符串存在變量中。for(var example in object){……}
with(對象名稱){語句}：大括號中的屬性引用就不在需要對象名加點的形式了。
9、常用內部對象：內部動態對象必須用new創建實例才能引用；內部靜態對象可以直接引用。
10、靜態對象Math：數學常量和數學函數。PI圓周率、abs(x)絕對值、exp(x)乘方、max(n1,n2…)最大值、
min()、pow(x,y)x的y次方、random()隨機數、round(x)四舍五入取整、sqrt(x)平方根
11、日期對象：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屬性
數組的方法：數組的添加和刪除；設置數組的排列順序；獲取某段數組元素；數組轉換成字符串
1、 JS是一種弱類型語言，數組中的每個元素的類型可以不同，甚至數組可以包含數組。
2、 定義空數組： arrayObject = new Array() 然后再給數組賦值arr[0]="零基礎學JavaScript";
3、 定義數組時可以定義數組的個數：arrayObject = new Array(size)
4、 定義數組時直接賦值：arrayObject = new Array(element1,element2,element3,…)
5、 直接定義數組：不使用構造函數，直接把數組元素放在一個中括號中：
arrayObject =[element1,element2,element3,…]
6、 數組元素的刪除：delete arr[1]; 刪除的只是元素的值，變為undefined，元素的個數並未減少。
7、 數組的屬性：arr.length 數組的長度（元素個數）；自定義屬性：Array.prototype.name=value
8、 數組的添加和刪除：
concat()方法：將其他數組連接到當前數組的尾部，產生一個新數組，原數組的元素和長度不變
arrayObject.concat(arrayX,arrayX,……,arrayX)
push()方法：向數組末尾添加一個或多個元素，返回添加后的數組的長度。
unshift()方法：向數組的開頭添加一個或多個元素，數組新長度。
pop()方法：刪除數組最后一個元素，返回刪除元素的值！
shift()方法：刪除數組中第一個元素的值，並返回刪除元素的值。
splice()方法：刪除數組中指定位置的元素，還可以向指定位置添加元素。
arrayObject.splice(start,length,element1,element2,…)
9、設置數組的排列順序：reverse()顛倒數組中元素的順序；sort()數組排序；
10、獲取某段數組元素：arrayObject.slice(start,end)
11、數組轉換成字符串：
arrayObject.toString() 返回的元素之間用逗號分隔
arrayObject.toLocalString()轉換成本地字符串
arrayObject.join(separator)將數組中所有元素放入一個字符串中
二〇一九年二月十日星期日0時3分
第7章 String對象
String對象的創建
String對象的屬性：length屬性；constructor屬性；prototype屬性
String對象的方法：查找字符串；截取字符串；大小寫轉換；連接和拆分；格式化字符串
1、String對象是動態對象，使用構造函數可以顯式創建字符串對象：
var newstr = new String(StringText)
任何一個字符串常量都可以看做是一個String對象，可直接用.調用其屬性和方法，不同的是typeof返回值不同，一個是string類型，一個是object類型。
2、字符串的長度stringObject.length; 判斷當前對象類型：newStr.constructor==String
自定義屬性或方法：String.prototype.name=value
3、String對象的方法：
查找字符串：charAt()返回指定位置的字符；indexOf()返回子字符串在字符串中首次出現的位置。
lastIndexOf()返回子字符串在字符串中最后出現的位置
截取字符串：slice()提取字符串的片段；substr()從指定位置開始提取指定長度的字符串。
substring()提取兩個指定索引之間的字符（不含索引元素）。
大小寫轉換：toLowerCase()轉成小寫，toUpperCase()轉成大寫。
連接和拆分：連接兩個或多個字符串：stringObject.concat(stringX,stringX,…)
把一個字符串分割成字符串數組：stringObject(separator,limit)
5、 格式化字符串：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常用事件；事件的調用；事件對象
表單相關事件：獲得焦點與失去焦點的事件；失去焦點內容改變事件；表單提交與重置事件
鼠標和鍵盤事件：鼠標單擊事件；鼠標按下和松開事件；鼠標移入和移出事件；鼠標移動事件；鍵盤事件
頁面事件：加載與卸載事件；頁面大小事件
1、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 當加載文檔或圖片時發生錯誤時
2、事件調用：在HTML中調用：<input name="save" type="button" value="保存" onclick="alert('');">
在JS中調用：首先要獲得對象的引用：b_save=document.getElementById("save");
然后綁定單擊事件：b_save.onclick=function(){……}
3、表單獲得焦點和失去焦點事件：<input type="text" onFocus="txtfocus()" onBlur="txtblur()">
4、表單失去焦點內容改變事件：一般用於下拉菜單中。 <select name="menu1" onChange="Fcolor()">
var e=windows.event; //獲取事件對象 var obj=e.srcElement; //獲取發生事件的元素
有了這個元素，就可以就對這個元素的屬性進行操作了！
6、 表單提交和重置事件：<form name="formname" onsubmit="return Funname" onreset="return Funname"></form>
eval("obj."+"text"+i).value=="" eval()計算某個字符串並執行其中的js代碼
7、 鼠標單擊事件onclick;鼠標按下和松開事件onmousedown,onmouseup;鼠標移入和移出事件onmouseover,onmouseout;鼠標移動事件onmousemove
8、 鍵盤事件：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">
9、鍵盤碼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
10、頁面事件：加載事件,網頁加載完成后觸發的事件onload;卸載事件，刷新、關閉、跳轉時發生onunload。頁面大小事件：onresize
2/10/2019 4:09:42 AM
二〇一九年二月十日星期日12時11分25秒
第9章 文檔對象
文檔對象概述：文檔對象介紹；文檔對象的常用屬性；文檔對象的常用方法
文檔對象的應用：鏈接文字顏色的設置；文檔背景色和前景色的設置；獲取並設置URL；在文檔中輸出數據；動態添加一個HTML標記；獲取文本框並修改其內容
1、 JavaScript會為每個HTML文檔自動創建一個Document對象，通過Document對象可以操作HTML內容
2、
瀏覽器對象模型（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）實現實時操作；
3、 文檔對象的常用屬性：
應用實例：
創建窗口對象：
4、 文檔對象的常用方法：
對象屬性
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>
5、 跳轉頁面：document.URL="new.html"
第10章 表單對象
文檔(Document)對象的forms屬性可以返回一個數組，數組中的每個元素都是一個form對象。form對象又稱表單對象，通過該對象可以實現輸入文字、選擇選項和提交數據等功能。
表單元素：文本框（屬性方法應用）；按鈕（屬性方法應用）；單選框和復選框（屬性方法應用）；下拉菜單（屬性方法Option應用）
訪問表單和表單元素：JS訪問表單；JS訪問表單元素
表單對象的屬性、方法與事件
1、JS訪問表單的三種方法：數組編號訪問document.form[0];表單名稱訪問document.myform;
定位訪問document.getElementById("form1")
2、Js訪問表單元素：數組編號訪問document.form1.element[0];元素名稱訪問document.form1.text1;
ID定位訪問:document.getElementById("elementID")
3、表單對象的屬性：name/action/method/enconding/id/length/target/element
表單對象的方法：reset()/submit() 表單對象的事件：reset/submit
4、文本框的屬性：id/name/type/value/rows/cols/disabled
文本框的方法：blur()/focus()/click()/select()
onclick="return checkinput()" 如果函數返回真則跳轉，否則不跳轉。
5、按鈕三種按鈕：普通按鈕通常調用函數；提交按鈕用來提交表單；重置按鈕用來重置表單。
按鈕的屬性：id/name/type/value/disabled 按鈕的方法blur()/focus()/click()
<form name="form1" method="post" onSubmit="return Mycheck()">…</form>
6、單選框和復選框的屬性：id/name/type/value/length/checked/disabled 方法：blur()/focus()/click()
7、下拉菜單：<select><option>。<select>用於聲明下拉菜單，<option>用於創建下拉菜單選項。
下拉菜單select的屬性:id/name/type/value/multiple多選/length個數/option數組/selectedIndex/disabled
下拉菜單select方法：blur()/focus()/click()/remove(i)
8、創建下拉菜單選項的構造函數：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章 圖像對象
圖像對象概述：圖像對象介紹；圖像對象的屬性；圖像對象的事件
圖像對象的應用：圖片的隨機顯示；圖片置頂；圖片翻轉效果
1、JS中的三種引用圖片的方式：按編號：document.images[0];按名稱：document.images[imageName];
ID定位訪問：document.getElementById("imageID")
2、圖像對象的屬性：border/height/width/name/src/alt顯示的文字/hspace/vspace文字與圖片的距離
lowsrc低分辨率圖片/complete完全加載判斷
3、圖像對象的事件：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毫秒。
4、圖片翻轉效果：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屬性
1、在文檔對象模型中，每個對象都可稱為一個節點（Node）:根節點/父節點/子節點/兄弟節點/后代/葉子節點
元素節點、文本節點、屬性節點
2、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屬性 他們也都是一個對象
3、 節點的操作：創建添加節點
<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>
4、 節點操作：插入節點 insertBefore(new,ref) 將新的子節點添加到指定的子節點的前面（可以先寫這一行語句，然后，圍繞着這一行的參數再寫別的語句，就比較容易理順其邏輯關系了）
node.parentNode.insertBefore(newNode,node) 插入定位得巧妙！
5、 復制節點：obj.cloneNode(deep)
6、 刪除節點：obj.removeChild(oldChild)
7、 替換節點：obj.replaceChild(new,old)
8、 獲取文檔中指定的元素
通過元素的id屬性獲取元素document.getElementById('userId');
通過元素的name屬性獲取元素：document.getElementName('likeRadio');返回的是一個數組
9、 通過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對象概述：屬性、方法、使用
對話框：警告對話框；確認對話窗；提示對話框
打開與關閉窗口：打開窗口；關閉窗口
1、Window對象的屬性
document/frames/location/name/status/defaultStatus/top/parent/opener/closed/self/screen/navigator
2、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)
3、Window對象的使用
Window是不需要new運算符來創建對象的。self代表當前窗口，parent代表父級窗口
4、對話框：警告窗口alert();確認窗口confirm();提示窗口prompt（str1，str2）
5、打開與關閉窗口：windowVar=window.open(url,windowname[,location])
關閉窗口：window.close();或close();或this.close();
6、 控制窗口：移動窗口：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）。
7、訪問窗口歷史：[window.]history.property|method([parameters])
屬性：length歷史列表的長度，用於判斷列表中的入口數目；current當前文檔的URL
next 歷史列表的下一個URL；previous 歷史列表的前一個URL
方法：back()退回前一頁；forward()重新進入下一頁；go（）進入指定的網頁
8、設置超時：timerID=setTimout(要執行的代碼，毫秒為單位的時間); 中止：clearTimeout(timerId)
9、窗口事件：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對象：對象的初始化；常用屬性；常用方法
1、 Ajax是Asynchronous JavaScript And XML縮寫，異步JavaScript和XML技術，客戶端異步請求，不需要刷新頁面的情況下與服務器進行通信。增強的JavaScript，更新部分頁面內容而不重載整個頁面。
2、 Ajax開發模式：用戶的行為將變成對Ajax引擎的一次JavaScript調用。而不是每次操作都觸發一次HTTP請求。
3、 Ajax的優點：通過引入中間媒介（Ajax引擎）：①把一部分服務器負擔的工作轉移到了客戶端。②不需要重載整個頁面的情況下通過DOM及時將更新的內容顯示在頁面上。③可調用XML等外部數據，是頁面顯示和數據分離。④不需要下載插件和小程序。⑤沒有平台限制。
缺點就是：⑥大量的JavaScript代碼，不易維護。⑦可視化設計上比較困難。⑧打破“頁”的概念。⑨給搜索引擎帶來困難。
4、 Ajax的技術組成：Ajax是XMLHttpRequest對象和JavaScript、XML語言、DOM、CSS等多種技術的組合。但，只有XMLHttpRequest對象是新技術。XMLHttpRequest對象是一個具有應用程序接口的JavaScript對象，能夠使用超文本傳輸協議（HTTP）連接服務器。微軟、1999年、IE5.0
5、 XML語言，Extensible Markup Language,可擴展的標記語言。描述結構化數據格式。
6、 JavaScript腳本語言，Ajax就是利用它將DOM,XHTML(HTML),XML,CSS等技術綜合了起來，並控制它們的行為。JS不是Java語言的精簡版，只能在某個解釋器或“宿主”上運行，如ASP,PHP,JSP,瀏覽器或windows腳本宿主。
7、 DOM文檔對象模型的縮寫，它為XML文檔的解析定義了一組接口。解析器讀入整個文檔，然后構建一個駐留內存的樹結構。最后通過DOM可以遍歷樹以獲取來自不同位置的數據！
8、 CSS層疊樣式表的縮寫。
9、 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();
10、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服務器不支持當前請求所需要的某個功能。
11、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選擇器：工廠函數；基本選擇器；層級選擇器；過濾選擇器；屬性選擇器；表單選擇器
1、 jQuery是一套簡潔、快速、靈活的JavaScript腳本庫。
2、 下載與配置：把下載下來的庫放入項目指定的文件夾JS中，然后在所有腳本文件<script>之前引用。
<script type="text/javascript" scr="JS/jquery-3.3.1.min.js"></script>
3、 jQuery的工廠函數：$() 例如：$("div") $("#username") $(".btn_grey")
4、 基本選擇器：ID選擇器、元素選擇器、類名選擇器、多種匹配條件選擇器和通配符選擇器。
一、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庫文件
二、元素選擇器：$("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=""
三、類名選擇器：$(".class"); 一個元素可以有多個CSS類，一個CSS類也可以匹配多個元素。
例如：$(document).ready(function() { //在頁面加載完成后，由於沒有綁定時間，立即執行代碼。
var myClass = $(".myClass"); //選取DOM元素
myClass.css("background-color","#C50210"); //為選取的DOM元素設置背景顏色
myClass.css("color","#FFF"); //為選取的DOM元素設置文字顏色
});
四、復合選擇器：$("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");
6、過濾選擇器
(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 元素
7、 屬性選擇器：通過元素的屬性作為過濾條件進行篩選對象。
$("div[name]"); $("div[name='test']"); $("div[name!='test']");
$("div[name*='test']")含有'test' $("div[name^='test']")以'test'開頭
$("div[name$='test']")以'test'結尾 $("div[id][name^='test']")復合屬性
8、表單選擇器：匹配經常在表單中出現，但不一定在表單中的元素。
$(":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中的事件
事件綁定：為元素綁定事件；移除綁定；綁定一次性事件處理
模擬用戶操作：模擬用戶的操作觸發事件；模仿懸停事件
1、 元素的值通常都是元素的value屬性值。
2、 元素的內容分文本內容和HTML內容：
對文本內容操作：獲取：alert($("div").text());設置：$("div").text("設置包括HTML內容的新文本")
對HTML內容的操作：alert($("div").html());獲取div中第一個元素的HTML內容
重新設置div元素的HTML內容：
$("div").html("<span style='color:#FF0000'>我是通過html()方法設置的HTML內容"</span>);
3、對元素值操作：獲取元素的值val();設置所有匹配的元素的值val(val);設置多項值val(arrVal)；
4、對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");
5、 對元素屬性的操作
獲取屬性：attr(name),如$("img").attr('src');
設置屬性：attr(key,value) 如$("img").attr("title","草莓正在生長");
設置多個屬性，鍵值對存儲：如：$('div').attr({name:'hahaha',class:'happy'});
移除屬性：$("#box").removeAttr('name class');
6、 對元素的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"
});
7、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
8、事件綁定
為元素綁定事件：bind(type,[data],fn) fn為事件處理程序
移除綁定：unbind([type],[data])如果不選參數將刪除匹配元素上的所有綁定事件。
綁定一次性事件處理：one(type,[data],fn)
8、 模擬用戶操作：
9、 模擬用戶的操作觸發事件：triggerHandler()和trigger()（后者，同名的默認行為會執行！）
$(document).ready(function(){
$("input:button").bind("click",function(event,msg1,msg2){
alert(msg1+msg2); //彈出對話框
}).trigger("click",["歡迎訪問","明日科技"]); //頁面加載觸發單擊事件
});
10、模擬懸停事件：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()方法停止動畫
1、隱藏匹配元素：$("img").hide(); 還可以帶參數hide(speed,[callback])：時長和回調函數
2、顯示匹配元素：show()或show(speed,[callback])
3、淡入淡出的效果：$("img").fadeIn(300);增大不透明度實現淡入。
$("img").fadeOut(300):減少透明度實現淡出。$("img").fadeTo(300,0.15)在0.3秒內透明度到15%
4、滑動效果：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");//滑動隱藏匹配的元素
}});});
5、自定義的動畫效果：animete(params,speed,callback) params包含屬性和值的映射。
說明：使用前必須設置元素的定位屬性position為relative或absolute,才能動起來。
二〇一九年二月十一日星期一23時56分 上海