jQuery總結

第一章 JavaScript基礎

--1、JavaScript是一種基於對象和事件驅動的，並具有安全性能的腳本語言。
--2、JavaScript的特點:
-1、JavaScript主要用來在HTML頁面中添加交互行為
-2、JavaScript是一種腳本語言，語法和Java類似
-3、JavaScript一般用來編寫客戶端的腳本
--3、JavaScript的基本結構
語法:
<script type="text/javascript">
JavaScript 語句;
document.write("");
<script>
--4、網頁中引用JavaScript的方式
-1、使用<script>標簽
-2、使用外部JavaStript文件
<script src="export.js" type="text/javascript"></script>
-3、直接在HTML標簽中引用
--5、JavaScript聲明變數的語法格式
var 合法的變數名;
--6、數據類型
undefined 未定義類型
null 空類型
number 數值類型
String 字元串類型
boolean 布爾類型
--7、typeof
ECMAScript提供了typeof運算符來判斷一個值或變數究竟屬於哪種數據類型。
語法:
typeof(變數或值)
--8、undefined類型
undefined類型只有一個值,即undefined。當聲明的變數未初始化時,改變數的預設值是undefined。例如:
var width;
這行代碼聲明瞭變數width,且此變數沒有初始值,將被賦予值undefined。
--9、number類型
JavaScript中定義的最特殊的類型是number類型，這種類型既可以表示32位的整數,也可以表示64位的浮點數。
--10、字元的屬性和方法
JavaScript語言中的String也是一種對象,和Java中的String對象相似。它也有一個length屬性，表示字元串的長度9(包括空格等),調用length的語法格式如下。
語法:
字元串對象.length;
var str="this is JavaStript";
var strLength=str.length;
最後,strLength返回的str字元串的長度是18。
同Java一樣，在JavaScript中關於字元串對象的使用語法格式如下。
語法:
字元串對象.方法名( );
--11、JavaScript語言中的String對象也有許多方法用來處理和操作字元串，常用的方法如下:
indexOf(str,index):查找某個指定的字元串在字元串中首次出現的位置
charAt(index):返回在指定位置的字元
toLowerCase():把字元串轉化為小寫
toUpperCase():把字元串轉化為大寫
substring(index1,index2):返回位於指定索引index1和index2之間的字元串，並且包括索引index1對應的字元，不包括索引index2對應的字元
split(str):將字元串分割為字元串數組
--12、boolean類型
boolean類型數據稱為布爾型數據或邏輯型數據，boolean類型是ECMAScript中常用的類型之一,它只有兩個值:true和false。
--13、數組
-1.創建數組
在JavaScript中創建數組的語法格式如下。
語法:
var 數組名稱 = new Array(size);
其中，new是用來創建數組的關鍵字，Array表示數組的關鍵字,而size表示數組中可存放的原始總稱,因此size用整數來表示
-2.為數值元素賦值
在聲明數組時，可以直接為數組元素賦值。語法格式為:
語法:
var fruit = new Array("apple","orange","peach","banana");
也可以寫成:
var arr=new Array(4);
arr[0]="apple";
arr[1]="orange";
arr[2]="peach";
arr[3]="banana";
--14、數組的常用方法和屬性
length:設置或符合數組中的元素的目錄
join():把數組的所有元素放入一個字元串，通過一個分隔符進行分割
sort():對數組排序
push():向設置末尾添加一個或多個元素，並返回新的長度
--15、中斷迴圈
break:可以立即退出整個迴圈
continue:只能退出當前的迴圈，根據判斷條件決定是否進行下一次迴圈
--16、常用的輸入、輸出
-1.警告(alert)
alert()方法前面已經使用過，此方法會創建一個特殊的小窗體，該對話框帶有一個字元串和一個"確定"按鈕
alert()方法的基本語法格式如下.
語法:
alert("提示信息");
-2、提示(prompt)
prompt()方法會彈出一個提示對話框,等待用戶輸入一行數據
prompt()方法的基本語法格式如下.
語法:
prompt("提示信息","輸入框的預設信息");
該方法的返回值也可以被引用或存儲到變數中,如:
var color=prompt("請輸入你喜歡的顏色","紅色");
--17、常用系統函數
-1.parseInt()
parseInt()函數可解析一個字元串,並返回一個整數，語法格式如下。
語法:
parseInt("字元串");
-2.parseFloat()
parseFloat()函數可解析一個字元串,並返回一個浮點數,語法格式如下。
語法:
parseFloat("字元串");
-3.isNaN()
isNaN()函數用於檢查其參數是否是非數字,語法格式如下。
語法:
isNaN(x)
如果x是特殊的非數字值,則返回值是true;否則返回false。
--18、自定義函數
-1.定義函數
在JavaScript中,自定義函數由關鍵字function、函數名、一組參數及置於括弧中的待執行的JavaScript語句組成，語法格式如下。
語法:
function 函數名(參數1,參數2,參數3,……){
//JavaScript語句
[return 返回值]
}
-2.調用函數
要執行一個函數,必須先調用這個函數,當調用函數時,必須指定函數名及其後面的參數(如果有參數)。函數的調用一般和元素的結合使用,語法格式如下。
語法:
事件名="函數名()";
-3、註釋
study()是創建的無參函數,onclick表示按鈕的單機事件,當單擊事件按鈕時調用函數study()。
count表示傳遞的參數,不需要定義數據類型,將prompt()方法返回的值作為參數傳遞給函數study(count)。
--19、變數的作用域
-1.JavaScript中的全局變數，是在所有函數之外的腳本中的聲明的變數，作用範圍是該變數定義後的所有語句，包括其後定義的函數中的代碼，以及其後的<script></script>標簽中的代碼。
-2.JavaScript中的局部變數，是在函數內聲明的變數。
-3.onload事件會在頁面載入完成時立即發送。
--20、常見的事件
onload:一個頁面或一副圖像完成載入
onlick:滑鼠單擊某個對象
onmouseover:滑鼠指導移到某元素上
onkeydown:某個鍵盤按鍵被按下
onchange:域的內容被改變
--21、JavaScript由三大部分組成ECMAScript、DOM、BOM。

---------------------------------------------------------------------------------------------------------

第二章 JavaScript操作DOM對象

