jQuery總結

第一章 JavaScript基礎

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

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

第二章 JavaScript操做DOM對象

--一、瀏覽器對象模型(BOM)是JavaScript的組成之一，它提供了獨立於內容與瀏覽器窗口進行交互的對象，使用瀏覽器對象模型能夠實現與HTML的交互。Windows對象是整個BOM的核心，在瀏覽器中打開網頁後，首先看到的是瀏覽器窗口，即頂層是window的對象；其次是網頁文檔的內容。
--二、使用BOM一般能夠實現以下內容:
-1.彈出新的瀏覽器窗口
-2.移動、關閉瀏覽器窗口及調整窗口的大小
-3.在瀏覽器窗口中實現頁面的前進，後退功能。
--三、經常使用的屬性
-1.window對象的經常使用屬性
history:有關客戶訪問過的URL的信息
location:有關當前URL的信息
screen:只讀屬性，包含有關客戶端顯示屏的信息
-2.在JavaScript中，屬性的語法格式以下。
語法:
window.屬性名="屬性值";
--四、經常使用的方法
-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語句搭配使用。
-五、close()
close()方法用於關閉瀏覽器窗口，語法格式以下。
語法:
window.close();
-六、open()
在頁面上彈出一個新的瀏覽器窗口，彈出窗口的語法格式以下。
語法:
window.open("彈出窗口的url","窗口名稱","窗口特徵")
open()方法一般用在打開一個網頁彈出廣告頁面或網站的信息聲明頁面等。
--五、窗口的特徵屬性
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
--六、hiarory
-1.history對象提供用戶最近瀏覽過的URL列表。但出於隱私方面的緣由，history對象再也不容許腳本訪問已經訪問過的實際URL，可使用history對象提供的、逐個返回訪問後的頁面的方法
-2.history對象的方法
back():加載history對象列表中的前一個URL
forward():加載history對象列表中的後一個URL
go():加載history對象列表中的某個URL
--七、location對象
location對象提供當前頁面的URL信息，而且能夠從新裝載當前頁面或裝載新頁面
--八、location對象的屬性
host:設置或返回主機名和當前URL的端口號
hostname:設置或返回URL和主機名
href:設置或返回完整的URL
--九、location對象的方法
reload():從新加載當前文檔
replace():用新的文檔替換當前文檔
--十、document對象
-1.document對象的經常使用屬性
referrer:返回載入當前文檔的URL
URL:返回當前文檔的RUL
-2.referrer的語法格式以下。
語法:
document.referrer
當前文檔若是不是經過超連接訪問，則document.referrer的值爲null。
-3.URL的語法格式以下。
語法:
document.URL
--十一、document對象的經常使用方法
getElementById():返回對擁有id的第一個對象的引用
getElementsByName():返回帶有指定名稱的對象的集合
getElementsByTagName():返回帶有指定標籤名的對象的集合
write():向文檔寫文本、HTML表達式後JavaScript代碼
--十二、JavaScript內置對象
-1.date:用於操做日期和時間
語法:
var 時間示例 = new Date(參數);
getDate():天數
getDay():星期
getHours():小時
getMinutes():分鐘
getSeconds():秒數
getMonth():月份
getFullYear():年份
getTime():返回自某一時刻(1970年1月1日)以來的毫秒數
--1三、定時函數
-1.setTimeout()
setTimeout()用於在指定的毫秒後調用函數或計算表達式。語法格式以下。
語法:
setTimeout("調用的函數名稱",等待的毫秒數);
-2.setInterval()
setInterval()可按照指定的週期(以毫秒計)來調用函數或計算表達式。語法格式以下。
語法:
setInterval("調用的函數名稱",週期性調用函數用函數之間間隔的毫秒性)
-3.clearTimeout()
clearTimeout()函數用來清除由setTimeout()函數設置的定時器，語法格式以下。
語法:
clearTimeout(setTimeout()返回的ID值);
clearInterval()函數用來清除由SetInterval()函數設置的定時器，語法格式以下。
語法:
clearInterval(setInterval()返回的ID值);

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

