javaScript和jQuery整合
阿新 • • 發佈：2019-01-04
####1.JavaScript基礎####
##1.1什麼是JavaScript##
JavaScript是一種描述性語言，也是一種基於物件(Object)和事件驅動的，並具有安全效能的指令碼語言。
它與HTML一起，在一個Web頁面中連結多個物件，與Web客戶端實現互動。無論在客戶端還是在伺服器端，JavaScript應用程式都要下載到瀏覽器的客戶端執行，從而減輕了伺服器端的負擔
總結其特點如下：1）主要用來在HTML頁面中新增互動行為。
2）是一種指令碼語言，語法和java類似。
3）一般用來編寫客戶端的指令碼。
##1.2JavaScript的組成##
1.ECMAScript：語法，變數和資料型別，運算子，邏輯控制語句，關鍵字和保留字，物件。
ECMAScript是一個描述，規定了指令碼語言的所有屬性，方法和物件的標準，因此在使用Web客戶端指令碼語言編碼時一定要遵守ECMAScritp標準。
2.瀏覽器物件模型
瀏覽器物件模型(Browser Object Model,BOM),提供了獨立於內容與瀏覽器視窗進行互動的物件，使用瀏覽器物件模型可以實現與HTML的互動。
文件物件模型(Document Object Model,DOM),是HTML文件物件模型(HTML DOM)定義的一套標準方法，用來訪問和操縱HTML文件。
##1.3JavaScript的基本結構##
<script type="text/javascript">
var num1=3;
var str1="aaa";
var bool=true;
document.write(num1);
document.write("初學javaScript");
document.write(typeof str1);
</script>
1.3.1JavaScript的執行原理
1)瀏覽器客戶端向伺服器傳送請求；
2）資料處理；
3）傳送請求。
1.3.2在網頁中使用JavaScript的方式
1)內部JavaScript檔案
2)外部JavaScript檔案
3)直接在HTML標籤中
##1.4JavaScript核心語法
1.4.1變數的宣告和賦值
var 合法的變數名；
區分大小寫，JavaScript是一種弱型別語言，允許不宣告變數而直接使用，系統將會自動宣告該變數。
1.4.2屬戲劇型別
基本資料型別如下：
1）undefined（未定義型別）
2）null（空型別）；
3）number（數值型別）；
4）string（字串型別）；
5）boolean（布林型別）。
typeof（運算子來判斷一個值或變數屬於哪種資料型別。）語法：typeof 變數名 或者typeof(變數名)
==判斷值是否相等，===判斷值和資料型別是否相等。
字串的方法：indexOf(str,index);charAt(index);toLowerCase();toUpperCase();substring(index1,index2);split(str);
定義陣列：var num=new Array();
var num=[1,2,3,4];
陣列的方法：join();sort();push()//向陣列末尾新增一個或者多個元素，並返回新的長度
1.4.3迴圈
語法和java一致，
for-in迴圈
for(var i in fruit)
console.log(fruit[i]);
1.4.4常用的輸入輸出
1.警告arert();//帶有一個字串和一個“確定”按鈕；沒有返回值，預設返回undefined
2.提示prompt();//彈出一個提示對話方塊，等待使用者輸入一行資料。語法：prompt("提示資訊","輸入框的預設資訊");
3.詢問框 confirm();//彈出一個提示資訊，一個確定按鈕，一個取消按鈕。
##1.5JavaScript的常用語法--函式
1.5.1常用的系統函式
1. parseInt()
var num1=parseInt("78.89");//返回值78
var num1=parseInt("4567aab");//返回值4567
var num1=parseInt("bbbba7878.89");//返回值NaN
（數值+undefined=NaN=not a number）
2.isNaN(x)
如果X是特殊的非數字值，則返回值是true，否則返回false。
3.parseFloat();
4.Number();
1.5.2自定義函式
語法：
1.定義函式
function 函式名(引數1，引數2,.....){
//JavaScript語句;
[return 返回值]
}
//宣告式
function fun1(){}
//變數式-----把函式看成一種變數
var fun2=function(){}
2.呼叫函式
事件名=”函式名()“;
呼叫本函式的的關鍵字：arguments
匿名呼叫：(function(){alert("bbbbbbb")})();//匿名函式
函式值作為引數傳遞：
function fun2(method){
method();
}
function fun3(){
alert("ccccc");
}
fun2(fun3);
method是值，method()是呼叫方法(函式)
1.5.3事件
事件三要素：事件源，事件型別，事件效果
名稱 說明
onload 一個頁面或一幅影象完成載入
onlick 滑鼠單擊某個物件
onmouseover 滑鼠指標移到某元素上
onkeydown 某個鍵盤按鍵被按下(event.keyCode獲取)
<script>
var fun2=function(){
var code=event.keyCode;
console.log(event.keyCode);
var result=String.fromCharCode(code);
console.log(result);
}
</script>
<input type="text" onkeydown="fun2()"/>
獲取監聽資訊
監聽
<body>
<script>
var fun2=function(){
var e=arguments.callee.caller.arguments[0] || event;
var code=e.keyCode;
console.log(e.keyCode);
var result=String.fromCharCode(code);
console.log(result);
}
</script>
<input type="text" onkeydown="fun2()"/>
</body>
onchange 域的內容被改變(監聽的是value的屬性的值的改變)
####2.JavaScript操作BOM物件####
##2.1Window物件##
2.1.1常用的屬性
名稱 說明
history 有關客戶訪問過的URL資訊
location 有關當前URL的資訊
screen 只讀屬性，包含有關客戶端顯示螢幕的資訊
2.1.2常用的方法
名稱 說明
prompt() 顯示可提示使用者輸入的對話方塊
alert() 顯示一個帶有資訊和一個確定按鈕的警示對話方塊
confirm() 顯示一個帶有提示資訊，確定和取消按鈕的對話方塊
close() 關閉瀏覽器視窗
open() 開啟一個新的瀏覽器視窗，載入給定URL所指定的文件
setTimeout() 在指定的毫秒數後呼叫函式或計算表示式
setInterval()按照指定的週期(以毫秒計)來呼叫函式或表示式
open()語法：
window.open("彈出視窗的URL","視窗名稱","視窗特徵");
視窗的特徵屬性如下：
名稱 說明
height、width 視窗文件顯示區的高度、寬度、以畫素計
left、top 視窗的x座標、y座標，以畫素計
toolbar=yes|no|0|1 是否顯示瀏覽器的工具欄，預設是yes
scrollbars=yes|no|0|1 是否顯示滾動條，預設是yes
location=yes|no|0|1 是否顯示位址列，預設是yes
status=yes|no|0|1 是否新增狀態列，預設是yes
menubar=yes|no|0|1 是否顯示選單欄，預設是yes
resizable=yes|no|0|1 視窗是否可調節尺寸，預設是yes
titlebar=yes|no|0|1 是否顯示標題欄，預設是yes
fullscreen=yes|no|0|1 是否使用全屏模式顯示瀏覽器，預設是no
##2.2history物件與location物件
2.2.1history物件
名稱 描述
back() 載入history物件列表中的前一個URL
forward() 載入history物件列表中的後一個URL
go() 載入history物件列表中的某個具體URL
2.2.2location物件
名稱(屬性) 描述
host 設定或返回主機名和當前URL的埠號
hostname 設定或返回當前URL的主機名
href 設定或返回完整的URL
名稱(方法)
reload() 重新載入當前文件
replace() 用新的文件替換當前文件
##2.3document物件##
2.3.1document物件的常用屬性
屬性 描述
referrer 返回載入當前文件的URL(返回的是源網頁的url)
URL---統一資源定位符 URI---統一資源標記符(所有資源都有一個URI路徑，如果這個資源被共享到網路上，那麼這個資源就會用URL)
URL 返回當前文件的URL
2.3.2document物件的常用方法
方法 描述
getElementById() 返回對擁有指定id的第一個物件的引用
getElementByName() 返回帶有指定名稱的物件的集合
getElementByTagName() 返回帶有指定標籤名的物件的集合
getElementByClassName() 返回帶有指定類名的物件的集合
write() 向文件寫文字、HTML表示式或JavaScript程式碼(當頁面載入完畢之後再呼叫這個方法就是清空內容再新增)
var aEle=document.getElementById("ID");
aEle.innerText="aaaa";//設定指定id為"ID"的物件的文字值為aaaa
aEle.innerText; //獲取指定id為“ID”的物件的文字值
aEle。innerHTML=“<span>a<span/>” //獲得指定id為“ID”的物件標籤的全部內容(包括子標籤)
##2.4JavaScript的內建物件
Date物件，Array物件，String物件，Math物件
2.4.1Date物件
語法：var 日期例項=new Date(引數);
引數可以是的字串格式“MM DD,YYYY,HH:MM:SS”
常用方法 說明
Date() 返回當日的日期和時間。
getDate() 從 Date 物件返回一個月中的某一天 (1 ~ 31)。
getDay() 從 Date 物件返回一週中的某一天 (0 ~ 6)。
getMonth() 從 Date 物件返回月份 (0 ~ 11)。
getFullYear() 從 Date 物件以四位數字返回年份。
getYear() 請使用 getFullYear() 方法代替。
getHours() 返回 Date 物件的小時 (0 ~ 23)。
getMinutes() 返回 Date 物件的分鐘 (0 ~ 59)。
getSeconds() 返回 Date 物件的秒數 (0 ~ 59)。
getMilliseconds() 返回 Date 物件的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
2.4.2Math物件
常用方法 說明
ceil(x) 對數進行上舍入。
floor(x) 對數進行下舍入。
round(x) 把數四捨五入為最接近的整數。
random() 返回 0 ~ 1 之間的隨機數。
##2.5定時函式##
2.5.1常用定時函式
1.setTimeout()
2.setInterval()
####3.JavaScript操作DOM物件
##3.1DOM操作##
3.1.1DOM操作分類
1.DOM Core
2.HTML-DOM
3.CSS-DOM
3.1.2節點與節點關係
父級節點，兒級節點，兄弟級節點
3.1.3訪問節點
1.使用getElement系列方法訪問指定節點
2.根據層次關係訪問節點
屬性名稱 描述
parentNode 返回節點的父節點
childNodes 返回子節點集合，childNodes[i]
firstChild 返回節點的第一個子節點
lastChild 返回節點的最後一個子節點
nextSibling 下一個節點
previousSibliing 上一個節點
3.屬性名稱 描述
firstElementChild 返回節點的第一個節點，最普遍的用法是訪問該元素的文字節點
lastElementChild 返回節點的最一個子節點
nextElementSibling 下一個節點
previousElementSibling 上一個節點
3.1.5節點資訊
nodeName(節點名稱) nodeValue(節點值) nodeType(節點值)
文字資訊也是一個節點，需要用firstChild去呼叫
##3.2操作節點##
3.2.1操作節點的屬性
getAttribute("屬性名"):獲取節點的屬性的值
setAttribute("屬性名","屬性值"):用來設定屬性的值。
3.2.2建立和插入節點
名稱 描述
createElement(tagName) 建立一個標籤名為tagName的新元素節點
A.appendChild(B) 把B節點追加到A節點的末尾
insertBefore(A,B) 把A節點插入B節點之前
cloneNode(deep) 複製某個指定的節點
都是父元素插入和追加
3.2.3刪除和替換節點
名稱 描述
removeChild(node) 刪除指定節點
replaceChild(newNode,oldNode) 用其他的節點替換指定節點
都是父元素刪除和替換節點
3.2.4操作節點樣式
1.style屬性
語法：HTML元素.style.樣式屬性=“值”;
2.className屬性
3.2.5獲取元素的樣式
語法：HTML元素.currentStyle.樣式屬性；
##3.3獲取元素位置
3.3.1元素屬性的應用
屬性 描述
offsetLeft 返回當前元素左邊界到它上級元素左邊界的距離，只讀屬性
offsetTop 返回當前元素上邊界到它上級元素的上邊界的距離，只讀屬性
offsetHeight 返回當前元素的高度
offsetWidth 返回當前元素的寬度
offsetParent 返回元素便宜容器，即對最近的動態定位的包含元素的引用
scrolTop 返回匹配元素的滾動條的垂直位置
scrollLeft 返回匹配元素的滾動條的水平位置
clientWidth 返回元素的可見寬度
clientHeight 返回元素的可見高度
####5.初識jQuery####
##5.1目前流行的js庫##
jQuery,Bootstrap,zepto,Ext,YUI
##5.2jQ的語法結構##
1.工廠函式$()=jQuery()
2.選擇器selector
$(selector)
3.jQuery 物件.addClass([樣式名])
css("屬性","屬性值");//設定一個css屬性
css("屬性1":"屬性值","屬性2":"屬性值","屬性3":"屬性值"...)//設定多個css屬性
常用的兩個方法：$(selector).show();$(selector).hide();
##5.3jQ程式的程式碼風格
1."$"的使用
它是jQuery的標誌
2.鏈式操作
jQuery程式碼中採用了一種鏈式程式設計模式，它可以對一個物件進行多重操作，並將操作物件作為結果返回給該物件，以便於將返回結果應用於該物件的下一次操作
3.隱式迭代
在傳統對的JavaScript寫法中，需要使用getElementTagName()來獲取標籤集合，然後只用for迴圈一個一個設定字型樣式，而這個是用了jQuery就不一樣了，它
不需要遍歷所有元素，可以直接設定元素的樣式
4.添加註釋
開發階段給程式碼添加註釋，增加程式碼的可讀性
維護階段把關鍵的模組形成開發文件，便於後期維護
產品釋出刪除註釋，減少檔案大小，加快下載速度，提高使用者體驗
##5.4DOM物件和JQuery物件
5.4.1DOM物件
var objDOM=document.getElementById("id"); //獲得DOM物件
var objHTML=objDOM.innerHTML; //使用JavaScript中的innerHTML屬性
5.4.2jQuery物件
$("#title").html(); //獲取id為title的元素內的html程式碼
等同於：document.getElementById("id").innerHTML;
5.4.3jQuery物件與DOM物件的相互轉換
1.jQuery物件轉換成DOM物件
var $textName=$("#textName");
var textName=$textName[0];//或者 var textName=$textName.get(0);
2.DOM物件轉換成jQuery物件
var textName=document.getElementById("textName");
var $textName=$(textName);
DOM物件只能使用DOM中的方法，jQuery物件不可以直接使用DOM中的方法，相反也一樣
####6.jQuery選擇器####
##6.1j通過Query選擇器選取元素##
6.1.1基本選擇器
名稱 語法構成
標籤選擇器 element
類選擇器 .class
id選擇器 #id
並集選擇器 selector1，selector2
全域性選擇器 *
6.1.2層次選擇器
名稱 語法構成 描述
後代選擇器 root offspring 選取root元素裡的所有offspring(後代)元素
子選擇器 parent>child 選取parent元素下的child(子)元素
相鄰元素選擇器 prev+next 選取緊鄰prev元素之後的next元素
同輩元素選擇器 prev~sibings 選取prev元素之後的所有siblings(同輩)元素
6.1.3屬性選擇器
名稱 語法構成
[attribute] 選取包含指定屬性的元素
[attribute=value] 選取等於指定屬性是某個特定值的元素
[attribute!=value] 選取不等於指定屬性是某個特定值的元素
[attribute^=value] 選取指定屬性是以某些特定值開頭的元素
[attribute$=value] 選取指定屬性是以某些特定值結尾的元素
[attribute*=value] 選取指定屬性包含某些特定值的元素
6.1.4基本過濾選擇器
語法 描述
:first 選取第一個元素
:last 選取最後一個元素
:not(selector) 選取去除所有與給定選擇器匹配的元素
:even 選取索引是偶數的所有元素(index從0開始)
:odd 選取索引是奇數的所有元素(index從0開始)
:eq(index) 選取索引等於index的元素(index從0開始)
:gt(index) 選取索引大於index的元素(index從0開始)
:lt(index) 選取索引小於index的元素(index從0開始)
:header 選取所有的表題元素，如h1~h6
:focus 選取當前獲取焦點的元素
:animated 選取所有的動畫元素
6.1.5可見性過濾選擇器
語法 描述
:visible 選取所有可見的元素
:hidden 選取所有隱藏的元素
##6.2jQuery選擇器的注意事項
1.選擇器中含有特殊符號的注意
HTML程式碼如下：
<div id="id#a"></div>
<div id="id[2]"></div>
正確的獲取元素如下：
$("#id//#a");
$("#id//[2//]");
2.選擇器中含有空格的也要注意
sibings();//找該元素的兄弟元素
####7.jQuery中事件與動畫####
##7.1jQuery中的事件##
7.1.1基礎事件
事件名=“函式名()”;
或者DOM 物件.事件名=函式名();
1.載入事件
$("document).ready();
2.滑鼠事件
名稱 執行時機
clik() 滑鼠單擊時
mouseover() 滑鼠指標移過時
mouseout() 滑鼠指標移出時
mouseenter() 滑鼠指標進入時
mouseleave() 滑鼠指標離開時
mouseover():如果滑鼠指標在其被選元素的子元素上來回進入時會觸發事件
mouseenter():如果滑鼠指標在其被選元素的子元素上來回進入時不會觸發事件
3.鍵盤事件
名稱 執行時機
keydown() 按下按鍵時
keyup() 釋放按鍵時
keypress() 產生可列印的字元時
4.聚焦與失焦
名稱 描述
focus() 聚焦
blus() 失焦
7.1.2繫結事件與移除事件
1.繫結事件
bind(type,[data],fn)
引數型別 引數含義 描述
type 事件型別 主要包括click、mouseover、mouseout等基礎事件，此外，還可以是自定義事件
[data] 可選引數 作為even.data屬性值傳遞給事件物件的額外資料物件，該引數不是必需的
fn 處理函式 用來繫結處理函式
(除了bind()方法之外，還有on(),live(),one()等事件的繫結方法)
2.移除事件
unbind([type],[fn])
7.1.3複合事件
1.hover()方法
hover(enter,leave);
2.toggle()方法
toggle(fn1,fn2,....,fnm);
toggle(),切換元素的可見狀態
##7.2jQuery中的動畫
7.2.1控制元素顯示與隱藏
1.控制元素顯示
$(selector).show([speed],[callback]);
引數 描述
speed 可能值：毫秒，slow，normal，fast
callback 可選，show函式執行完成之後，要執行的函式
2.控制元素隱藏
$(selector).hide([speed],[callback]);
7.2.2改變元素透明度
1.控制元素的淡入
$(selector).fadeIn([speed],[callback]);
2.控制元素的淡出
$(selector).fadeOut([speed],[callback]);
7.2.3改變元素的高度
$(selector).slideUp([speed],[callback]);
$(selector).slideDown([speed],[callback]);
7.2.4自定義動畫
$(selector).animate([params],[speed],[callback]);
引數 描述
params 必須，定義形成動畫的css屬性
speed 可選，規定效果時長，取值：毫秒，fast，slow
callback 可選，滑動完成之後執行的函式名
$(this).find(selector);
清除之前未完成的動畫，停止所有在指定元素上正在執行的動畫。
$(selector).stop(true,true)
####8.使用jQuery操作DOM####
##8.1樣式操作##
8.1.1設定和獲取樣式值
語法：
$(selector).css(name,value);
或者$(selector).css({name:value,name:value,name:value.....});
獲取屬性值$(selector).css(name);
1.追加樣式
語法:
$(selector).addClass(class1,class2...);
或者$(selector).addClass(class)
2.移除樣式
$(selector).removeClass(class);
或者$(selector).removeClass(class1,class2...);
3.切換樣式
$(selector).toggleClass(class)
4.判斷是否含有指定樣式
$(selector).hasClass(class)
##8.2內容操作##
8.2.1HTML程式碼操作
html([content])
2.標籤內容操作
text([content])
3.屬性值操作
val([content])
##8.3節點和屬性操作
8.3.1節點操作
1.查詢節點
使用jQuery選取器
2.建立節點
$(selector)
或者$(element)
或者$(html)
3.插入節點
插入方式 方法 描述
內部插入 append(content) 向每個匹配的元素內部追加內容。
內部插入 appendTO(content) 把所有匹配的元素追加到另一個指定的元素元素集合中。
內部插入 prepend(content) 向每個匹配的元素內部前置內容
內部插入 prependTo(content) 把所有匹配的元素前置到另一個、指定的元素元素集合中。
外部插入 after(content) 在每個匹配的元素之後插入內容
外部插入 insertAfter(content) 把所有匹配的元素插入到另一個、指定的元素元素集合的後面
外部插入 before(content) 在每個匹配的元素之前插入內容
外部插入 insertBefore(content) 把所有匹配的元素插入到另一個、指定的元素元素集合的前面
4.刪除節點
$(selector).remove([expr]):expr為可選項，如果接收引數，通過該表示式獲取指定元素，並進行刪除
清空元素中的所有後代節點
$(selector).empty()
5.替換節點
$(selector).replaceWith();//將所有匹配的元素都替換成指定的DOM元素或者HTML，舊的替換成新的
$(selector).replaceAll();//新的替換成舊的
6.複製節點
$(selector).clone([includeEvents])
includeEvents為可選值，為布林值，規定是否複製元素的所有事件處理
8.3.2屬性操作
1.獲取與設定元素屬性
$(selector).attr([name])//獲取屬性值
或者$(selector).attr({name1:value1,name2:value2});//設定多個屬性值
2.刪除元素屬性
$(selector).removeAttr(name)
##8.4節點遍歷##
8.4.1遍歷子節點
$(selector).children([expr])//獲取所有子元素，不考慮其他後代元素。expr為可選，用於過濾子元素的表示式
8.4.2遍歷同輩元素
$(selector).next([expr]);//所選元素的下一同輩元素
$(selector).prev([expr]);//用於獲取緊鄰該元素的上一個元素
$(selector).siblings([expr]);//用於獲取位於匹配元素前面和後面的所有同輩元素
8.4.3遍歷前輩元素
$(selector).parent([selector])//引數可選，獲取當前匹配元素集合中每個元素的父級元素
$(selector).parents([selector])//引數可選，獲取當前匹配元素集合中每個元素的祖先元素
8.4.4其他遍歷方法
$(selector).each(function(){})//為每個匹配元素規定執行的函式
$(selector).end()//用於結束當前鏈條中最近的篩選操作，並將匹配元素集還原為之前的狀態
還有find(),filter(),eq(),first(),last()
#8.5CSS-DOM操作
jQuery文件中css操作
####9. 表單驗證請求####
##9.1表單基本驗證技術
9.1.1表單選擇器
語法 示例 描述
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:hidden $(":hidden") 所有不可見的元素，或者type="hidden"的元素
9.1.2表單屬性過濾器
語法 示例 描述
:enabled $(":enabled") 所有啟用的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被選取的 input 元素
:checked $(":checked") 所有被選中的 input 元素
submit事件,如果submit事件返回值是false可以阻止表單提交
##9.2正則表示式##
9.2.1語法：var reg=/表示式/附加引數
g:代表可以進行全域性匹配
i:代表可以不區分大小寫匹配
m:代表可以進行多行匹配
2.建構函式，語法：var reg=new RegExp("表示式","附加引數");
9.2.2RegExp物件的方法
方法 描述
exec() 檢索字串中是正則表示式的匹配，返回找到的值，並確定其位置
test() 檢索字串中指定的值，返回true或false
正則表示式物件例項.test(字串);
9.2.3String物件的方法
方法 描述 語法
match() 找到一個或多個正則表示式的匹配 字串物件.match(searchString或者regexpObject)
search() 檢索與正則表示式相匹配的值
replace() 替換與正則表示式匹配的字串 字串物件.replace(RegExp物件或字串,"替換的字串")
split() 把字串分割為字串陣列 字串物件.split(分割符或者正則表示式，[n為可選項控制輸出的字串的長度])
9.2.2RegExp物件的屬性
屬性 描述
global RegExp物件是否具有標誌g
ignoreCase RegExp物件是否具有標誌i
multiline RegExp物件是否具有標誌m
9.2.4正則表示式的常用符號在JQ文件上存在
##9.3使用HTML5的方式驗證表單##
1.placeholder：提供給使用者的一些提示資訊
2.required：自動驗證表單元素是否為空
2.pattern：匹配對應的正則表示式
##9.4validity屬性##
validity屬性可以獲取表單元素的validityState物件，語法如下
var validityState=document.getElementById("nName").validity ;
它有8個屬性，分別針對8個方面的錯誤驗證
屬性 描述
valueMissing 表單元素設定了required特性，為必填項，如果必填項的值為空，就無法通過表單驗證，返回true，否則false
typeMismatch 輸入值與type型別不匹配，如果不匹配則返回true,否則返回false
patternMismatch 輸入值域pattern特性的正則表示式不匹配，如果不匹配則返回true,否則返回false
tooLong 輸入的內容超過了表單元素的maxLength特性限定的長度，如果不匹配則返回true,否則返回false
rangeUnderflow 輸入值小於min特性的值，如果不匹配則返回true,否則返回false
rangeOverflow 輸入值大於max特性的值，如果輸入的值大於最大值，返回true,否則返回false
stepMismatch 輸入值不符合step特性所推算的規則，如果不匹配則返回true,否則返回false
customError 使用自定義的驗證錯誤提示資訊，使用setCustomValidity()方法自定義錯誤提示資訊
例項：
var u=document.getElementById("nName");
if(u.validity.valueMissing==true){
u.setCustomValidity("暱稱不能為空");
}
else if(u.validity.patternMismatch==true){
u.setCustomValidity("暱稱不符合正則表示式的規則");
}
else{
u.setCustomValidity("");
}
採用sort()排序可以定義規則
sort(function(li1,li2){
var price1 = parseInt($(li1).find("span").text);
var price2 = parseInt($(li2).find("span").text);
return price1-price2;
})
$(function(){})//載入時執行
##1.1什麼是JavaScript##
JavaScript是一種描述性語言，也是一種基於物件(Object)和事件驅動的，並具有安全效能的指令碼語言。
它與HTML一起，在一個Web頁面中連結多個物件，與Web客戶端實現互動。無論在客戶端還是在伺服器端，JavaScript應用程式都要下載到瀏覽器的客戶端執行，從而減輕了伺服器端的負擔
總結其特點如下：1）主要用來在HTML頁面中新增互動行為。
2）是一種指令碼語言，語法和java類似。
3）一般用來編寫客戶端的指令碼。
##1.2JavaScript的組成##
1.ECMAScript：語法，變數和資料型別，運算子，邏輯控制語句，關鍵字和保留字，物件。
ECMAScript是一個描述，規定了指令碼語言的所有屬性，方法和物件的標準，因此在使用Web客戶端指令碼語言編碼時一定要遵守ECMAScritp標準。
2.瀏覽器物件模型
瀏覽器物件模型(Browser Object Model,BOM),提供了獨立於內容與瀏覽器視窗進行互動的物件，使用瀏覽器物件模型可以實現與HTML的互動。
文件物件模型(Document Object Model,DOM),是HTML文件物件模型(HTML DOM)定義的一套標準方法，用來訪問和操縱HTML文件。
##1.3JavaScript的基本結構##
<script type="text/javascript">
var num1=3;
var str1="aaa";
var bool=true;
document.write(num1);
document.write("初學javaScript");
document.write(typeof str1);
</script>
1.3.1JavaScript的執行原理
1)瀏覽器客戶端向伺服器傳送請求；
2）資料處理；
3）傳送請求。
1.3.2在網頁中使用JavaScript的方式
1)內部JavaScript檔案
2)外部JavaScript檔案
3)直接在HTML標籤中
##1.4JavaScript核心語法
1.4.1變數的宣告和賦值
var 合法的變數名；
區分大小寫，JavaScript是一種弱型別語言，允許不宣告變數而直接使用，系統將會自動宣告該變數。
1.4.2屬戲劇型別
基本資料型別如下：
1）undefined（未定義型別）
2）null（空型別）；
3）number（數值型別）；
4）string（字串型別）；
5）boolean（布林型別）。
typeof（運算子來判斷一個值或變數屬於哪種資料型別。）語法：typeof 變數名 或者typeof(變數名)
==判斷值是否相等，===判斷值和資料型別是否相等。
字串的方法：indexOf(str,index);charAt(index);toLowerCase();toUpperCase();substring(index1,index2);split(str);
定義陣列：var num=new Array();
var num=[1,2,3,4];
陣列的方法：join();sort();push()//向陣列末尾新增一個或者多個元素，並返回新的長度
1.4.3迴圈
語法和java一致，
for-in迴圈
for(var i in fruit)
console.log(fruit[i]);
1.4.4常用的輸入輸出
1.警告arert();//帶有一個字串和一個“確定”按鈕；沒有返回值，預設返回undefined
2.提示prompt();//彈出一個提示對話方塊，等待使用者輸入一行資料。語法：prompt("提示資訊","輸入框的預設資訊");
3.詢問框 confirm();//彈出一個提示資訊，一個確定按鈕，一個取消按鈕。
##1.5JavaScript的常用語法--函式
1.5.1常用的系統函式
1. parseInt()
var num1=parseInt("78.89");//返回值78
var num1=parseInt("4567aab");//返回值4567
var num1=parseInt("bbbba7878.89");//返回值NaN
（數值+undefined=NaN=not a number）
2.isNaN(x)
如果X是特殊的非數字值，則返回值是true，否則返回false。
3.parseFloat();
4.Number();
1.5.2自定義函式
語法：
1.定義函式
function 函式名(引數1，引數2,.....){
//JavaScript語句;
[return 返回值]
}
//宣告式
function fun1(){}
//變數式-----把函式看成一種變數
var fun2=function(){}
2.呼叫函式
事件名=”函式名()“;
呼叫本函式的的關鍵字：arguments
匿名呼叫：(function(){alert("bbbbbbb")})();//匿名函式
函式值作為引數傳遞：
function fun2(method){
method();
}
function fun3(){
alert("ccccc");
}
fun2(fun3);
method是值，method()是呼叫方法(函式)
1.5.3事件
事件三要素：事件源，事件型別，事件效果
名稱 說明
onload 一個頁面或一幅影象完成載入
onlick 滑鼠單擊某個物件
onmouseover 滑鼠指標移到某元素上
onkeydown 某個鍵盤按鍵被按下(event.keyCode獲取)
<script>
var fun2=function(){
var code=event.keyCode;
console.log(event.keyCode);
var result=String.fromCharCode(code);
console.log(result);
}
</script>
<input type="text" onkeydown="fun2()"/>
獲取監聽資訊
監聽
<body>
<script>
var fun2=function(){
var e=arguments.callee.caller.arguments[0] || event;
var code=e.keyCode;
console.log(e.keyCode);
var result=String.fromCharCode(code);
console.log(result);
}
</script>
<input type="text" onkeydown="fun2()"/>
</body>
onchange 域的內容被改變(監聽的是value的屬性的值的改變)
####2.JavaScript操作BOM物件####
##2.1Window物件##
2.1.1常用的屬性
名稱 說明
history 有關客戶訪問過的URL資訊
location 有關當前URL的資訊
screen 只讀屬性，包含有關客戶端顯示螢幕的資訊
2.1.2常用的方法
名稱 說明
prompt() 顯示可提示使用者輸入的對話方塊
alert() 顯示一個帶有資訊和一個確定按鈕的警示對話方塊
confirm() 顯示一個帶有提示資訊，確定和取消按鈕的對話方塊
close() 關閉瀏覽器視窗
open() 開啟一個新的瀏覽器視窗，載入給定URL所指定的文件
setTimeout() 在指定的毫秒數後呼叫函式或計算表示式
setInterval()按照指定的週期(以毫秒計)來呼叫函式或表示式
open()語法：
window.open("彈出視窗的URL","視窗名稱","視窗特徵");
視窗的特徵屬性如下：
名稱 說明
height、width 視窗文件顯示區的高度、寬度、以畫素計
left、top 視窗的x座標、y座標，以畫素計
toolbar=yes|no|0|1 是否顯示瀏覽器的工具欄，預設是yes
scrollbars=yes|no|0|1 是否顯示滾動條，預設是yes
location=yes|no|0|1 是否顯示位址列，預設是yes
status=yes|no|0|1 是否新增狀態列，預設是yes
menubar=yes|no|0|1 是否顯示選單欄，預設是yes
resizable=yes|no|0|1 視窗是否可調節尺寸，預設是yes
titlebar=yes|no|0|1 是否顯示標題欄，預設是yes
fullscreen=yes|no|0|1 是否使用全屏模式顯示瀏覽器，預設是no
##2.2history物件與location物件
2.2.1history物件
名稱 描述
back() 載入history物件列表中的前一個URL
forward() 載入history物件列表中的後一個URL
go() 載入history物件列表中的某個具體URL
2.2.2location物件
名稱(屬性) 描述
host 設定或返回主機名和當前URL的埠號
hostname 設定或返回當前URL的主機名
href 設定或返回完整的URL
名稱(方法)
reload() 重新載入當前文件
replace() 用新的文件替換當前文件
##2.3document物件##
2.3.1document物件的常用屬性
屬性 描述
referrer 返回載入當前文件的URL(返回的是源網頁的url)
URL---統一資源定位符 URI---統一資源標記符(所有資源都有一個URI路徑，如果這個資源被共享到網路上，那麼這個資源就會用URL)
URL 返回當前文件的URL
2.3.2document物件的常用方法
方法 描述
getElementById() 返回對擁有指定id的第一個物件的引用
getElementByName() 返回帶有指定名稱的物件的集合
getElementByTagName() 返回帶有指定標籤名的物件的集合
getElementByClassName() 返回帶有指定類名的物件的集合
write() 向文件寫文字、HTML表示式或JavaScript程式碼(當頁面載入完畢之後再呼叫這個方法就是清空內容再新增)
var aEle=document.getElementById("ID");
aEle.innerText="aaaa";//設定指定id為"ID"的物件的文字值為aaaa
aEle.innerText; //獲取指定id為“ID”的物件的文字值
aEle。innerHTML=“<span>a<span/>” //獲得指定id為“ID”的物件標籤的全部內容(包括子標籤)
##2.4JavaScript的內建物件
Date物件，Array物件，String物件，Math物件
2.4.1Date物件
語法：var 日期例項=new Date(引數);
引數可以是的字串格式“MM DD,YYYY,HH:MM:SS”
常用方法 說明
Date() 返回當日的日期和時間。
getDate() 從 Date 物件返回一個月中的某一天 (1 ~ 31)。
getDay() 從 Date 物件返回一週中的某一天 (0 ~ 6)。
getMonth() 從 Date 物件返回月份 (0 ~ 11)。
getFullYear() 從 Date 物件以四位數字返回年份。
getYear() 請使用 getFullYear() 方法代替。
getHours() 返回 Date 物件的小時 (0 ~ 23)。
getMinutes() 返回 Date 物件的分鐘 (0 ~ 59)。
getSeconds() 返回 Date 物件的秒數 (0 ~ 59)。
getMilliseconds() 返回 Date 物件的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
2.4.2Math物件
常用方法 說明
ceil(x) 對數進行上舍入。
floor(x) 對數進行下舍入。
round(x) 把數四捨五入為最接近的整數。
random() 返回 0 ~ 1 之間的隨機數。
##2.5定時函式##
2.5.1常用定時函式
1.setTimeout()
2.setInterval()
####3.JavaScript操作DOM物件
##3.1DOM操作##
3.1.1DOM操作分類
1.DOM Core
2.HTML-DOM
3.CSS-DOM
3.1.2節點與節點關係
父級節點，兒級節點，兄弟級節點
3.1.3訪問節點
1.使用getElement系列方法訪問指定節點
2.根據層次關係訪問節點
屬性名稱 描述
parentNode 返回節點的父節點
childNodes 返回子節點集合，childNodes[i]
firstChild 返回節點的第一個子節點
lastChild 返回節點的最後一個子節點
nextSibling 下一個節點
previousSibliing 上一個節點
3.屬性名稱 描述
firstElementChild 返回節點的第一個節點，最普遍的用法是訪問該元素的文字節點
lastElementChild 返回節點的最一個子節點
nextElementSibling 下一個節點
previousElementSibling 上一個節點
3.1.5節點資訊
nodeName(節點名稱) nodeValue(節點值) nodeType(節點值)
文字資訊也是一個節點，需要用firstChild去呼叫
##3.2操作節點##
3.2.1操作節點的屬性
getAttribute("屬性名"):獲取節點的屬性的值
setAttribute("屬性名","屬性值"):用來設定屬性的值。
3.2.2建立和插入節點
名稱 描述
createElement(tagName) 建立一個標籤名為tagName的新元素節點
A.appendChild(B) 把B節點追加到A節點的末尾
insertBefore(A,B) 把A節點插入B節點之前
cloneNode(deep) 複製某個指定的節點
都是父元素插入和追加
3.2.3刪除和替換節點
名稱 描述
removeChild(node) 刪除指定節點
replaceChild(newNode,oldNode) 用其他的節點替換指定節點
都是父元素刪除和替換節點
3.2.4操作節點樣式
1.style屬性
語法：HTML元素.style.樣式屬性=“值”;
2.className屬性
3.2.5獲取元素的樣式
語法：HTML元素.currentStyle.樣式屬性；
##3.3獲取元素位置
3.3.1元素屬性的應用
屬性 描述
offsetLeft 返回當前元素左邊界到它上級元素左邊界的距離，只讀屬性
offsetTop 返回當前元素上邊界到它上級元素的上邊界的距離，只讀屬性
offsetHeight 返回當前元素的高度
offsetWidth 返回當前元素的寬度
offsetParent 返回元素便宜容器，即對最近的動態定位的包含元素的引用
scrolTop 返回匹配元素的滾動條的垂直位置
scrollLeft 返回匹配元素的滾動條的水平位置
clientWidth 返回元素的可見寬度
clientHeight 返回元素的可見高度
####5.初識jQuery####
##5.1目前流行的js庫##
jQuery,Bootstrap,zepto,Ext,YUI
##5.2jQ的語法結構##
1.工廠函式$()=jQuery()
2.選擇器selector
$(selector)
3.jQuery 物件.addClass([樣式名])
css("屬性","屬性值");//設定一個css屬性
css("屬性1":"屬性值","屬性2":"屬性值","屬性3":"屬性值"...)//設定多個css屬性
常用的兩個方法：$(selector).show();$(selector).hide();
##5.3jQ程式的程式碼風格
1."$"的使用
它是jQuery的標誌
2.鏈式操作
jQuery程式碼中採用了一種鏈式程式設計模式，它可以對一個物件進行多重操作，並將操作物件作為結果返回給該物件，以便於將返回結果應用於該物件的下一次操作
3.隱式迭代
在傳統對的JavaScript寫法中，需要使用getElementTagName()來獲取標籤集合，然後只用for迴圈一個一個設定字型樣式，而這個是用了jQuery就不一樣了，它
不需要遍歷所有元素，可以直接設定元素的樣式
4.添加註釋
開發階段給程式碼添加註釋，增加程式碼的可讀性
維護階段把關鍵的模組形成開發文件，便於後期維護
產品釋出刪除註釋，減少檔案大小，加快下載速度，提高使用者體驗
##5.4DOM物件和JQuery物件
5.4.1DOM物件
var objDOM=document.getElementById("id"); //獲得DOM物件
var objHTML=objDOM.innerHTML; //使用JavaScript中的innerHTML屬性
5.4.2jQuery物件
$("#title").html(); //獲取id為title的元素內的html程式碼
等同於：document.getElementById("id").innerHTML;
5.4.3jQuery物件與DOM物件的相互轉換
1.jQuery物件轉換成DOM物件
var $textName=$("#textName");
var textName=$textName[0];//或者 var textName=$textName.get(0);
2.DOM物件轉換成jQuery物件
var textName=document.getElementById("textName");
var $textName=$(textName);
DOM物件只能使用DOM中的方法，jQuery物件不可以直接使用DOM中的方法，相反也一樣
####6.jQuery選擇器####
##6.1j通過Query選擇器選取元素##
6.1.1基本選擇器
名稱 語法構成
標籤選擇器 element
類選擇器 .class
id選擇器 #id
並集選擇器 selector1，selector2
全域性選擇器 *
6.1.2層次選擇器
名稱 語法構成 描述
後代選擇器 root offspring 選取root元素裡的所有offspring(後代)元素
子選擇器 parent>child 選取parent元素下的child(子)元素
相鄰元素選擇器 prev+next 選取緊鄰prev元素之後的next元素
同輩元素選擇器 prev~sibings 選取prev元素之後的所有siblings(同輩)元素
6.1.3屬性選擇器
名稱 語法構成
[attribute] 選取包含指定屬性的元素
[attribute=value] 選取等於指定屬性是某個特定值的元素
[attribute!=value] 選取不等於指定屬性是某個特定值的元素
[attribute^=value] 選取指定屬性是以某些特定值開頭的元素
[attribute$=value] 選取指定屬性是以某些特定值結尾的元素
[attribute*=value] 選取指定屬性包含某些特定值的元素
6.1.4基本過濾選擇器
語法 描述
:first 選取第一個元素
:last 選取最後一個元素
:not(selector) 選取去除所有與給定選擇器匹配的元素
:even 選取索引是偶數的所有元素(index從0開始)
:odd 選取索引是奇數的所有元素(index從0開始)
:eq(index) 選取索引等於index的元素(index從0開始)
:gt(index) 選取索引大於index的元素(index從0開始)
:lt(index) 選取索引小於index的元素(index從0開始)
:header 選取所有的表題元素，如h1~h6
:focus 選取當前獲取焦點的元素
:animated 選取所有的動畫元素
6.1.5可見性過濾選擇器
語法 描述
:visible 選取所有可見的元素
:hidden 選取所有隱藏的元素
##6.2jQuery選擇器的注意事項
1.選擇器中含有特殊符號的注意
HTML程式碼如下：
<div id="id#a"></div>
<div id="id[2]"></div>
正確的獲取元素如下：
$("#id//#a");
$("#id//[2//]");
2.選擇器中含有空格的也要注意
sibings();//找該元素的兄弟元素
####7.jQuery中事件與動畫####
##7.1jQuery中的事件##
7.1.1基礎事件
事件名=“函式名()”;
或者DOM 物件.事件名=函式名();
1.載入事件
$("document).ready();
2.滑鼠事件
名稱 執行時機
clik() 滑鼠單擊時
mouseover() 滑鼠指標移過時
mouseout() 滑鼠指標移出時
mouseenter() 滑鼠指標進入時
mouseleave() 滑鼠指標離開時
mouseover():如果滑鼠指標在其被選元素的子元素上來回進入時會觸發事件
mouseenter():如果滑鼠指標在其被選元素的子元素上來回進入時不會觸發事件
3.鍵盤事件
名稱 執行時機
keydown() 按下按鍵時
keyup() 釋放按鍵時
keypress() 產生可列印的字元時
4.聚焦與失焦
名稱 描述
focus() 聚焦
blus() 失焦
7.1.2繫結事件與移除事件
1.繫結事件
bind(type,[data],fn)
引數型別 引數含義 描述
type 事件型別 主要包括click、mouseover、mouseout等基礎事件，此外，還可以是自定義事件
[data] 可選引數 作為even.data屬性值傳遞給事件物件的額外資料物件，該引數不是必需的
fn 處理函式 用來繫結處理函式
(除了bind()方法之外，還有on(),live(),one()等事件的繫結方法)
2.移除事件
unbind([type],[fn])
7.1.3複合事件
1.hover()方法
hover(enter,leave);
2.toggle()方法
toggle(fn1,fn2,....,fnm);
toggle(),切換元素的可見狀態
##7.2jQuery中的動畫
7.2.1控制元素顯示與隱藏
1.控制元素顯示
$(selector).show([speed],[callback]);
引數 描述
speed 可能值：毫秒，slow，normal，fast
callback 可選，show函式執行完成之後，要執行的函式
2.控制元素隱藏
$(selector).hide([speed],[callback]);
7.2.2改變元素透明度
1.控制元素的淡入
$(selector).fadeIn([speed],[callback]);
2.控制元素的淡出
$(selector).fadeOut([speed],[callback]);
7.2.3改變元素的高度
$(selector).slideUp([speed],[callback]);
$(selector).slideDown([speed],[callback]);
7.2.4自定義動畫
$(selector).animate([params],[speed],[callback]);
引數 描述
params 必須，定義形成動畫的css屬性
speed 可選，規定效果時長，取值：毫秒，fast，slow
callback 可選，滑動完成之後執行的函式名
$(this).find(selector);
清除之前未完成的動畫，停止所有在指定元素上正在執行的動畫。
$(selector).stop(true,true)
####8.使用jQuery操作DOM####
##8.1樣式操作##
8.1.1設定和獲取樣式值
語法：
$(selector).css(name,value);
或者$(selector).css({name:value,name:value,name:value.....});
獲取屬性值$(selector).css(name);
1.追加樣式
語法:
$(selector).addClass(class1,class2...);
或者$(selector).addClass(class)
2.移除樣式
$(selector).removeClass(class);
或者$(selector).removeClass(class1,class2...);
3.切換樣式
$(selector).toggleClass(class)
4.判斷是否含有指定樣式
$(selector).hasClass(class)
##8.2內容操作##
8.2.1HTML程式碼操作
html([content])
2.標籤內容操作
text([content])
3.屬性值操作
val([content])
##8.3節點和屬性操作
8.3.1節點操作
1.查詢節點
使用jQuery選取器
2.建立節點
$(selector)
或者$(element)
或者$(html)
3.插入節點
插入方式 方法 描述
內部插入 append(content) 向每個匹配的元素內部追加內容。
內部插入 appendTO(content) 把所有匹配的元素追加到另一個指定的元素元素集合中。
內部插入 prepend(content) 向每個匹配的元素內部前置內容
內部插入 prependTo(content) 把所有匹配的元素前置到另一個、指定的元素元素集合中。
外部插入 after(content) 在每個匹配的元素之後插入內容
外部插入 insertAfter(content) 把所有匹配的元素插入到另一個、指定的元素元素集合的後面
外部插入 before(content) 在每個匹配的元素之前插入內容
外部插入 insertBefore(content) 把所有匹配的元素插入到另一個、指定的元素元素集合的前面
4.刪除節點
$(selector).remove([expr]):expr為可選項，如果接收引數，通過該表示式獲取指定元素，並進行刪除
清空元素中的所有後代節點
$(selector).empty()
5.替換節點
$(selector).replaceWith();//將所有匹配的元素都替換成指定的DOM元素或者HTML，舊的替換成新的
$(selector).replaceAll();//新的替換成舊的
6.複製節點
$(selector).clone([includeEvents])
includeEvents為可選值，為布林值，規定是否複製元素的所有事件處理
8.3.2屬性操作
1.獲取與設定元素屬性
$(selector).attr([name])//獲取屬性值
或者$(selector).attr({name1:value1,name2:value2});//設定多個屬性值
2.刪除元素屬性
$(selector).removeAttr(name)
##8.4節點遍歷##
8.4.1遍歷子節點
$(selector).children([expr])//獲取所有子元素，不考慮其他後代元素。expr為可選，用於過濾子元素的表示式
8.4.2遍歷同輩元素
$(selector).next([expr]);//所選元素的下一同輩元素
$(selector).prev([expr]);//用於獲取緊鄰該元素的上一個元素
$(selector).siblings([expr]);//用於獲取位於匹配元素前面和後面的所有同輩元素
8.4.3遍歷前輩元素
$(selector).parent([selector])//引數可選，獲取當前匹配元素集合中每個元素的父級元素
$(selector).parents([selector])//引數可選，獲取當前匹配元素集合中每個元素的祖先元素
8.4.4其他遍歷方法
$(selector).each(function(){})//為每個匹配元素規定執行的函式
$(selector).end()//用於結束當前鏈條中最近的篩選操作，並將匹配元素集還原為之前的狀態
還有find(),filter(),eq(),first(),last()
#8.5CSS-DOM操作
jQuery文件中css操作
####9. 表單驗證請求####
##9.1表單基本驗證技術
9.1.1表單選擇器
語法 示例 描述
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:hidden $(":hidden") 所有不可見的元素，或者type="hidden"的元素
9.1.2表單屬性過濾器
語法 示例 描述
:enabled $(":enabled") 所有啟用的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被選取的 input 元素
:checked $(":checked") 所有被選中的 input 元素
submit事件,如果submit事件返回值是false可以阻止表單提交
##9.2正則表示式##
9.2.1語法：var reg=/表示式/附加引數
g:代表可以進行全域性匹配
i:代表可以不區分大小寫匹配
m:代表可以進行多行匹配
2.建構函式，語法：var reg=new RegExp("表示式","附加引數");
9.2.2RegExp物件的方法
方法 描述
exec() 檢索字串中是正則表示式的匹配，返回找到的值，並確定其位置
test() 檢索字串中指定的值，返回true或false
正則表示式物件例項.test(字串);
9.2.3String物件的方法
方法 描述 語法
match() 找到一個或多個正則表示式的匹配 字串物件.match(searchString或者regexpObject)
search() 檢索與正則表示式相匹配的值
replace() 替換與正則表示式匹配的字串 字串物件.replace(RegExp物件或字串,"替換的字串")
split() 把字串分割為字串陣列 字串物件.split(分割符或者正則表示式，[n為可選項控制輸出的字串的長度])
9.2.2RegExp物件的屬性
屬性 描述
global RegExp物件是否具有標誌g
ignoreCase RegExp物件是否具有標誌i
multiline RegExp物件是否具有標誌m
9.2.4正則表示式的常用符號在JQ文件上存在
##9.3使用HTML5的方式驗證表單##
1.placeholder：提供給使用者的一些提示資訊
2.required：自動驗證表單元素是否為空
2.pattern：匹配對應的正則表示式
##9.4validity屬性##
validity屬性可以獲取表單元素的validityState物件，語法如下
var validityState=document.getElementById("nName").validity ;
它有8個屬性，分別針對8個方面的錯誤驗證
屬性 描述
valueMissing 表單元素設定了required特性，為必填項，如果必填項的值為空，就無法通過表單驗證，返回true，否則false
typeMismatch 輸入值與type型別不匹配，如果不匹配則返回true,否則返回false
patternMismatch 輸入值域pattern特性的正則表示式不匹配，如果不匹配則返回true,否則返回false
tooLong 輸入的內容超過了表單元素的maxLength特性限定的長度，如果不匹配則返回true,否則返回false
rangeUnderflow 輸入值小於min特性的值，如果不匹配則返回true,否則返回false
rangeOverflow 輸入值大於max特性的值，如果輸入的值大於最大值，返回true,否則返回false
stepMismatch 輸入值不符合step特性所推算的規則，如果不匹配則返回true,否則返回false
customError 使用自定義的驗證錯誤提示資訊，使用setCustomValidity()方法自定義錯誤提示資訊
例項：
var u=document.getElementById("nName");
if(u.validity.valueMissing==true){
u.setCustomValidity("暱稱不能為空");
}
else if(u.validity.patternMismatch==true){
u.setCustomValidity("暱稱不符合正則表示式的規則");
}
else{
u.setCustomValidity("");
}
採用sort()排序可以定義規則
sort(function(li1,li2){
var price1 = parseInt($(li1).find("span").text);
var price2 = parseInt($(li2).find("span").text);
return price1-price2;
})
$(function(){})//載入時執行