--1、瀏覽器對象模型(BOM)是JavaScript的組成之一，它提供了獨立於內容與瀏覽器視窗進行交互的對象，使用瀏覽器對象模型可以實現與HTML的交互。Windows對象是整個BOM的核心，在瀏覽器中打開網頁後，首先看到的是瀏覽器視窗，即頂層是window的對象；其次是網頁文檔的內容。
--2、使用BOM通常可以實現如下內容:
-1.彈出新的瀏覽器視窗
-2.移動、關閉瀏覽器視窗及調整視窗的大小
-3.在瀏覽器視窗中實現頁面的前進，後退功能。
--3、常用的屬性
-1.window對象的常用屬性
history:有關客戶訪問過的URL的信息
location:有關當前URL的信息
screen:只讀屬性，包含有關客戶端顯示屏的信息
-2.在JavaScript中，屬性的語法格式如下。
語法:
window.屬性名="屬性值";
--4、常用的方法
-1.window對象的常用方法
prompt():顯示可提示用戶輸入的對話標準
alert():顯示一個帶有提示信息和一個"確定"按鈕的警示對話框
confirm():顯示一個帶有提示信息、"確定"和"取消"按鈕的對話框
close():關閉瀏覽器視窗
open():打開一個新的瀏覽器視窗，載入給定URL所指定的文檔
setTimeout():在指定的毫秒數後調用函數或計算表達式
setInterval():按照指定的周期(以毫秒計)來調用函數或表達式
-2.在JavaScript中，方法的使用格式如下。
語法:
window.方法名();
-3.confirm()
confirm()將彈出一個確定對話框，語法格式如下。
語法:
window.confirm("對話框中顯示的純文本");
在confirm()彈出的確認對話框中，有一條提示信息，一個"確定"，一個"取消"按鈕。如果用戶單擊"確定"按鈕。則confirm()返回true；如果單擊"取消"按鈕，則confirm()返回false。
-4.prompt()方法和alert()方法的用法，與confirm()方法作用的不同之處
alert()只有一個參數. 僅顯示警告對話框的消息，無返回值不能對腳本產生任何改變。
prompt()有兩個參數. 是輸入對話框用來提示用戶輸入一些信息，單擊“取消”按鈕則返回null單擊確定按鈕則返回用戶輸入的值常用於收集用戶關於特定問題而反饋的信息。
confirm()只有一個參數 是確認對話框。顯示提示對話框的消息"確定" 按鈕和"取消"按鈕返回true，單擊"取消"按鈕返回false，因此與if-else語句搭配使用。
-5、close()
close()方法用於關閉瀏覽器視窗，語法格式如下。
語法:
window.close();
-6、open()
在頁面上彈出一個新的瀏覽器視窗，彈出視窗的語法格式如下。
語法:
window.open("彈出視窗的url","視窗名稱","視窗特征")
open()方法通常用在打開一個網頁彈出廣告頁面或網站的信息聲明頁面等。
--5、視窗的特征屬性
height、width:視窗文檔顯示區的高度、寬度，以像素計
left、top:視窗的x坐標、y坐標，以像素計
toolbar=yes | no| 1 | 0 :是否顯示瀏覽器的工具欄，預設是yes
scrollbars=yes | no|1 | 0 :是否顯示滾動條，預設是yes
location=yes | no|1 | 0 :是否顯示地址欄，預設是yes
status=yes | no|1 | 0 :是否顯示狀態欄，預設是yes
menubar=yes | no|1 | 0 :是否顯示菜單欄，預設是yes
resizable=yes | no|1 | 0 :視窗是否可以調節尺寸，預設是yes
titlebar=yes | no|1 | 0 :是否顯示標題欄，預設是yes
fullscreen=yes | no|1 | 0 :是否使用全屏模式顯示瀏覽器，預設是no
--6、hiarory
-1.history對象提供用戶最近瀏覽過的URL列表。但出於隱私方面的原因，history對象不再允許腳本訪問已經訪問過的實際URL，可以使用history對象提供的、逐個返回訪問後的頁面的方法
-2.history對象的方法
back():載入history對象列表中的前一個URL
forward():載入history對象列表中的後一個URL
go():載入history對象列表中的某個URL
--7、location對象
location對象提供當前頁面的URL信息，並且可以重新裝載當前頁面或裝載新頁面
--8、location對象的屬性
host:設置或返回主機名和當前URL的埠號
hostname:設置或返回URL和主機名
href:設置或返回完整的URL
--9、location對象的方法
reload():重新載入當前文檔
replace():用新的文檔替換當前文檔
--10、document對象
-1.document對象的常用屬性
referrer:返回載入當前文檔的URL
URL:返回當前文檔的RUL
-2.referrer的語法格式如下。
語法:
document.referrer
當前文檔如果不是通過超鏈接訪問，則document.referrer的值為null。
-3.URL的語法格式如下。
語法:
document.URL
--11、document對象的常用方法
getElementById():返回對擁有id的第一個對象的引用
getElementsByName():返回帶有指定名稱的對象的集合
getElementsByTagName():返回帶有指定標簽名的對象的集合
write():向文檔寫文本、HTML表達式後JavaScript代碼
--12、JavaScript內置對象
-1.date:用於操作日期和時間
語法:
var 時間示例 = new Date(參數);
getDate():天數
getDay():星期
getHours():小時
getMinutes():分鐘
getSeconds():秒數
getMonth():月份
getFullYear():年份
getTime():返回自某一時刻(1970年1月1日)以來的毫秒數
--13、定時函數
-1.setTimeout()
setTimeout()用於在指定的毫秒後調用函數或計算表達式。語法格式如下。
語法:
setTimeout("調用的函數名稱",等待的毫秒數);
-2.setInterval()
setInterval()可按照指定的周期(以毫秒計)來調用函數或計算表達式。語法格式如下。
語法:
setInterval("調用的函數名稱",周期性調用函數用函數之間間隔的毫秒性)
-3.clearTimeout()
clearTimeout()函數用來清除由setTimeout()函數設置的定時器，語法格式如下。
語法:
clearTimeout(setTimeout()返回的ID值);
clearInterval()函數用來清除由SetInterval()函數設置的定時器，語法格式如下。
語法:
clearInterval(setInterval()返回的ID值);