第三章 JavaScript操做DOM對象

--一、DOM操做
-1.DOM是Document Object Model的縮寫,即文檔對象模型,是基於文檔編程的一套API接口,1938年,W3C發佈了第一級的DOM模範,這個範圍容許訪問和操做HTML頁面中的每一個單獨元素,如網頁的表格、圖片、文本、表單元素等。
-2.使用JavaScript操做的DOM是分爲三個方面:DOM Core(核心)、HTML—DOM和CSS—DOM。
--二、HTML文檔在DOM中是這樣規定的。
1.整個文檔是一個文檔節點。
2.每一個HTML標籤時一個元素節點。
3.包含在HTML元素中的文本是文本節點
4.每一個HTML屬性是一個屬性節點
5.註釋屬於註釋節點。
--三、使用getElement序列方法訪問指定節點
-1.在HTML文檔中，訪問節點的標準方法就是咱們以前學習的getElement系列方法，即getElementByld( )、getElementsByName( )和getElementsByTagName( ),只是它們查找的方法略有不一樣。
-2.查找方法
getElementByld( ):返回按id屬性查找的第個對象的引用。
getElementsByName( ):返回按帶有指定名稱name 查找的對象的集合，因爲一個文檔中可能會有多個同名節點(如複選框、 單選按鈕),所以返回的是元素數組
getElementsByTagName( ):返回帶有指定標籤名TagName 查找的對象的集合，因爲一個文檔中可能會有多個同類型的標籤節點(如圖片組、 文本輸入框)，所以返回元素數組。
--四、根據層次關係訪問節點
-1.經過getElementById()、getElementsByName()和getElementsByTagName()這三種方法可查證看HTML文檔的中的任何元素，可是這三種方法都會忽略文檔的結構,所以在HTML DOM中提供了節點屬性,這些屬性可遵照文檔的結構,在文檔的佈局進行"短距離地查找元素"。
-2.節點屬性
parentNode:返回節點的父節點
childNodes:返回子節點集合,childNodes[i]
firstChild:返回節點的第一個子節點,最普通的用法是訪問該元素的文本節點
lastChild:返回節點的最後一個子節點
nextSibling:下一個節點
previousSibling:上一個節點
--五、element屬性
-1.在JavaScript中給你們提供一組可兼容不一樣瀏覽器的element屬性,能夠消除這種因空行,換行等出現的沒法肯定訪問到節點的狀況。
-2.element屬性
firstElementChild:返回節點的第一個子節點,最廣泛的用法是訪問該元素的文本節點
lastElementChild:返回節點的最後一個子節點
nextElementSibling:下一個節點
previousElementSibling:上一個節點
--六、節點信息
-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
--七、操做節點的屬性
-1.HTML DOM提供了獲取及改變點屬性值的標準方法，以下所示。
getAttention("屬性名"):用來獲取屬性的值。
setAttribute("屬性名","屬性值"):用來設置屬性的值。
--八、建立和插入節點
-1.使用JavaScript操做DOM有不少方法能夠建立或增長一個新節點。主要方法以下。
-2.建立節點
createElement(tagName):建立一個標籤名爲tagName的新元素節點
A.appendChild(B):把B節點追加至A節點的末尾
insertBefore(A,B):把A節點插入B節點以前
cloneNode(deep):複製某個指定的節點
--九、刪除和替換節點
使用Core HTML 刪除節點的方法以下。
removeChild(node):刪除指定的節點
replaceChild(newNode,oldNode):用其餘的節點替換指定的節點,newNode是替換的新節點,oldNode是要被替換的節點。
--十、操做節點樣式
-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="樣式名稱"
--十一、獲取元素位置
-1.HTML中元素的屬性
offsetLeft:返回當前元素左邊界的距離，只讀屬性
offsetTop:返回當前元素上邊界的距離，只讀屬性
offsetHeight:返回元素的高度
offsetWidth:返回元素的寬度
offsetParent:返回元素的偏移容器，即對最近的動態定位的包含元素的引用
scrollTop:返回匹配元素的滾動條的垂直位置
scrollLeft:返回匹配元素的滾動條的水平位置
clientWidth:返回元素的可見寬度
clientHeight:返回元素的可見高度

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

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

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

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

