溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jQuery 是 JavaScript 的一個類庫，類似 python 中的模塊。
jQuery在線手冊：http://jquery.cuishifeng.cn/
官網：http://jquery.com/
目前jQuery有三個大版本：1.x、 2.x、 3.x。教學推薦使用1.x的最新版本，這個版本兼容IE低版本。
去官方頁面：http://code.jquery.com/ ，可以獲取到最新的版本，我這會用的是 jquery-1.12.4 。
前面說到，jQuery是一個類庫，那么在使用之前，就需要將庫添加到網頁中。用下面的語句把你的jQuery文件添加到網頁中：
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>這里也可以不使用本地的文件，把src的值替換成互聯網上的地址，就是各大網站提供的CDN庫，比如下面這個是新浪的：
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>使用CDN就不會從你的網站下載這個庫文件了，另外，許多用戶在訪問其他站點時，已經訪問過這些大網站，加載過 jQuery 。結果就是，當他們訪問您的站點時，會從緩存中加載 jQuery，這樣可以減少加載時間。同時，大多數 CDN 都可以確保當用戶向其請求文件時，會從離用戶最近的服務器上返回響應，這樣也可以提高加載速度。
如果覺得用別人的不放心，擔心CDN失效，可以用下面的代碼，先嘗試加載CDN，如果失敗再加載本站的庫文件：
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>window.jQuery || document.write("<script src='jquery-1.12.4.min.js'><\/script>")</script>通過 '$' 提示符，或者關鍵字 jQuery 都可以調用 jQuery。一般都用的是 $ 吧。
驗證，下面的代碼用到了jQuery語句，只有成功添加了jQuery才有顯示：
<body>
<p>驗證 jQuery ...</p>
<!--確保在這之前，頁面中有添加jQuery的語句-->
<script>
$("body").append("jQuery添加成功")
// jQuery("body").append("jQuery添加成功")
</script>
</body>在進行操作之前，都是要先獲取到對象，然后操作這個對象。這里先來看一下使用jQuery獲取到的對象和通過DOM獲取到的對象有什么關系。先打開一個如下的頁面，加載了jQuery，并且有一個 id='i1' 的標簽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
</head>
<body>
<p id="i1">獲取對象</p>
</body>
</html>打開頁面后，進入控制臺進行操作，獲取并查看標簽的對象：
> $('#i1') // jQuery通過id獲取對象
< [object Object]: {0: Object, context: Object, length: 1, selector: "#i1"}
> document.getElementById('i1')
< <p id="i1">獲取對象</p>
> $('#i1')[0] // jQuery對象下標0的內容和DOM對象的一樣
< <p id="i1">獲取對象</p>
> $(document.getElementById('i1')) // DOM對象也可以轉換成jQuery對象
< [object Object]: {0: Object, context: Object, length: 1}總結，jQuery的下標0 和 DOM 獲取到的對象是一樣的。jQuery對象包含完整的DOM對象。于是我們也知道的兩種對象間互相轉換的方式：
jQuery對象[0] ：轉換成DOM對象$(DOM對象) ：轉換成jQuery對象這樣，如果已經有了一個DOM對象，可以轉換成jQuery對象后，繼續使用jQuery。反之，已經有了一個jQuery對象后，如果只想用原生的語句，也可以轉換成DOM對象后，繼續使用原生語句。
選擇器的作用就是通過它可以找到某個或者某些標簽。
基本的選擇器的語法和css里的一樣，只要加上引號變成字符串后，放到 $() 的括號中就行了。#id ：通過id匹配element ：通過標簽名匹配.class ：通過類名匹配* ：匹配所有元素selector1,selector2,selectorN ：使用多個選擇器進行匹配，用逗號隔開，合并匹配到的結果，或的關系。
ancestor descendant ：選擇器之間用空格分隔，找到前一個選擇器下的所有的符合后一個選擇器的元素。包括子元素和下面更深層的元素parent > child ：中間是大于號'>'，匹配到父元素后，再匹配它下一級的子元素。這里只匹配一層，這是和上面的區別，上面會匹配所有層級。prev + next ：匹配到前一個選擇器之后，在同層以及更深層匹配后一個選擇器。prev ~ siblings ：匹配到前一個選擇器之后，在他的同層級匹配后一個選擇器。匹配兄弟標簽。
通過基本選擇器和層級選擇器，我們就獲得了一個也可能是多個符合條件的標簽。接下來還可以繼續進行篩選：:first ：獲取第一個元素:last ：獲取最后一個元素:eq(index) ：匹配一個給定索引值的元素
上面的是常用的，下面的幾個是用的不多的，還是知道一下：:even 和 :odd ：匹配所有索引值為偶數/奇數的元素，從 0 開始計數:gt(index) 和 :lt(index) ：匹配所有大于/小于給定索引值的元素:header ：匹配所有標題元素，就是 h2 到 h7 標簽
另外還有更多篩選器，是的不多，就不一一列出了。下面的是匹配奇數和偶數的應用，為表格的奇數行和偶數行應用不同的樣式，防止看錯行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table thead{
background-color: blue;
color: white;
}
table tbody .odd{
background-color: gray;
}
table tbody .even{
background-color: white;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>DEPT.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adam</td>
<td>22</td>
<td>IT</td>
</tr>
<tr>
<td>Bob</td>
<td>32</td>
<td>IT</td>
</tr>
<tr>
<td>Carmen</td>
<td>30</td>
<td>Sales</td>
</tr>
<tr>
<td>David</td>
<td>40</td>
<td>HR</td>
</tr>
<tr>
<td>Edda</td>
<td>26</td>
<td>HR</td>
</tr>
</tbody>
</table>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
$("table tbody tr:odd").addClass('odd');
$("table tbody tr:even").addClass('even');
</script>
</body>
</html>這里提供的方法就是通過屬性來查找元素：[attribute] ：匹配含有這個屬性的元素，只要屬性存在，具體值是多少不關注。
更多匹配屬性和值的查找方法：[attribute=value] ：匹配給定的屬性是某個特定值的元素[attribute!=value] ：匹配所有不含有指定的屬性，或者屬性不等于特定值的元素。等價于 :not([attribute=value]) ，要匹配含有元素但是值不等的情況，使用 [attribute]:not([attribute=value]) 。[attribute^=value] ：匹配給定的屬性是以某些值開始的元素[attribute$=value] ：匹配給定的屬性是以某些值結尾的元素[attribute*=value] ：匹配給定的屬性是以包含某些值的元素[selector1][selector2][selectorN] ：復合屬性選擇器，需要同時滿足多個條件時使用。與的關系
通過基本的選擇器也可以查找到對象了，不過jQuery針對表單有一些更簡化的語法可以使用。如果遇到表單操作比較多的話，到時候再看看就會了。
表單對象里有兩個屬性需要了解一下：:enabled ：匹配所有可用元素，就是可編輯的元素，比如 ‘<input type="text">’:disabled ：匹配所有不可用元素，和上面相反
這里只是和表單相關，并不是只在表單中查找。另外，input標簽中，加上disabled之后，也會變成不可編輯：
<body>
<input type="text" value="我可以編輯">
<input type="text" value="我不可以編輯" disabled>
</body>之前學習js的時候，通過js方法實現了過相同的功能。這次用jQuery再來做一遍：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="button" value="全選" id="btn_chooseAll">
<input type="button" value="取消" id="btn_cancelAll">
<input type="button" value="反選" id="btn_reverse">
</div>
<div>
<table border="1">
<thead>
<tr>
<th>choice</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" title="choose the student"></td>
<td>Adam</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox" title="choose the student"></td>
<td>Bob</td>
<td>24</td>
</tr>
<tr>
<td><input type="checkbox" title="choose the student"></td>
<td>Clark</td>
<td>25</td>
</tr>
</tbody>
</table>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
$('#btn_chooseAll')[0].onclick = function () {
// :checkbox 是匹配所有復選框
// 并且這里jQuery也不用我們循環了
// prop()方法，可以獲取元素的屬性，第二個參數是給屬性賦值
$('#tb :checkbox').prop('checked', true)
};
$('#btn_cancelAll')[0].onclick = function () {
$('#tb :checkbox').prop('checked', false)
};
$('#btn_reverse')[0].onclick = function () {
// each()是jQuery遍歷的方法
$('#tb :checkbox').each(function () {
// 這里把this轉換成jQuery對象
$(this).prop('checked', !this.checked)
})
};
</script>
</body>
</html>先提前學習了解一個jQuery屬性的知識：
prop()屬性，這個是專門用來對 checked 和 seleced 做操作的（相對于另一個attr()屬性）。基本的用法是，獲取值（沒設置第二個參數），或者設置值（給第二個參數傳值）。$('#tb :checkbox').prop('checked', true) 這句，因為jQuery的方法內置了循環，所以我們直接進行操作，其實是一個批量操作。$(this).prop('checked', !this.checked) 這句，前一個this用到了jQuery的prop，所以把它轉成了jQuery對象。后一個this，直接用DOM的方法取值，所以直接用this，即DOM對象。
也叫遍歷方法或遍歷函數。
這里的篩選和上面的選擇器中的基本篩選器是不同的。所有的選擇器的代碼都是以字符串的形式寫在同一個引號里的，通過選擇器，我們可以獲取到一個（或一組）jQuery對象。這里是對已有的jQuery對象執行的方法。
在jQuery對象的基礎上再對元素進行篩選（查找、串聯），就需要這里的篩選方法。篩選方法也有參數（可選），這里的參數還是上面學習的選擇器。
常用的方法如下：
.next() ：獲得匹配元素集合中每個元素緊鄰的同輩元素。上一個
.nextAll() ：獲得匹配元素集合中每個元素之后的所有同輩元素.nextUntil() ：獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。.prev() ：獲得匹配元素集合中每個元素緊鄰的前一個同輩元素。下一個
.prevAll() ：獲得匹配元素集合中每個元素之前的所有同輩元素.prevUntil() ：獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。.parent() ：獲得當前匹配元素集合中每個元素的父元素。父親
.parents() ：獲得當前匹配元素集合中每個元素的祖先元素.parentsUntil() ：獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。.children() ：獲得匹配元素集合中每個元素的所有子元素。孩子.siblings() ：獲得匹配元素集合中所有元素的同輩元素。兄弟.find() ：獲得當前匹配元素集合中每個元素的后代。子子孫孫其他比較有用的方法：
.eq() ：將匹配元素集合縮減為位于指定索引的新元素。通過索引選擇，可以是負數倒著找。.first() ：將匹配元素集合縮減為集合中的第一個元素。第一個.last() ：將匹配元素集合縮減為集合中的最后一個元素。最后一個hasClass(class) ：檢查當前的元素是否含有某個特定的類。返回布爾值依然是之前的js，現在通過jQuery重做：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: blue;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div ></div>
<div >
<div class="item">
<div class="header">菜單1</div>
<div class="content hide">
<div>內容1-1</div>
<div>內容1-2</div>
<div>內容1-3</div>
</div>
</div>
<div class="item">
<div class="header">菜單2</div>
<div class="content hide">
<div>內容2-1</div>
<div>內容2-2</div>
<div>內容2-3</div>
</div>
</div>
<div class="item">
<div class="header">菜單3</div>
<div class="content hide">
<div>內容3-1</div>
<div>內容3-2</div>
<div>內容3-3</div>
</div>
</div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
// 綁定事件，函數作為事件方法的參數，這里用一個匿名函數
$('.header').mouseover(function () {
// 當前標簽父標簽的所有兄弟標簽的子標簽中查找'.content'的標簽
$(this).parent().siblings().children('.content').addClass('hide');
// 當前標簽的下一個標簽，移除'hide'
$(this).next().removeClass('hide')
// 上面兩行可以合并為下面的一行代碼，這叫鏈式編程
// $(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide');
})
</script>
</body>鏈式編程：上面的兩行代碼可以合并為下面的一行代碼 $(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide') 。原理是 $(this).next().removeClass('hide') 不只是操作了class屬性，它也是也返回值的（可以修改代碼把它賦值給一個變量查看變量的值）。這個返回值就是操作的jQuery對象。所以后面是在這個對象的基礎上繼續進行操作。這個叫做鏈式編程，jQuery支持鏈式編程。
下面的三個方法用來操作HTML代碼、文本或值。沒有參數是獲取值，傳入參數則是設置值：
text() - 設置或返回所選元素的文本內容html() - 設置或返回所選元素的內容（包括 HTML 標記）val() - 設置或返回表單字段的值其實是操作class，一般是通過修改class來改變樣式的，有下面3個方法：
addClass() ：向匹配的元素添加指定的類名。hasClass() ：檢查匹配的元素是否擁有指定的類。toggleClass() ：從匹配的元素中添加或刪除一個類。沒有就加上，有則刪除下面是一個簡單的開燈/關燈效果的例子，演示一下 toggleClass() 方法：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: gray;
}
.c1{
height: 48px;
width: 120px;
line-height: 48px;
text-align: center;
background-color: white;
}
.dark{
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="c1">開燈/關燈</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
$('.c1').click(function () {
$(this).toggleClass('dark')
})
</script>
</body>傳一個參數是獲取屬性值，傳兩個參數是設置屬性值：
attr() ：設置或返回匹配元素的屬性和值。自定義的屬性用這個方法removeAttr() ：從所有匹配的元素中移除指定的屬性。prop() ：設置或返回被選元素的屬性和值。單選框和復選框用這個方法，removeProp() ：移除由 prop() 方法設置的屬性。prop() 和 attr() 之間的不同：以復選框為例，attr()返回值是 ‘checked’ （而且1.x和2.x版本都有問題，例子中的值不會改變），而prop()返回值是 true 或 false。測試如下：
<body>
<p>
<input id="btn1" type="button" value="查看attr()和prop()的值">
</p>
<p>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">勾選這個復選框</label>
</body>
</p>
<p>
attr('checked')：<span id="attr1"></span>
<br>
prop('checked'):<span id="prop1"></span>
</p>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
$('#btn1').click(function () {
$('#attr1').text($('#check1').attr('checked'));
$('#prop1').text($('#check1').prop('checked'));
})
</script>直接上代碼：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.w{
width: 700px;
margin: 0 auto;
}
.menu{
height: 38px;
background-color: gray;
}
.menu .menu-item{
float: left;
line-height: 38px;
background-color: blue;
color: white;
padding: 0 10px;
cursor: pointer;
}
.menu .menu-item:hover{
background-color: orange;
color: black;
}
.active{
text-decoration: underline;
}
.content{
min-height: 100px;
background-color: darkseagreen;
color: black;
}
</style>
</head>
<body>
<div class="w">
<div class="menu">
<div class="menu-item active" target="menu1">菜單一</div>
<div class="menu-item" target="menu2">菜單二</div>
<div class="menu-item" target="menu3">菜單三</div>
</div>
<div class="content">
<div target="menu1">內容一</div>
<div class="hide" target="menu2">內容二</div>
<div class="hide" target="menu3">內容三</div>
</div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
$('.menu-item').click(function () {
// 處理菜單
$(this).addClass('active').siblings().removeClass('active');
// 處理內容，這里的參數需要字符串，得拼接一下
$('.content').children("[target='" + $(this).attr('target') + "']").removeClass('hide')
.siblings().addClass('hide');
})
</script>
</body>.index() ：獲得第一個匹配元素相對于其同胞元素的索引位置。
寫完整是這樣的 $(selector).index(element) 。前面的jQuery對象如果是多個元素，則默認獲取第一個匹配元素（即第一個元素）的索引。還可以通過為index傳入選擇器作為參數匹配到符合條件的第一個元素。
上面的例子也可以通過用index方法更簡單的來實現。不需要設置自定義屬性（例子中是target）。首先獲取到點擊的菜單（即this）的index屬性，這也是要顯示的內容在content中的索引位置。只需要替換掉上面例子中的最后一句代碼，完成的jQuery代碼如下：
<script>
$('.menu-item').click(function () {
// 處理菜單
$(this).addClass('active').siblings().removeClass('active');
// 處理內容
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
})
</script>插入的方法：
append() ：在內部的末尾追加內容prepend() ：在內部的開頭插入內容before() ：在元素的后面插入內容，外部after() ：在元素的前面插入內部，外部刪除的方法：
remove() ：包括標簽一起刪除復制的方法：
clone() ：克隆一個副本這里是通過直接修改元素的style屬性，來實現樣式的修改：css("propertyname"); ：只傳入屬性，返回css屬性的值css("propertyname","value"); ：依次傳入樣式的屬性和值，設置css屬性。css({"propertyname":"value","propertyname":"value",...}); ：傳入一個字典作為參數，一次設置多個css屬性。
點贊之后，會在邊上出現 ‘+1’ 的提示。并且提示的文字會逐漸變大、變淡、然后移動。變大通過修改字體（font-size）屬性。變淡通過修改透明度（opacity）。移動是在父標簽設置 position: relative; ，然后自己設置 position: absolute; ，然后修改 top 和 left 屬性實現上面的效果。這里要有一個定時器，定時修改上面的屬性。最后記得要清除定時器和整個新加的標簽。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
border: 1px solid black;
line-height: 200px;
}
.item{
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>贊</span>
</div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
$('.item').click(function () {
// 新建標簽，設置提示的內容
var tag = document.createElement('span');
$(tag).text('+1'); // .appendTo(this) 最后加上這些代碼，效果和下一行一樣
$(tag).css('color', 'green');
// 需要變化的屬性值，這里定義到變量里，方便后面修改
var fontSize=15, top=0, left=20, opacity=1;
// 給標簽設置初始的css屬性
$(tag).css('position', 'absolute').css('top', top+'px').css('left', left+'px');
$(tag).css('fontSize', fontSize+'px').css('opacity', opacity);
// 將標簽添加到頁面中
$(this).append(tag);
// 定時器，定時修改css屬性。這里要賦值保存，方便之后清除這個定時器
var obj = setInterval(function () {
fontSize = fontSize + 5;
top = top - 5;
left = left +5;
opacity = opacity - 0.1;
$(tag).css('top', top+'px').css('left', left+'px');
$(tag).css('fontSize', fontSize+'px').css('opacity', opacity);
// 判斷條件理論上可以設置為等于0，但是浮點運算后的結果可能會有一點點的偏差，不是正好等于0
// 用小于0 或者 小于等于0 的邏輯比較保險
if (opacity < 0){
// 清除掉定時器
clearInterval(obj);
// 標簽也要清除掉
$(tab).remove();
}
}, 100);
})
</script>
</body>
</html>滾輪的操作：
$(selector).scrollTop(offset) ：返回或設置匹配元素的滾動條的垂直位置。$(selector).scrollLeft(offset) ：返回或設置匹配元素的滾動條的水平位置。$(window) 這個對象就是操作瀏覽器窗口的滾輪。
offset 缺省時是獲取位置，傳入參數時是設置位置，要返回頂部，就設為0。
定位的操作：
offset() ：返回第一個匹配元素相對于文檔的位置。position() ：返回第一個匹配元素相對于父元素的位置。返回 top 和 left 兩個值。可以再用 .top .left 獲取到某個具體的值。
尺寸的操作：
height() ：純高度，就是css的height屬性，可以傳入參數設置高度。width() ：寬度，具體同上innerHeight() ：算上內邊距的高度innerWidth() ：寬度，具體同上outerHeight() ：算上內邊距和邊框的高度outerWidth() ：寬度，具體同上outerHeight(true) ：算上內邊距、邊框和外邊距的高度outerWidth(true) ：寬度，具體同上常用的幾種事件綁定的方式，還可以解除綁定：
$().click() ：觸發事件$().click(function) ：綁定事件$().bind('click', function) ：另外一種綁定事件的方式。和上面是一類$().unbind(‘click’) ：解除事件的綁定$().delegate(childSelector, 'click', function) ：為前面父元素下的子元素綁定事件。這種綁定方式對綁定后才創建的新的子元素一樣有效。這個叫委托，事件是委托在父元素上的。$().undelegate('click') ：解除事件的綁定$().on('click', function) ：這個是最原生的綁定方式，上面的綁定方式在內部調用的都是這個on。所以這個方法其實還有更多參數選擇。on(events,[selector],[data],fn) ：上面的兩種綁定方法（bind 和 delegate）在高版本中都被取締了，用on都可以替代。$().off('click') ：解除綁定先來看一下 <a> 標簽，點擊后頁面會跳轉。這里可以認為該標簽默認就綁定了一個事件。如果給a標簽再綁定上一個事件是什么情況呢？實測一下：
<body>
<a onclick="jump(this)" >走你</a>
<script>
function jump(obj) {
alert(obj.href);
}
</script>
</body>點擊后，會先觸發我們的事件，然后再執行頁面跳轉。這里如果給事件一個返回值，就會有不同的效果。如果返回 false 時，將中斷操作。要接收到函數的返回值，標簽中得寫成這樣 onclick="return jump(this)" 。代碼如下：
<body>
<a onclick="return jump(this)" >走你1</a>
<a id="i2" >走你2</a>
<script>
function jump(obj) {
alert(obj.href);
return false
}
document.getElementById('i2').onclick = function () {
alert(this.href);
return false
}
</script>
</body>上面的事件都會返回一個 false ，會中斷操作，不會進行之后的頁面跳轉。如果返回 true ，或者不設置返回值，則會繼續操作。上面第二個標簽中的事件綁定是在js出完成的，不用做別的額外操作，只要在綁定的函數的結尾多寫一句 return 就好了。
阻止事件發生的意義：做表單驗證的時候，如果驗證通過，則返回true，頁面跳轉。如果驗證失敗，則返回false，阻止頁面繼續跳轉：
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd" placeholder="請輸入要搜索的內容" />
<input type="submit" value="搜索" />
</form>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
$(':submit').click(function () {
if ($(this).prev().val().length > 0){
return true
} else {
alert("請輸入內容");
return false
}
})
</script>
</body>示例來做一個更加復雜的表單驗證。這次有3個input框同時需要驗證，這就需要再寫個循環。如此我們的事件里就嵌套了兩層函數，通過return false阻止事件會有問題。這里只有3個輸入框全部填入內容才能提交表單，否則會顯示錯誤信息：
<body>
<form id="f1" action="https://blog.51cto.com/steed">
<p>
<label for="username">用戶名：</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">?密碼：</label>
<input id="password" name="password" type="password">
</p>
<p>
<label for="verify">驗證碼：</label>
<input id="verify" name="verify" type="text">
</p>
<p><input type="submit" value="提交"></p>
</form>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
$(':submit').click(function () {
var flag = true; // 這個變量用于存儲下面的函數執行的錯誤結果
$('.error').remove(); // 先刪除之前一次操作添加的標簽
$('#f1').find("input[type='text'], input[type='password']").each(function () {
if($(this).val().length <= 0){
flag = false; // 如果驗證出錯，就設置為false
var tag = document.createElement('span');
tag.innerText = '必填';
tag.classList.add('error'); // 統一加個class，方便批量刪除標簽
$(tag).css({'color': 'red', 'fontSize': 12}); // 順便用jQuery的方法設置一下css
$(this).after(tag);
// 這里return false會阻止each繼續遍歷，相當于break。
// return false; // 去掉這句的注釋是另外一個效果，只提示第一個錯誤
}
});
// 這里return false才是驗證失敗。
// 但是驗證是在內層的函數里完成的，所以需要一個變量把結果傳遞出來
return flag;
})
</script>
</body>這里click事件函數內部，還要遍歷一遍所有的輸入框。內部的遍歷函數可以返回false，上面注釋掉了。
如果是內部的遍歷函數返回了false，則中斷內層的遍歷，阻止遍歷之后的輸入框。如果去掉注釋，效果是只會提示第一個錯誤信息。
要想阻止提交表單，需要在外層的click事件的函數最后返回一個false。但是這里的結果需要內層的函數來驗證。基于作用域的原理，先在外層聲明一個變量（flag），然后內層的驗證結果驗證到錯誤就把變量置為false。這樣最后就可以通過把flag作為返回值，返回整個驗證過程是否有錯誤。
就叫ready()方法，或ready()事件，一般用下面的簡寫。$(function) ：寫在這個方法里的函數，當頁面框架加載完成后就立即執行。在DOM的結構加載完后就觸發，而不是還要等css，js，圖片等都加載完成后再觸發。這是事件模塊中最重要的一個函數，因為它可以極大地提高web應用程序的響應速度。
<script>
$(function(){
// 你的代碼
})
</script>理解：
一、如果把事件綁定寫在ready方法里，那么一定是等待框架加載完畢才執行的綁定。沒有ready方法的情況，代碼是從上到下順序執行的。如果你的綁定方法寫在標簽生成之前，此時是獲取不到綁定方法后面的DOM中的標簽的。不過一般都建議把js寫在最后，也不會有這個問題。
二、等待被調用的方法，可以不用寫在ready事件里。把所有其他的 jQuery 事件和函數置于ready事件中是非常好的做法。是否寫在ready()事件里，影響的只是執行的時機。
三、不必所有的代碼都寫在一個ready事件中。可以在同一個頁面中無限次地使用ready事件。
擴展，就是定義自己的jQuery方法。這里有兩種擴展的方法：$.extend({key: function}) ：調用方法，$.key()。$.fn.extend({key: function}) ：調用方法：$().key()。前面的括號里可以寫上選擇器。
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
$.extend({
'sayHi': function () {
return 'Hi jQuery'
}
});
$.fn.extend({
"hello": function () {
return 'Hello World!'
}
});
alert($.sayHi());
alert($('body').hello());
</script>一般的做法是把擴展的方法寫在一個js文件中，然后在使用前引入。就像我們引入jQuery庫一樣，擴展的方法就是我們自己的庫。
所有引入的方法和我們自己在頁面用定義的方法是共享命名空間的。函數名（或者叫方法名）肯定是不能重復的。但是變量名可以通過自執行函數（閉包），每個擴展方法都是自己獨立的命名空間。
先寫一個自己的擴展庫，保存為js文件：
// 文件名：myJQ.js
(function () {
// 閉包解決的是變量命名空間的問題，name變量只在這個閉包中有效
var name = 'jQuery';
$.extend({
'sayHi': function () {
return 'Hi ' + name
}
});
$.fn.extend({
"hello": function () {
return 'Hello ' + name
}
});
})();上面的自執行函數，也是可以傳參數的。這里沒什么參數要傳，不過一般會把jQuery傳進去：
(function ($) {
// 這里面是你的擴展方法，在這里面，可以放心的使用$符號
})(jQuery);這樣即使外面$符號用作別的定義了，在擴展內部，$就是jQuery。
然后在頁面中就像調用其它jQuery方法一樣調用自定義的擴展函數：
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script src="myJQ.js"></script>
<script>
alert($.sayHi());
alert($().hello());
</script>順便記一下js的擴展。簡單的把函數寫到一個單獨的js文件中也是可以的。如果考慮到變量命名空間的問題，還是加個閉包：
(function () {
var name = 'Adam';
sayHi = function () {
return 'Hi ' + name
};
})();因為函數名我們需要在全局可以調用的，所以上例中的函數名是全局變量。但是如果有太多的方法，免不了和全局的名稱會有沖突。這就需要把多個方法寫到一個類中去，做成一個類庫：
// 先定義好全局的類名
if (typeof myFunc !== "object"){
myFunc = {};
}
(function () {
var name = 'Bob';
// 往類里添加方法
myFunc.hello = function () {
return 'Hello ' + name;
};
myFunc.welcom = function () {
return name + ' welcom !'
}
})();后臺管理平臺 ，編輯表格：
老師演示的簡單表格，狀態用的是下拉框：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