-------------------------------------------------------------------------------------------------------------------------------------------

第三章 JavaScript操作DOM對象

--1、DOM操作
-1.DOM是Document Object Model的縮寫,即文檔對象模型,是基於文檔編程的一套API介面,1938年,W3C發佈了第一級的DOM模範,這個範圍允許訪問和操作HTML頁面中的每個單獨元素,如網頁的表格、圖片、文本、表單元素等。
-2.使用JavaScript操作的DOM是分為三個方面:DOM Core(核心)、HTML—DOM和CSS—DOM。
--2、HTML文檔在DOM中是這樣規定的。
1.整個文檔是一個文檔節點。
2.每個HTML標簽時一個元素節點。
3.包含在HTML元素中的文本是文本節點
4.每個HTML屬性是一個屬性節點
5.註釋屬於註釋節點。
--3、使用getElement序列方法訪問指定節點
-1.在HTML文檔中，訪問節點的標準方法就是我們之前學習的getElement系列方法，即getElementByld( )、getElementsByName( )和getElementsByTagName( ),只是它們查找的方法略有不同。
-2.查找方法
getElementByld( ):返回按id屬性查找的第個對象的引用。
getElementsByName( ):返回按帶有指定名稱name 查找的對象的集合，由於一個文檔中可能會有多個同名節點(如覆選框、 單選按鈕),因此返回的是元素數組
getElementsByTagName( ):返回帶有指定標簽名TagName 查找的對象的集合，由於一個文檔中可能會有多個同類型的標簽節點(如圖片組、 文本輸入框)，因此返回元素數組。
--4、根據層次關係訪問節點
-1.通過getElementById()、getElementsByName()和getElementsByTagName()這三種方法可查證看HTML文檔的中的任何元素，但是這三種方法都會忽略文檔的結構,因此在HTML DOM中提供了節點屬性,這些屬性可遵守文檔的結構,在文檔的佈局進行"短距離地查找元素"。
-2.節點屬性
parentNode:返回節點的父節點
childNodes:返回子節點集合,childNodes[i]
firstChild:返回節點的第一個子節點,最普通的用法是訪問該元素的文本節點
lastChild:返回節點的最後一個子節點
nextSibling:下一個節點
previousSibling:上一個節點
--5、element屬性
-1.在JavaScript中給大家提供一組可相容不同瀏覽器的element屬性,可以消除這種因空行,換行等出現的無法確定訪問到節點的情況。
-2.element屬性
firstElementChild:返回節點的第一個子節點,最普遍的用法是訪問該元素的文本節點
lastElementChild:返回節點的最後一個子節點
nextElementSibling:下一個節點
previousElementSibling:上一個節點
--6、節點信息
-1.節點是DOM層次結構中的任何類型的對象的通用名稱,每個節點都擁有包含著關於節點信息某些信息的屬性,這些屬性如下。
nodeName(節點名稱)屬性包含某個節點的名稱,元素節點的nodeName是標簽名稱,屬性節點dnodeName是屬性名稱,文本節點的nodeName永遠是#text,文檔節點的noedName永遠是#document。
nodeValue(節點值),對於文本節點，nodeValue屬性包含文本，對於屬性節點，nodeValue屬性包含屬性值;nodeVlue屬性對於文檔節點和元素節點是不可用的。
nodeType(節點類型)屬性可返回節點的類型，一個只讀屬性，如返回的元素節點、文本節點、註釋節點等。
-2.節點類型
元素element的NodeType值是1
屬性attr的NodeType值是2
文本text的NodeType值是2
註釋comments的NodeType值是8
文檔document的NodeType值是9
--7、操作節點的屬性
-1.HTML DOM提供了獲取及改變點屬性值的標準方法，如下所示。
getAttention("屬性名"):用來獲取屬性的值。
setAttribute("屬性名","屬性值"):用來設置屬性的值。
--8、創建和插入節點
-1.使用JavaScript操作DOM有很多方法可以創建或增加一個新節點。主要方法如下。
-2.創建節點
createElement(tagName):創建一個標簽名為tagName的新元素節點
A.appendChild(B):把B節點追加至A節點的末尾
insertBefore(A,B):把A節點插入B節點之前
cloneNode(deep):複製某個指定的節點
--9、刪除和替換節點
使用Core HTML 刪除節點的方法如下。
removeChild(node):刪除指定的節點
replaceChild(newNode,oldNode):用其他的節點替換指定的節點,newNode是替換的新節點,oldNode是要被替換的節點。
--10、操作節點樣式
-1.style屬性
在HTML DOM中，style是一個對象，一個代表獨立的樣式聲明，可通過應用樣式的文檔或元素訪問style對象，使用style屬性改變樣式的語法如下。
語法:
HTML元素.style.樣式屬性="值";
-2.style對象的常用屬性
background(背景):
backgroundColor:設置元素的背景顏色
backgroundImage:設置元素的背景圖像
backgroundRepeat:設置是否及如何重覆背景圖像
text(文本):
fontSize:設置元素的字體大小
fontWeight:設置字體的粗細
textAlign:排列文本
textDecoration:設置文本的修飾
font:設置同一行字體的屬性
color:設置文本的顏色
padding(邊距):
padding:設置元素的填充
paddingTop:設置元素的上填充
paddingBottom:設置元素的下填充
paddingLeft:設置元素的左填充
paddingRight:設置元素的右填充
border(邊框):
border:設置四個邊框的屬性
borderTop:設置上邊框的屬性
borderBottom:設置下邊框的屬性
borderLeft:設置左邊框的屬性
borderRight:設置右邊框的屬性
-3.常用事件
onclick:當用戶單擊某個對象時調用事件
onmouseover:滑鼠移到某元素之上
onmouseout:滑鼠從某元素移開
onmousedown:滑鼠按鈕被按下
-4.className屬性
在HTML DOM中，className屬性可設置或返回元素的class樣式，語法如下。
語法:
HTML元素.className="樣式名稱"
--11、獲取元素位置
-1.HTML中元素的屬性
offsetLeft:返回當前元素左邊界的距離，只讀屬性
offsetTop:返回當前元素上邊界的距離，只讀屬性
offsetHeight:返回元素的高度
offsetWidth:返回元素的寬度
offsetParent:返回元素的偏移容器，即對最近的動態定位的包含元素的引用
scrollTop:返回匹配元素的滾動條的垂直位置
scrollLeft:返回匹配元素的滾動條的水平位置
clientWidth:返回元素的可見寬度
clientHeight:返回元素的可見高度