第五章 初始jQuery

--一、介紹
-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.豐富的插件支持
--二、配置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>
--三、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(){
//執行代碼
});
--四、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();
--五、jQuery對象
jQuery對象就是經過jQuery包裝DOM對象後產生的對象,他可以使用jQuery中的方法
--六、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.Query選擇器的優點
1.簡介的語法
2.完善的處理機制
-2.屬性選擇器就是經過HTML元素的屬性選擇元素的選擇器,它與CSS中的屬性選擇器語法構成徹底一致。
-3.過濾選擇器主要經過特定的過濾規則來篩選出需的DOM元素,過濾規則與CSS中的僞類語法相同,即選擇器都一一個冒號(:)開頭,冒號前是須要過濾的元素。
-4.過濾選擇器能夠分爲基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表單對象屬性過濾選擇器。
-5.編寫選擇器時須要注意特殊符號和空格
--二、屬性選擇器
語法 描述
[attribute] 選取包含指定屬性的元素
[attribute = value] 選取指定等於屬性的某個元素
[attribute != value] 選取不是指定屬性的某個元素
[attribute ^= value] 選取指定屬性是以某個特定值開始的元素
[attribute $= value] 選取指定屬性是以某個特定值結束的元素
[attribute *= value] 選取包含某個屬性的元素
--三、基本過濾選擇器
語法 描述
:first 選取第一個元素
:last 選取最後一個元素
:not(selector) 選取去除全部與給定選擇器匹配的元素
:even 選取索引是偶數的元素
:odd 選取索引是基數的元素
:eq(index) 選取索引等於index的元素
:gt(index) 選取索引大於index的元素
:lt(index) 選取索引小於index的元素
:header 選取索引標題元素如h一、h2等
:focus 選取當前獲取焦點的元素
:animated 選擇全部動畫元素
--四、可見性過濾選擇器
選擇器 描述
:visible 選取全部可見元素
:hidden 選取全部隱藏元素
--五、層次選擇器
後代選擇器 div p 中間加空格 {意思是div裏面所有帶p標籤的所有選擇}
子選擇器 div>p 中間大於號{意思是div至關於爺爺 下面第一個p標籤至關於他的兒子 被選中}
相鄰選擇器 div+p 中間加好 {和div平級也就是鄰居 而第一家鄰居被選擇}
通用鄰居選擇器 div~p 中間波浪號{和div的平級是鄰居 而此選擇器選擇的適合他的所有同級鄰居}

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

第七章 jQuery中的事件與動畫