-------------------------------------------------------------------------------------------------------------------------------------------

第四章 JavaScript對象及初識面向對象

--1、JavaScript中提供了常用的基本數據類型,這些數據類型如下所示。
number(數值類型)
string(字元串類型)
boolean(布爾類型)
null(空類型)
nudefined(未定義類型)
object:一種複雜的數據類型，該類型實例化的對象是一組數據和功能的集合
--2、創建對象
-1.自定義對象
與java中創建對象語言,創建自定義對象的最簡單的方式就是使用操作符new創建一個object的示例,然後通過"."為其添加屬性和方法,創建對象的語法如下所示。
語法:
var 對象名稱=new Object();
-2.內置對象
JavaScript的內置對象是一種特殊的數據,常見的內置對象如下所示。
String(字元串)對象。
Date(日期)對象:用於處理日期和事間。
Array(數組)對象。
Boolean(邏輯)對象:用於將非邏輯值轉換為邏輯(true或者false),在JavaScript中的布爾值是一種基本的數據類型，Boolean對象是一個將布爾值打包的布爾對象。
Math(算數)對象:是執行常用的算數任務。
RegExp對象:是怎則表達式的縮寫,當需要檢索某個文本時可以使用一種模式來描述要檢索的內容,RegExp就是這種模式
--3、構造函數
-1.構造函數可用來創建特定類型的對象，像Object和Array這樣的原生構造函數，在運行時會自動出現在執行環境中，此外，也可以創建自定義的構造函數。由此可知，所謂的"構造函數"就是一個普通函數,但是內部使用內部使用了this變數，對構造函數使用new操作符,就能生成實例,並且this變數會綁定在實例對象上，從而定義自定義類型的屬性和方法。
-2.使用構造函數創建新實例，必須使用new操作符的四個步驟
1.創建一個新對象
2.將構造函數的作用域賦予給新對象(this就指向了這個新對象)
3.執行構造函數中的代碼
4.返回新對象
--4、原型對象
在JavaScript中創建的每個函數都有一個prototype屬性，這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以有特點類型的所有實例的共用的屬性和方法。按照字面意思理解,prototype就是通過調用構造函數而創建的那個對象實例的原型對象,使用原型對象的好處就是可以讓所有對象實例共用它所有的屬性和方法,也就是說不必在構造函數中定義對象實例的信息

-------------------------------------------------------------------------------------------------------------------------------------------

第五章 初始jQuery

--1、介紹
-1.jQuery是JavaScript的程式庫之一,它是JavaScript對象和實用函數的封裝。
-2.JavaScript是一種面向Web的腳本語言。大部分網站都使用了JavaScript,並且現有瀏覽器(基於桌面系統、平板電腦、智能手機和游戲機的瀏覽器)都包含了JavaScript解釋器。它的出現使得網頁與用戶之間實現了實時、動態的交互,使網頁包含了更多活潑的元素,使用戶的操作變得更加簡單便捷。
-3.JavaScript的弊端:一個是複雜的文檔對象模型,另一個是不一致的瀏覽器實現。
-4.目前流行的JavaScript庫:jQuery、Bootstrap、Zepto、Ext、YUI
-5.jQuery的用途:
1.訪問和操作DOM元素
2.控制頁面樣式
3.對頁面事件的處理
4.方便地使用JQuery插件
5.與Ajax技術的完美結合
-5.JQuery的優勢:
1.輕量級
2.強大的選擇器
3.出色的DOM封裝
4.可靠的事件處理機制
5.出色的瀏覽器相容性
6.隱式迭代
7.豐富的插件支持
--2、配置jQuery環境
-1.jQuery的官方網站:http://jquery.com中下載jQuery庫文件
-2.jQuery庫的類型分為兩種,分別是開發版(未壓縮版)和發佈版(壓縮版),它門的對比如jQuery庫的類型對比
jquery-1.版本號.js(開發版):完整無壓縮版本,主要用於測試、學習和開發
jquery-1.版本號.js(發佈版):經過工具壓縮或經過伺服器開啟GZIP壓縮,主要應用於發佈的產品和項目
-3.jquery不用安裝，想要在某個頁面使用jQuery時,只需要在相關的HTML文檔中引入該庫文件的位置即可。
-4.在頁面中引入jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--在body標簽中引入jQuery庫文件-->
<script src="js/jquery-1.版本號.js" type="text/javascript"></script>
</body>
</html>
--3、window.onload與$(document).ready()的對比
window.onload:
執行時機:
必須等待網頁中所有的內容載入完畢後(包括圖片,Flash、視頻等)才能執行
編寫個數:
同一時間不能編寫多個
執行以下代碼:
window.onload=function(){
alert("小明學習不好");
}
window.onload=function(){
alert("小明學習不好");
}
結果只會輸出一個"小明學習不好"
簡寫方法:
無
$(document).ready():
執行時機:
網頁中所有DOM文檔結構繪製完畢後即刻執行,可能與DOM元素關聯的內容(圖片、flash、視頻等)並沒有載入完
編寫個數:
同一時間能同時編寫多個
執行以下代碼:
$(document).ready(function(){
alert("小明學習不好");
});
$(document).ready(function(){
alert("小明學習不好");
});
結果會輸出兩次"小明學習不好"
簡化寫法:
$(document).ready(function(){
//執行代碼
});
可以簡寫成:
$(function(){
//執行代碼
});
--4、jQuery語法結構
-1.通過語句$(document).ready(function(){});不難發現,這條jQuery語句主要包含三大部分:$()、document和ready()。這三大部分在jQuery中分別稱為工廠函數、選擇器函數和方法,將其語法化後,結構如下。
語法:
$(selector).action();
-2.工廠函數$()
在jQuery中,美元符號"$"等價於jQuery,即$()=jQuery()。$()作用是將DOM對象轉化為jQuery對象,只有將DOM對象轉化為jQuery對象後,才能使用jQuery的方法
-3.選擇器selector
jQuery支持CSS 1.0到CSS 3.0規則中幾乎所有的選擇器,如標簽選擇器、類選擇器、ID選擇器和後代選擇器和後代選擇器等,使用jQuery選擇器和$()工廠函數可以非常方便地獲取操作的DOM元素,語法如下。
語法:
$(selector)
ID選擇器、標簽選擇器、類選擇器的用法如下所示。
$("#userName") //獲取DOM中id為userName的元素
$("div") //獲取DOM中所有的div的元素
$(".content"); //獲取DOM中class為content的元素
-3.方法action()
jQuery中提供了一系列方法。在這些方法中,一類重要的方法就是事件處理方法,主要用來綁定DOM元素的事件和事件處理方法。
1.addClass()方法是jQuery中用於進行CSS操作的方法之一,它的作用是被向被選元素添加一個或多個類樣式,它的語法格式如下。
語法:
jQuery 對象.addClass([樣式名])
2.$(this)的一個jQuery對象,指向滑鼠指針當前移向的一菜單級
3.css()方法是jQuery中用於進行CSS操作的另一種方法,它的作用是為匹配的元素添加CSS樣式,它的語法格式如下。
4.show()、hide()在jQuery中經常用到,分別用來顯示、隱藏HTML元素,簡單的語法格式如下。
語法:
$(selector).show();
$(selector).hide();
5.獲取當前元素的下一個元素
next();
--5、jQuery對象
jQuery對象就是通過jQuery包裝DOM對象後產生的對象,他能夠使用jQuery中的方法
--6、DOM對象和jQuery對象互轉
-1.dom對象轉成jquery對象
獲取dom對象:var title = document.getElementById("title");
把dom對象轉成jquery對象 var $title=$(title)括弧中的是dom對象
-2.jquery對象轉成dom對象
獲取jquery對象 var $title=$("#title");
把jquery對象轉成dom對象 var title = $title.get(0);

-------------------------------------------------------------------------------------------------------------------------------------------

第六章 jQuery選擇器

--1、介紹
-1.Query選擇器的優勢
1.簡介的語法
2.完善的處理機制
-2.屬性選擇器就是通過HTML元素的屬性選擇元素的選擇器,它與CSS中的屬性選擇器語法構成完全一致。
-3.過濾選擇器主要通過特定的過濾規則來篩選出需的DOM元素,過濾規則與CSS中的偽類語法相同,即選擇器都一一個冒號(:)開頭,冒號前是需要過濾的元素。
-4.過濾選擇器可以分為基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表單對象屬性過濾選擇器。
-5.編寫選擇器時需要註意特殊符號和空格
--2、屬性選擇器
語法 描述
[attribute] 選取包含指定屬性的元素
[attribute = value] 選取指定等於屬性的某個元素
[attribute != value] 選取不是指定屬性的某個元素
[attribute ^= value] 選取指定屬性是以某個特定值開始的元素
[attribute $= value] 選取指定屬性是以某個特定值結束的元素
[attribute *= value] 選取包含某個屬性的元素
--3、基本過濾選擇器
語法 描述
:first 選取第一個元素
:last 選取最後一個元素
:not(selector) 選取去除所有與給定選擇器匹配的元素
:even 選取索引是偶數的元素
:odd 選取索引是基數的元素
:eq(index) 選取索引等於index的元素
:gt(index) 選取索引大於index的元素
:lt(index) 選取索引小於index的元素
:header 選取索引標題元素如h1、h2等
:focus 選取當前獲取焦點的元素
:animated 選擇所有動畫元素
--4、可見性過濾選擇器
選擇器 描述
:visible 選取所有可見元素
:hidden 選取所有隱藏元素
--5、層次選擇器
後代選擇器 div p 中間加空格 {意思是div裡面全部帶p標簽的全部選擇}
子選擇器 div>p 中間大於號{意思是div相當於爺爺 下麵第一個p標簽相當於他的兒子 被選中}
相鄰選擇器 div+p 中間加好 {和div平級也就是鄰居 而第一家鄰居被選擇}
通用鄰居選擇器 div~p 中間波浪號{和div的平級是鄰居 而此選擇器選擇的適合他的全部同級鄰居}

-------------------------------------------------------------------------------------------------------------------------------------------

第七章 jQuery中的事件與動畫