--一、在JavaScript中,經常使用的基礎事件有鼠標事件、鍵盤事件、window事件、表單事件。事件綁定和處理函數的語法格式以下。
語法:
事件名 = "函數名()";
或者
DOM 對象.事件名=函數;
在事件綁定處理函數後,能夠經過DOM對象.事件名()的方法顯示調用處理函數。在jQuery中基礎事件和JavaScript中的事件一致,它提供了特有的事件方法和處理函數綁定
--二、載入事件
window事件有文檔載入事件,它對應的方法是ready()
--三、鼠標事件
-1.鼠標事件顧名思義就是當用戶名在文檔上移動時而產生的事件
-2.經常使用的鼠標事件的方法
方法 描述 執行時機
click() 觸發或將函數綁定到指定元素的click事件 鼠標單擊時
mouseover() 觸發或將函數綁定到指定元素的mouseover事件 鼠標指針移過期
mouseout() 觸發或將函數綁定到指定元素的mouseout事件 鼠標指針移出時
mouseenter() 觸發或將函數綁定到指定元素的mouseenter事件 鼠標指針進入時
mouseleave() 觸發或將函數綁定到指定元素的mouseleave事件 鍵盤事件鼠標指針離開時
-3.語法:
$("標籤名").鼠標事件的方法(function(){
//JavaScript代碼
})
--四、鍵盤事件
-1.鍵盤樣式指當鍵盤聚焦到Web瀏覽器,用戶每次按下或者釋放按鍵是就會產生事件。
-2.經常使用鍵盤事件的方法
方法 描述 執行時機
keydown() 觸發或將函數綁定到指定元素的keydown事件 按下按鍵時
keyup() 觸發或將函數綁定到指定元素的keyup事件 釋放按鍵時
keypress() 觸發或將函數綁定到指定元素的keypress事件 產生可打印的字符時
-3.鍵盤事件的執行順序依次是keydown、keypress或keyup
--五、綁定事件
-1.在jquery中,若是須要爲匹配的元素同時綁定一個或多個事件,則可使用bind()方法,其語法格式以下。
語法:
bind(type,[data],fn)
-2.bind()方法有三個參數,其中參數data不是必須的
-3.bind()方法的參數
參數類型 參數含義 描述
type 事件類型 主要包括click、mouseover、mouseout等基礎事件,此外,還能夠是自定義事件
[data] 可選參數 做爲event.data屬性值傳遞給事件對象的額外數據對象,該參數不是必需的
fn 處理函數 用來綁定處理函數
--六、移除事件
-1.有時候事件執行完了,須要把綁定的事件經過必定的辦法取消,在jQuery中,提供了移除事件的方法,在綁定事件時,能夠爲匹配元素綁定一個或多個事件,那麼一樣能夠爲之匹配的元素移除單個或多個事件,可使用unbind()方法,其語法格式以下。
語法:
unbind([type],[fn])
unbind()方法有兩個參數,這兩個參數不是必須的,當unbind()不帶參數時,表示移除所綁定的所有事件。
-2.unbind()方法的參數說明
參數類型 參數含義 描述
[type] 事件類型 主要包括click、mouseover、mouseout等基礎事件,此外,還能夠是自定義事件
[fn] 處理函數 用來解除綁定的處理函數
--七、複合事件
-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);
--八、jQuery中的動畫
-1.控制元素顯示
1.在jQuery中,可使用show()方法控制元素的顯示,還能定義顯示元素是的效果。show()的語法格式以下。
2.語法:
$(selector).show([speed],[callback])
3.show()的參數說明
speed:
可選。規定元素從隱藏到徹底可見的速度。默認爲"0"。
可能值:毫秒(如1000)、slow、normal、fast。
在設置速度的狀況下,元素從隱藏到徹底可見的過程當中,會逐漸改變高度、寬度、外邊距、內邊距和透明度
callback:
可選。show函數執行完以後,要執行的函數。
-二、控制元素隱藏
1.在jQuery中,可使用hide()方法控制元素的隱藏,還能定義隱藏元素時的效果。hide()語法格式以下。
2.語法:
$(selector).hide([speed],[callback])
-三、控制元素淡入
1.在jQuery中,可使用fadeln()方法控制元素的淡入,fadeln()方法的語法格式以下。
2.語法:
$(selector).fadeIn([speed],[callback])
3.fadeln方法的參數
speed:
可選。規定元素從隱藏到徹底可見的速度。默認爲"0"。
可能值:毫秒(如1000)、slow、normal、fast。
在設置速度的狀況下,元素從隱藏到徹底可見的過程當中,會逐漸第改變其透明度,給視覺以淡入的效果。
callback:
可選。fadeIn函數執行完以後,要執行的函數。
除非設置了speed參數,不然不能設置該參數
-四、控制元素淡出
1.在jQuery中,fadeOut()方法能夠控制元素淡出,還能定義顯示元素時的效果。fadeOut()方法的語法格式以下。
2.語法:
$(selector).fadeOut([speed],[callback])
-五、改變元素高度
1.在jQuery中,用於改變元素高度的方法是slideUp()和slideDown()。若元素的display屬性值爲none,當調用slideDown()方法時,這個元素會從上向下衍伸顯示,而slideUp()方法正好相反,元素從上到下縮短直至隱藏,slideUp()和slideDown()方法的語法格式以下。
2.語法:
$(selector).slideUp([speed],[callback])
$(selector).slideDown([speed],[callback])
3.參數說明:
speed爲可選參數,用來規定改變元素高度的時長,它的取值也是slow、fast或毫秒
callback爲可選參數,表示改變元素高度完成後執行的函數名稱。
-六、自定義動畫
1.語法:
$(selector).animate({params},speed,callback)
2.animate()的參數說明:
params:必須,定義造成動畫的CSS屬性。
speed:可選,規定效果時長,取值:毫秒、fast、slow.
callback:可選,滑動完成後執行的函數名稱。

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