--1、在JavaScript中,常用的基礎事件有滑鼠事件、鍵盤事件、window事件、表單事件。事件綁定和處理函數的語法格式如下。
語法:
事件名 = "函數名()";
或者
DOM 對象.事件名=函數;
在事件綁定處理函數後,可以通過DOM對象.事件名()的方法顯示調用處理函數。在jQuery中基礎事件和JavaScript中的事件一致,它提供了特有的事件方法和處理函數綁定
--2、載入事件
window事件有文檔載入事件,它對應的方法是ready()
--3、滑鼠事件
-1.滑鼠事件顧名思義就是當用戶名在文檔上移動時而產生的事件
-2.常用的滑鼠事件的方法
方法 描述 執行時機
click() 觸發或將函數綁定到指定元素的click事件 滑鼠單擊時
mouseover() 觸發或將函數綁定到指定元素的mouseover事件 滑鼠指針移過時
mouseout() 觸發或將函數綁定到指定元素的mouseout事件 滑鼠指針移出時
mouseenter() 觸發或將函數綁定到指定元素的mouseenter事件 滑鼠指針進入時
mouseleave() 觸發或將函數綁定到指定元素的mouseleave事件 鍵盤事件滑鼠指針離開時
-3.語法:
$("標簽名").滑鼠事件的方法(function(){
//JavaScript代碼
})
--4、鍵盤事件
-1.鍵盤樣式指當鍵盤聚焦到Web瀏覽器,用戶每次按下或者釋放按鍵是就會產生事件。
-2.常用鍵盤事件的方法
方法 描述 執行時機
keydown() 觸發或將函數綁定到指定元素的keydown事件 按下按鍵時
keyup() 觸發或將函數綁定到指定元素的keyup事件 釋放按鍵時
keypress() 觸發或將函數綁定到指定元素的keypress事件 產生可列印的字元時
-3.鍵盤事件的執行順序依次是keydown、keypress或keyup
--5、綁定事件
-1.在jquery中,如果需要為匹配的元素同時綁定一個或多個事件,則可以使用bind()方法,其語法格式如下。
語法:
bind(type,[data],fn)
-2.bind()方法有三個參數,其中參數data不是必須的
-3.bind()方法的參數
參數類型 參數含義 描述
type 事件類型 主要包括click、mouseover、mouseout等基礎事件,此外,還可以是自定義事件
[data] 可選參數 作為event.data屬性值傳遞給事件對象的額外數據對象,該參數不是必需的
fn 處理函數 用來綁定處理函數
--6、移除事件
-1.有時候事件執行完了,需要把綁定的事件通過一定的辦法取消,在jQuery中,提供了移除事件的方法,在綁定事件時,可以為匹配元素綁定一個或多個事件,那麼同樣可以為之匹配的元素移除單個或多個事件,可以使用unbind()方法,其語法格式如下。
語法:
unbind([type],[fn])
unbind()方法有兩個參數,這兩個參數不是必須的,當unbind()不帶參數時,表示移除所綁定的全部事件。
-2.unbind()方法的參數說明
參數類型 參數含義 描述
[type] 事件類型 主要包括click、mouseover、mouseout等基礎事件,此外,還可以是自定義事件
[fn] 處理函數 用來解除綁定的處理函數
--7、複合事件
-1.在jQuery中有兩個複合事件————hover()和toggle()方法,這兩個方法與ready()類似,都是jQuery自定義的方法
-2.hover()方法
在jQuery中,hover()事件用於模擬滑鼠指針移入和移出事件。當滑鼠指針移至元素上時,會觸髮指定的第一個函數(enter);當滑鼠指標移除這個元素時,會觸發第二個函數(leave),該方法相當於mouseenter和mouseleave事件的組合。其語法格式如下。
語法:
hover(enter,leave);
-3.toggle()方法
1.在jQuery中,toggle分為帶參數的方法和不帶參數的方法;帶參數的方法用於模擬的方法用於模擬滑鼠連接click事件。第一次點擊元素,觸髮指定的第一個函數(fn1);當再次單擊同一個元素時,則觸髮指定的第二個函數(fn2);如果有更多函數,則依次觸發,直到最後一個。隨後的每次單擊都重覆對這幾個函數輪番調用,toggle()方法的語法格式如下。
語法:
toggle(fn1,fn2,.....fnN);
2.toggle()不帶參數時,與show()和hide()方法的作用一樣,切換元素的可見狀態,如果元素是可見性,則切換為隱藏狀態;如果元素是隱藏的,則切換為可見狀態;語法格式如下。
語法:
toggle();
3.與jQuery中的toggle()方法一樣,toggleClass()可以對樣式切換,實現事件觸發時某元素在"載入某個樣式"和"移除某個樣式"之間切換,語法格式如下。
語法:
toggleClass(className);
--8、jQuery中的動畫
-1.控制元素顯示
1.在jQuery中,可以使用show()方法控制元素的顯示,還能定義顯示元素是的效果。show()的語法格式如下。
2.語法:
$(selector).show([speed],[callback])
3.show()的參數說明
speed:
可選。規定元素從隱藏到完全可見的速度。預設為"0"。
可能值:毫秒(如1000)、slow、normal、fast。
在設置速度的情況下,元素從隱藏到完全可見的過程中,會逐漸改變高度、寬度、外邊距、內邊距和透明度
callback:
可選。show函數執行完之後,要執行的函數。
-2、控制元素隱藏
1.在jQuery中,可以使用hide()方法控制元素的隱藏,還能定義隱藏元素時的效果。hide()語法格式如下。
2.語法:
$(selector).hide([speed],[callback])
-3、控制元素淡入
1.在jQuery中,可以使用fadeln()方法控制元素的淡入,fadeln()方法的語法格式如下。
2.語法:
$(selector).fadeIn([speed],[callback])
3.fadeln方法的參數
speed:
可選。規定元素從隱藏到完全可見的速度。預設為"0"。
可能值:毫秒(如1000)、slow、normal、fast。
在設置速度的情況下,元素從隱藏到完全可見的過程中,會逐漸第改變其透明度,給視覺以淡入的效果。
callback:
可選。fadeIn函數執行完之後,要執行的函數。
除非設置了speed參數,否則不能設置該參數
-4、控制元素淡出
1.在jQuery中,fadeOut()方法可以控制元素淡出,還能定義顯示元素時的效果。fadeOut()方法的語法格式如下。
2.語法:
$(selector).fadeOut([speed],[callback])
-5、改變元素高度
1.在jQuery中,用於改變元素高度的方法是slideUp()和slideDown()。若元素的display屬性值為none,當調用slideDown()方法時,這個元素會從上向下衍伸顯示,而slideUp()方法正好相反,元素從上到下縮短直至隱藏,slideUp()和slideDown()方法的語法格式如下。
2.語法:
$(selector).slideUp([speed],[callback])
$(selector).slideDown([speed],[callback])
3.參數說明:
speed為可選參數,用來規定改變元素高度的時長,它的取值也是slow、fast或毫秒
callback為可選參數,表示改變元素高度完成後執行的函數名稱。
-6、自定義動畫
1.語法:
$(selector).animate({params},speed,callback)
2.animate()的參數說明:
params:必須,定義形成動畫的CSS屬性。
speed:可選,規定效果時長,取值:毫秒、fast、slow.
callback:可選,滑動完成後執行的函數名稱。

-------------------------------------------------------------------------------------------------------------------------------------------

第八章 使用jQuery操作DOM

--1、jQuery中的DOM操作說明
jQuery中的DOM操作主要分為樣式操作、文本和value屬性值操作、節點操作，節點操作中又包含屬性操作、節點遍歷和CSS-DOM操作。其中,最核型的部分是節點操作和節點遍歷。
--2、設置和獲取樣式值
-1.在jQuery中,使用css()方法為指定的元素設置樣式值,其語法格式如下。
語法:
$(selector).css(name,value) //設置單個屬性
或者:
$(selector).css({name:value,name:value,name:value}) //同時設置多個屬性
-2.css()方法的參數說明
name:
必須。規定CSS屬性的名稱。該屬性可以是任何CSS屬性。
例如,font-size、background等
value:
必須。規定CSS屬性的值。該參數可以是任何CSS屬性值。
例如,#000000、24px等
-3.獲取CSS屬性值的方法很簡單,語法格式如下。
語法:
$(selector).css(name); 獲取屬性
--3、追加樣式和移除樣式
-1.追加樣式
1.除了使用css()方法可以元素添加樣式外,還能使用addClass()方法為元素追加式。其語法如下。
語法:
$(selector).addClass(class)
2.class為類樣式的名稱，也可以增加多個類樣式,各個類樣式之間以空格隔開即可。其語法如下。
語法:
$(selector).addClass(class1,class2,class3......ClassN)
-2.移除樣式
在jQuery中,與addClass()方法相對應的方法是移除樣式的方法removeClass(),其語法格式如下。
語法:
$(selector).removeClass(Class) //移除單個樣式
或者
$(selector).removeClass(class1,class2,class3......ClassN)
-3.切換樣式
在jQuery中,使用toggle()方法可以切換元素的可見狀態,使用toggleClass()方法可以切換不同元素的類樣式,其語法格式如下。
語法:
$(selector).roggleClass(Class)
-4.判斷是否含指定的樣式
在jQuery中,提供了hasClass()方法來判斷是否包含指定的樣式,其語法如下所示。
語法:
$(selector).hasClass(class);
參數class是類名,該名稱是必須的,規定指定元素中查找的類名,返回值為布爾值,如果包含查找的類則返回true,否則返回false。
--4、內容操作
-1.jQuery提供了對元素內容操作的方法,即對HTML代碼(包括標簽和標簽內容)、標簽內容和屬性值內容三者的操作
-2.HTML代碼操作
1.在jquery中,可以使用html()方法對HTML代碼進行操作,該方法類似於傳統JavaScript中的innerHTML,通常用於動態的新增頁面內容。其語法如下。
語法:
html([content])
2.html()方法的參數說明
content:
可選。規定被選元素的新內容。給參數可以包括HTML標簽。
無參數時,表示獲取被選元素的文本內容
3.標簽內容操作
1.在jQuery中,可以使用text()方法獲取或設置元素的文本內容,不含HTML標簽。其語法格式如下。
語法:
text([content])
1.text()方法的參數說明
content:
可選。規定被選元素的新文本內容。註釋:特殊字元會被編碼。
無參數時,表示獲取被選元素的文本內容
4.html()方法和text()方法的區別
語法格式 參數說明 功能描述
html() 無參數 用於獲取第一個匹配元素的HTML內容或文本內容
html(content) content參數為元素的HTML內容 用於設置所有匹配元素的HTML內容或文本內容
text() 無參數 用於獲取所有匹配元素的文本內容
text(content) content參數為元素的文本內容 用於設置所有匹配元素的文本內容
-3.屬性值操作
1.在jQuery中,除了可以使用html()方法和text()方法獲取與設置元素內容外,還提供了獲取元素value屬性值的方法val()。該方法非常常用多用於操作表單的<input>元素。val()方法的語法格式如下。
語法:
val([value])
2.val()方法的參數說明
value:
可選。規定被選元素的新內容。
無參數時,返回值為第一個被選元素的value屬性的值
--5、操作節點
-1.在jQuery中,節點操作主要分為查找、創建、插入、刪除、替換和複製六種操作方法。
-2.創建節點
語法:
$(selector)
或者
$(element)
或者
$(html)
-3.$()的參數說明
selector:選擇器。使用jQuery選擇器匹配元素
element:DOM元素。以DOM元素來創建jQuery對象
html:HTML代碼。使用HTML字元串創建jQuery對象
-4.插入節點方法
內部插入:
append(content):向所選擇的元素內部
appendTo(content):把所選擇的元素追加到另一個指定的元素集合中
prepend(content):向每個選擇的元素內部前置內容
prependTo(content):將所有匹配元素前置到指定的元素中
外部插入:
after(content):在每個匹配的元素之後插入內容
insertAfter(content):將所有匹配元素插入指定元素後面。
before(content):向所選擇的元素外部前面插入內容
insertBefore(content):將所匹配的元素插入指定元素的前面
-5.插入節點
1.remove()方法
語法:
$(selector).remove([expr])
其參數expr為可選項,如果接收參數,則該參數為篩選元素的jQuery表達式,通過該表達式獲取指定元素,併進行刪除。
2.empty()方法
語法:
$(selector).empty()
-6.替換節點
replaceWith()
replaceAll()
-7.複製節點
語法:
$(selector).clone([includeEvents])
--6、屬性操作
-1.獲取與設置元素屬性
語法:
$(selector).attr([name]) //獲取屬性值
或者
$(selector).attr({[name1:value1],[name2:value2].....[nameN:valueN]}) //設置多個屬性值
其參數name表示屬性名稱,value表示屬性值
-2.刪除元素屬性
語法:
$(selector).removeAttr(name)
--7、節點遍歷
-1.遍歷子元素
在jQuery中,遍歷子元素的方法只有一個,即children()方法。如果想獲取某元素的子元素,並對其進行操作,可以使用jQuery中提供的children()方法。該方法可以用來獲取元素的所有子元素的所有子元素,而不考慮其他後代元素。其語法格式如下。
語法:
$(selector).children([expr])
其參數expr為可選,用於過濾子元素的表達式。
-2.遍歷同輩元素的說明方法
next([expr]):用於獲取緊鄰匹配元素之後的元素
prev([expr]):用於獲取緊鄰匹配元素之前的元素
siblings([expr]):用於獲取位於匹配元素前面和後面的所有同輩元素
-3.遍歷前輩元素
語法:
參數可選。獲取當前匹配元素集合中每個元素的父級元素
$(selector).parent([selector])
參數可選。獲取當前匹配元素集合中每個元素的祖先元素
$(selector).parents([selector])
-4.其他遍歷方法
1.each()方法
each()方法規定為每個匹配元素規定運行的函數,語法格式如下。
語法:
$(selector).each(function(index,element))
2.end()方法
end()方法結束當前鏈條中最近的篩選操作,並將匹配元素集還原為之前的狀態,語法如下所示。
語法:
.end();
--8、CSS-DOM相關操作方法說明
css():設置或返回匹配元素的樣式屬性
height([value]):參數可選。設置或返回匹配元素的高度。如果沒有規定長度單位,則使用預設的px作為單位
width(value):參數可選。設置或返回匹配元素的寬度。如果沒有規定長度單位,則使用預設的px作為單位
offset([value]):返回以像素為單位的top和left坐標。此方法僅對可見元素有效
offseParent():使用最近的已定位祖先元素。定位元素指的是元素的CSS position值被設置為relative、absolute或fixed元素
postiton():返回第一個匹配元素相對於父元素的位置
scrollLeft([postiton]):參數可選。設置或返回匹配元素相對滾動條左側的偏移
scrollTop([postiton]):參數可選。設置或返回匹配元素相對滾動條頂部的偏移