第八章 使用jQuery操做DOM

--一、jQuery中的DOM操做說明
jQuery中的DOM操做主要分爲樣式操做、文本和value屬性值操做、節點操做，節點操做中又包含屬性操做、節點遍歷和CSS-DOM操做。其中,最核型的部分是節點操做和節點遍歷。
--二、設置和獲取樣式值
-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); 獲取屬性
--三、追加樣式和移除樣式
-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。
--四、內容操做
-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屬性的值
--五、操做節點
-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])
--六、屬性操做
-1.獲取與設置元素屬性
語法:
$(selector).attr([name]) //獲取屬性值
或者
$(selector).attr({[name1:value1],[name2:value2].....[nameN:valueN]}) //設置多個屬性值
其參數name表示屬性名稱,value表示屬性值
-2.刪除元素屬性
語法:
$(selector).removeAttr(name)
--七、節點遍歷
-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();
--八、CSS-DOM相關操做方法說明
css():設置或返回匹配元素的樣式屬性
height([value]):參數可選。設置或返回匹配元素的高度。若是沒有規定長度單位,則使用默認的px做爲單位
width(value):參數可選。設置或返回匹配元素的寬度。若是沒有規定長度單位,則使用默認的px做爲單位
offset([value]):返回以像素爲單位的top和left座標。此方法僅對可見元素有效
offseParent():使用最近的已定位祖先元素。定位元素指的是元素的CSS position值被設置爲relative、absolute或fixed元素
postiton():返回第一個匹配元素相對於父元素的位置
scrollLeft([postiton]):參數可選。設置或返回匹配元素相對滾動條左側的偏移
scrollTop([postiton]):參數可選。設置或返回匹配元素相對滾動條頂部的偏移

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

第九章 表單校驗

--一、表單選擇器 語法 描述 :input 匹配全部input、textarea、select和button元素 :text 匹配全部單行文本框 :password 匹配全部密碼框 :radio 匹配全部單項按鈕 :checkbox 匹配全部複選框 :submit 匹配全部提交按鈕 :image 匹配全部圖像域 :reset 匹配全部重置按鈕 :button 匹配全部按鈕 :file 匹配全部文件域 :hidden 匹配全部不可見元素,或者type爲hidden的元素--二、表單屬性過濾器 語法 描述 :enabled 匹配全部可用元素 :disabled 匹配全部不可用元素 :checked 匹配全部被選中元素(複選框、單項按鈕、select中的option) :selected 匹配全部選中的option元素--三、表單驗證經常使用的方法和事件 事件: onblur:失去焦點,當光標離開某個文本框時觸發 onfocus:獲取焦點,當光標進入某個文本框時觸發 方法: blur():從文本域中移開焦點 focus():在文本域中設置焦點,即得到光標 select():選取文本域中的內容,突出顯示輸入區域的內容--四、正則表達式 -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}--五、HTML5新增長驗證屬性 屬性 描述 placeholder 提供一種提示(hint),輸入域爲空時顯示,得到焦點輸入內容後消失 required 規定輸入域不能爲空 pattern 規定驗證input域的模式(正則表達式)--六、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:使用自定義的驗證錯誤提示信息。