-------------------------------------------------------------------------------------------------------------------------------------------

第九章 表單校驗

--1、表單選擇器
語法 描述
:input 匹配所有input、textarea、select和button元素
:text 匹配所有單行文本框
:password 匹配所有密碼框
:radio 匹配所有單項按鈕
:checkbox 匹配所有覆選框
:submit 匹配所有提交按鈕
:image 匹配所有圖像域
:reset 匹配所有重置按鈕
:button 匹配所有按鈕
:file 匹配所有文件域
:hidden 匹配所有不可見元素,或者type為hidden的元素
--2、表單屬性過濾器
語法 描述
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有被選中元素(覆選框、單項按鈕、select中的option)
:selected 匹配所有選中的option元素
--3、表單驗證常用的方法和事件
事件:
onblur:失去焦點,當游標離開某個文本框時觸發
onfocus:獲取焦點,當游標進入某個文本框時觸發
方法:
blur():從文本域中移開焦點
focus():在文本域中設置焦點,即獲得游標
select():選取文本域中的內容,突出顯示輸入區域的內容
--4、正則表達式
-1.正則表達式是一個描述字元模式的對象,它是由一些特殊的符號組成的,這些符號和在SQL Server中學過的通配符一樣,其組成的字元模式用來匹配各種表達式。
-2.定義正則表達式
1.普通方式
語法:
var reg=/表達式/附加參數
表達式:一個字元串代表了某種規則,其中可以使用某些特殊字元來代表特殊的規則
附件參數:用來擴展表達式的含義,主要有以下三個參數。
g:代表可以進行全局匹配
i:代表不區分大小寫匹配
m:代表可以進行多行匹配
2.構造函數
語法:
var reg=new RegExp("表達式","附加參數");
3.表達式的模式
1.簡單模式
簡單模式是指通過普通字元的組合來表達的模式。例如:
var reg=/china/;
var reg=/abc8/;

2.複合模式
複合模式是指含有通配符來表達的模式,這裡的通配符與SQL Server中的通配符相似。例如:
var reg=/^\w+$/;
4.RegExp對象
方法 描述
exec() 檢索字元中是正則表達式的匹配,返回找到的值,並確定其位置
test() 檢索字元串中指定的值,返回true後false
5.test()方法用於檢測一個字元串是否匹配某個模式,語法格式如下。
語法:
正則表達式對象實例.test(字元串)
6.String對象的方法
方法 描述
match() 在字元串內檢索指定的值,找到一個或多個正則表達式的匹配
search() 檢索與正則表達式相匹配的值
replace() 替換與正則表達式匹配的字元串
split() 把字元串分割為字元串數組
7.方法
1.match()方法:在字元串內檢索指定的值,找到一個或多個正則表達式的匹配
語法:
字元串對象.match(searchString或regexpObject)
searchString是檢索的字元串的值,regexpObject是規定要匹配模式的RegExp對象。
2.replace()方法
語法:
字元串對象.replace(RegExp對象或字元串,"替換的字元串")
3.split()方法
語法:
字元串對象.split(分隔符,n)
8.RegExp對象的屬性
屬性 描述
global RegExp對象是否具有標誌g
ignoreCase RegExp對象是否具有標誌i
multiline RegExp對象是否具有標誌m
9.正則表達式的常用符號
符號 描述
/.../ 代表一個模式的開始和結束
^ 匹配字元串的開始
$ 匹配字元串的結束
\s 任何空白字元
\S 任何非空白字元
\d 匹配一個數字字元,等價於[0~9]
\D 除了數字之外的任何字元,等價於[^0~9]
\w 匹配一個數字、下劃線或字母字元,等價於[A-Za-z0-9]
\W 任何非單字字元,等價於[^a-zA-Z0-9_]
. 除了換行符之外的任意字元
10.正則表達式的重覆字元
符號 描述
{n} 匹配前一項n次
{n,} 匹配前一項n次,或者多次
{n,m} 匹配前一項至少n次,但是不能超過m次
* 匹配前一項0次或多次,等價於{0,}
+ 匹配前一項1次或多次,等價於{1,}
？ 匹配前一項0次或1次,也就是說前一項是可選的,等價於{0,1}
--5、HTML5新增加驗證屬性
屬性 描述
placeholder 提供一種提示(hint),輸入域為空時顯示,獲得焦點輸入內容後消失
required 規定輸入域不能為空
pattern 規定驗證input域的模式(正則表達式)
--6、validityState對象
valueMissing:表單樣式設置了required特征,則為必填項。如果必填項的值為空,就無法通過表單驗證,valueMissing屬性會返回true,否則返回false
typeMismatch:輸入值與type類型不匹配。HTML5新增的表單類型如email、number、url等,都包含一個原始的類型驗證。如果用戶輸入的內容與表單類型不符合,則typeMismatch屬性將返回true,否則返回false
patternMismatch:輸入值與pattern特征的正則表達式不匹配。如果輸入的內容不符合pattern驗證模式的規則,則patternMismatch屬性將發回true,否則返回false。
tooLong:輸入的內容超過了表單元素的maxLength 特性限定的字元長度。
rangeUnderflow:輸入的值小於min特性的值。
rangeOverflow:輸入的值大於max特性的值。
stepMismatch:輸入的值不符合step特征所推算出的規則。
customError:使用自定義的驗證錯誤提示信息。