JavaWeb（八）JQuery
jQuery
市場用得比較多兩個框架： jQuery 比較適合做一些網際網路 的應用（12306.com,蘑菇街，美麗說，聚美）
extjs 比較適合做後臺管理系統（電商（訂單管理），銀行，電信）
核心：
主要功能：javascript開發人員查詢元素、操作DOM、處理事件、執行動畫和開發Ajax的操作。優勢：(宗旨：write less ，do more 寫更少的程式碼，做更多的事情)
1：輕量級 （js 庫非常小）
2：強大的選擇器（獲取頁面上面的dom 元素 document.getElementById() 操作dom 必須先得到dom ）
3：出色的DOM操作的封裝
4：可靠的事件處理機制(對事件進行了一個封裝)
5：完善的Ajax（底層封裝xmlhttprequest）
6：不汙染頂級變數（在jquery 裡面只有一個物件 jQuery == $）
7:出色的瀏覽器相容性
8:鏈式操作方式($("#ddd").addClass().removeClass())
9:隱式迭代 (顯示迭代:迭代一個數組) 顯示迭代（for(var i=0;i<array.length;i++){ }） 隱身迭代遮蔽掉for 操作
10：行為層與結構層的分離 11：豐富的外掛支援 後期擴充套件非常方便 12：完善的文件
JQuery載入
從 http://jquery.com/ 下載後，複製到專案（路徑：WebContent/js）中，然後在頁面生命：
1 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>或者從CDN中引用，比如百度：
1 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>jQuery 只有一個物件 （jQuery == $） 一定要搞清楚jQuery 與dom 物件之間的區別於聯絡
dom物件：dom 物件 是瀏覽器自帶物件，dom 物件只能呼叫dom 裡面的屬性和方法， 不能呼叫jQuery 物件裡面的屬性和方法 jQuery物件：jquery 物件是通過jQuery 包裝頁面上面的元素或者dom 而產生的一個新的 物件，jquery 物件時jQuery 獨有的，不能呼叫dom 物件裡面的屬性和方法，jQuery 物件是一個數組。 jQuery 物件與dom 物件時可以相互轉換的，轉換之後它們就可以相互呼叫了
jQuery 選擇器
注意，如果獲取到多個元素將是一個數組，可以直接用陣列的屬性方法，比如 length
當前元素：
1 $(this) ：當前 HTML 元素元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
1 $("p") :選取 <p> 元素。
2 $("p.intro") :選取所有 class="intro" 的 <p> 元素。
3 $("p#demo") :選取有 id="demo" 的 <p> 元素。屬性選擇器
jQuery 使用 XPath 表示式來選擇帶有給定屬性的元素。
1 $("[href]") :選取所有帶有 href 屬性的元素。
2 $("[href='#']") :選取所有帶有 href 值等於 "#" 的元素。
3 $("[href!='#']") :選取所有帶有 href 值不等於 "#" 的元素。
4 $("[href$='.jpg']") :選取所有 href 值以 ".jpg" 結尾的元素。CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
1 把所有 p 元素的背景顏色更改為紅色：
2 $("p").css("background-color","red");jQuery選擇器一覽：
選擇器 |
例項 |
選取 |
|---|---|---|
* |
$("*") |
所有元素 |
#id |
$("#lastname") |
id="lastname" 的元素 |
.class |
$(".intro") |
所有 class="intro" 的元素 |
element |
$("p") |
所有 <p> 元素 |
.class.class |
$(".intro.demo") |
所有 class="intro" 且 class="demo" 的元素 |
:first |
$("p:first") |
第一個 <p> 元素 |
:last |
$("p:last") |
最後一個 <p> 元素 |
:even |
$("tr:even") |
所有偶數 <tr> 元素 |
:odd |
$("tr:odd") |
所有奇數 <tr> 元素 |
:eq(index) |
$("ul li:eq(3)") |
列表中的第四個元素（index 從 0 開始） |
:gt(no) |
$("ul li:gt(3)") |
列出 index 大於 3 的元素 |
:lt(no) |
$("ul li:lt(3)") |
列出 index 小於 3 的元素 |
:not(selector) |
$("input:not(:empty)") |
所有不為空的 input 元素 |
:header |
$(":header") |
所有標題元素 <h1> - <h6> |
:animated |
所有動畫元素 |
|
:contains(text) |
$(":contains('W3School')") |
包含指定字串的所有元素 |
:empty |
$(":empty") |
無子（元素）節點的所有元素 |
:hidden |
$("p:hidden") |
所有隱藏的 <p> 元素 |
:visible |
$("table:visible") |
所有可見的表格 |
s1,s2,s3 |
$("th,td,.intro") |
所有帶有匹配選擇的元素 |
[attribute] |
$("[href]") |
所有帶有 href 屬性的元素 |
[attribute=value] |
$("[href='#']") |
所有 href 屬性的值等於 "#" 的元素 |
[attribute!=value] |
$("[href!='#']") |
所有 href 屬性的值不等於 "#" 的元素 |
[attribute$=value] |
$("[href$='.jpg']") |
所有 href 屬性的值包含以 ".jpg" 結尾的元素 |
: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> 元素 |
:enabled |
$(":enabled") |
所有啟用的 input 元素 |
:disabled |
$(":disabled") |
所有禁用的 input 元素 |
:selected |
$(":selected") |
所有被選取的 input 元素 |
:checked |
$(":checked") |
所有被選中的 input 元素 |
dom 操作 (節點的查詢)
頁面上面的元素分為三種類型的節點
1：元素節點 （9 大選擇器都是用來找元素節點）
2：屬性節點 （先找到元素節點，然後呼叫attr()）
3：文字節點 (先找到元素節點然後呼叫text())
節點的建立： 元素節點的建立，屬性節點，文字節點
jQuery 當中的事件
通常會把 jQuery 程式碼放到 <head>部分的事件處理方法中：
頁面載入完畢執行：
window.onload=function(){
}
$(function(){
})
$().ready(function(){
})
區別：window.onload 與 $(function(){}) 都是用來作於介面渲染完畢之後的初始化操作..
window.onload 需要等待頁面上面所有的元素都繪製完畢之後才執行，包含圖片。
$(function(){}) 頁面上面所有的dom 元素繪製完畢之後就執行，不包含圖片。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <script src="js/jquery-3.2.1.min.js"></script>
7 <style type="text/css">
8 div{
9 width: 60px;
10 height: 60px;
11 background-color: aquamarine;
12 margin: 2px;
13 }
14 </style>
15 </head>
16 <body>
17 <div>這是1段文字</div>
18 <div>這是2段文字</div>
19 <div>這是3段文字</div>
20 </body>
21 </html>
22 <script type="text/javascript">
23 $("div").click(function(){
24 $(this).hide();//單擊隱藏該div
25 });
26 </script>jQuery 中事件方法的一些例子：
Event 函式 |
繫結函式至 |
|---|---|
$(document).ready(function) |
將函式繫結到文件的就緒事件（當文件完成載入時） |
$(selector).click(function) |
觸發或將函式繫結到被選元素的點選事件 |
$(selector).dblclick(function) |
觸發或將函式繫結到被選元素的雙擊事件 |
$(selector).focus(function) |
觸發或將函式繫結到被選元素的獲得焦點事件 |
$(selector).mouseover(function) |
觸發或將函式繫結到被選元素的滑鼠懸停事件 |
事件一覽：
方法 |
描述 |
|---|---|
bind() |
向匹配元素附加一個或更多事件處理器 |
blur() |
觸發、或將函式繫結到指定元素的 blur 事件 |
change() |
觸發、或將函式繫結到指定元素的 change 事件 |
click() |
觸發、或將函式繫結到指定元素的 click 事件 |
dblclick() |
觸發、或將函式繫結到指定元素的 double click 事件 |
delegate() |
向匹配元素的當前或未來的子元素附加一個或多個事件處理器 |
die() |
移除所有通過 live() 函式新增的事件處理程式。 |
error() |
觸發、或將函式繫結到指定元素的 error 事件 |
event.isDefaultPrevented() |
返回 event 物件上是否呼叫了 event.preventDefault()。 |
event.pageX |
相對於文件左邊緣的滑鼠位置。 |
event.pageY |
相對於文件上邊緣的滑鼠位置。 |
event.preventDefault() |
阻止事件的預設動作。 |
event.result |
包含由被指定事件觸發的事件處理器返回的最後一個值。 |
event.target |
觸發該事件的 DOM 元素。 |
event.timeStamp |
該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。 |
event.type |
描述事件的型別。 |
event.which |
指示按了哪個鍵或按鈕。 |
focus() |
觸發、或將函式繫結到指定元素的 focus 事件 |
keydown() |
觸發、或將函式繫結到指定元素的 key down 事件 |
keypress() |
觸發、或將函式繫結到指定元素的 key press 事件 |
keyup() |
觸發、或將函式繫結到指定元素的 key up 事件 |
live() |
為當前或未來的匹配元素新增一個或多個事件處理器 |
load() |
觸發、或將函式繫結到指定元素的 load 事件 |
mousedown() |
觸發、或將函式繫結到指定元素的 mouse down 事件 |
mouseenter() |
觸發、或將函式繫結到指定元素的 mouse enter 事件 |
mouseleave() |
觸發、或將函式繫結到指定元素的 mouse leave 事件 |
mousemove() |
觸發、或將函式繫結到指定元素的 mouse move 事件 |
mouseout() |
觸發、或將函式繫結到指定元素的 mouse out 事件 |
mouseover() |
觸發、或將函式繫結到指定元素的 mouse over 事件 |
mouseup() |
觸發、或將函式繫結到指定元素的 mouse up 事件 |
one() |
向匹配元素新增事件處理器。每個元素只能觸發一次該處理器。 |
ready() |
文件就緒事件（當 HTML 文件就緒可用時） |
resize() |
觸發、或將函式繫結到指定元素的 resize 事件 |
scroll() |
觸發、或將函式繫結到指定元素的 scroll 事件 |
select() |
觸發、或將函式繫結到指定元素的 select 事件 |
submit() |
觸發、或將函式繫結到指定元素的 submit 事件 |
toggle() |
繫結兩個或多個事件處理器函式，當發生輪流的 click 事件時執行。 |
trigger() |
所有匹配元素的指定事件 |
triggerHandler() |
第一個被匹配元素的指定事件 |
unbind() |
從匹配元素移除一個被新增的事件處理器 |
undelegate() |
從匹配元素移除一個被新增的事件處理器，現在或將來 |
unload() |
觸發、或將函式繫結到指定元素的 unload 事件 |
jQuery 效果函式
方法 |
描述 |
|---|---|
animate() |
對被選元素應用“自定義”的動畫 |
clearQueue() |
對被選元素移除所有排隊的函式（仍未執行的） |
delay() |
對被選元素的所有排隊函式（仍未執行）設定延遲 |
dequeue() |
執行被選元素的下一個排隊函式 |
fadeIn() |
逐漸改變被選元素的不透明度，從隱藏到可見 |
fadeOut() |
逐漸改變被選元素的不透明度，從可見到隱藏 |
fadeTo() |
把被選元素逐漸改變至給定的不透明度 |
hide() |
隱藏被選的元素 |
queue() |
顯示被選元素的排隊函式 |
show() |
顯示被選的元素 |
slideDown() |
通過調整高度來滑動顯示被選元素 |
slideToggle() |
對被選元素進行滑動隱藏和滑動顯示的切換 |
slideUp() |
通過調整高度來滑動隱藏被選元素 |
stop() |
停止在被選元素上執行動畫 |
toggle() |
對被選元素進行隱藏和顯示的切換 |
jQuery 文件操作方法
這些方法對於 XML 文件和 HTML 文件均是適用的，除了：html()。
方法 |
描述 |
|---|---|
addClass() |
向匹配的元素新增指定的類名。 |
after() |
在匹配的元素之後插入內容。 |
append() |
向匹配元素集合中的每個元素結尾插入由引數指定的內容。 |
appendTo() |
向目標結尾插入匹配元素集合中的每個元素。 |
attr() |
設定或返回匹配元素的屬性和值。 |
before() |
在每個匹配的元素之前插入內容。 |
clone() |
建立匹配元素集合的副本。 |
detach() |
從 DOM 中移除匹配元素集合。 |
empty() |
刪除匹配的元素集合中所有的子節點。 |
hasClass() |
檢查匹配的元素是否擁有指定的類。 |
html() |
設定或返回匹配的元素集合中的 HTML 內容。 |
insertAfter() |
把匹配的元素插入到另一個指定的元素集合的後面。 |
insertBefore() |
把匹配的元素插入到另一個指定的元素集合的前面。 |
prepend() |
向匹配元素集合中的每個元素開頭插入由引數指定的內容。 |
prependTo() |
向目標開頭插入匹配元素集合中的每個元素。 |
remove() |
移除所有匹配的元素。 |
removeAttr() |
從所有匹配的元素中移除指定的屬性。 |
removeClass() |
從所有匹配的元素中刪除全部或者指定的類。 |
replaceAll() |
用匹配的元素替換所有匹配到的元素。 |
replaceWith() |
用新內容替換匹配的元素。 |
text() |
設定或返回匹配元素的內容。 |
toggleClass() |
從匹配的元素中新增或刪除一個類。 |
unwrap() |
移除並替換指定元素的父元素。 |
val() |
設定或返回匹配元素的值。 |
wrap() |
把匹配的元素用指定的內容或元素包裹起來。 |
wrapAll() |
把所有匹配的元素用指定的內容或元素包裹起來。 |
wrapinner() |
將每一個匹配的元素的子內容用指定的內容或元素包裹起來。 |
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <script src="js/jquery-3.2.1.min.js"></script>
7 <style type="text/css">
8 div{
9 width: 60px;
10 height: 60px;
11 background-color: aquamarine;
12 margin: 2px;
13 }
14 </style>
15 <script>
16 $(document).ready(function(){
17 $("#btn1").click(function(){
18 $("p").append(" <b>追加的文字</b>.");
19 });
20
21 $("#btn2").click(function(){
22 $("ol").append("<li>追加的list</li>");
23 });
24 });
25 </script>
26 </head>
27 <body>
28 <p>這是一個段落</p>
29 <p>這是一個段落</p>
30 <ol>
31 <li>List1</li>
32 <li>List2</li>
33 <li>List3</li>
34 </ol>
35 <button id="btn1">追加文字</button>
36 <button id="btn2">追加列表項</button>
37 </body>
38 </html>jQuery CSS 操作函式
下面列出的這些方法設定或返回元素的 CSS 相關屬性。
CSS 屬性 |
描述 |
|---|---|
css() |
設定或返回匹配元素的樣式屬性。 |
height() |
設定或返回匹配元素的高度。 |
offset() |
返回第一個匹配元素相對於文件的位置。 |
offsetParent() |
返回最近的定位祖先元素。 |
position() |
返回第一個匹配元素相對於父元素的位置。 |
scrollLeft() |
設定或返回匹配元素相對滾動條左側的偏移。 |
scrollTop() |
設定或返回匹配元素相對滾動條頂部的偏移。 |
width() |
設定或返回匹配元素的寬度。 |
1<!DOCTYPE html> 1 <html>
2 <head>
3 <script type="text/javascript" src="/jquery/jquery.js"></script>
4 <script type="text/javascript">
5 $(document).ready(function(){
6 $("button").click(function(){
7 $("p").css("background-color","red");
8 });
9 });
10 </script>
11 </head>
12
13 <body>
14 <h2>This is a heading</h2>
15 <p>This is a paragraph.</p>
16 <p>This is another paragraph.</p>
17 <button type="button">Click me</button>
18 </body>
19
20 </html> 2 <html>
3 <head>
4 <script src="/jquery/jquery-1.11.1.min.js"></script>
5 <script>
6 $(document).ready(function(){
7 $("button").click(function(){
8 alert("Background color = " + $("p").css("background-color"));
9 });
10 });
11 </script>
12 </head>
13
14 <body>
15 <h2>這是標題</h2>
16 <p style="background-color:#ff0000">這是一個段落。</p>
17 <p style="background-color:#00ff00">這是一個段落。</p>
18 <p style="background-color:#0000ff">這是一個段落。</p>
19 <button>返回 p 元素的背景色</button>
20 </body>
21 </html>jQuery 遍歷函式
jQuery 遍歷函式包括了用於篩選、查詢和串聯元素的方法。
函式 |
描述 |
|---|---|
.add() |
將元素新增到匹配元素的集合中。 |
.andSelf() |
把堆疊中之前的元素集新增到當前集合中。 |
.children() |
獲得匹配元素集合中每個元素的所有子元素。 |
.closest() |
從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素。 |
.contents() |
獲得匹配元素集合中每個元素的子元素，包括文字和註釋節點。 |
.each() |
對 jQuery 物件進行迭代，為每個匹配元素執行函式。 |
.end() |
結束當前鏈中最近的一次篩選操作，並將匹配元素集合返回到前一次的狀態。 |
.eq() |
將匹配元素集合縮減為位於指定索引的新元素。 |
.filter() |
將匹配元素集合縮減為匹配選擇器或匹配函式返回值的新元素。 |
.find() |
獲得當前匹配元素集合中每個元素的後代，由選擇器進行篩選。 |
.first() |
將匹配元素集合縮減為集合中的第一個元素。 |
.has() |
將匹配元素集合縮減為包含特定元素的後代的集合。 |
.is() |
根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。 |
.last() |
將匹配元素集合縮減為集合中的最後一個元素。 |
.map() |
把當前匹配集合中的每個元素傳遞給函式，產生包含返回值的新 jQuery 物件。 |
.next() |
獲得匹配元素集合中每個元素緊鄰的同輩元素。 |
.nextAll() |
獲得匹配元素集合中每個元素之後的所有同輩元素，由選擇器進行篩選（可選）。 |
.nextUntil() |
獲得每個元素之後所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
.not() |
從匹配元素集合中刪除元素。 |
.offsetParent() |
獲得用於定位的第一個父元素。 |
.parent() |
獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。 |
.parents() |
獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。 |
.parentsUntil() |
獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。 |
.prev() |
獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。 |
.prevAll() |
獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。 |
.prevUntil() |
獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
.siblings() |
獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。 |
.slice() |
將匹配元素集合縮減為指定範圍的子集。 |
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 .ancestors *
6 {
7 display: block;
8 border: 2px solid lightgrey;
9 color: lightgrey;
10 padding: 5px;
11 margin: 15px;
12 }
13 </style>
14 <script src="/jquery/jquery-1.11.1.min.js">
15 </script>
16 <script>
17 $(document).ready(function(){
18 $("span").parent().css({"color":"red","border":"2px solid red"});
19 });
20 </script>
21 </head>
22 <body>
23
24 <div class="ancestors">
25 <div style="width:500px;">div (曾祖父)
26 <ul>ul (祖父)
27 <li>li (直接父)
28 <span>span</span>
29 </li>
30 </ul>
31 </div>
32
33 <div style="width:500px;">div (祖父)
34 <p>p (直接父)
35 <span>span</span>
36 </p>
37 </div>
38 </div>
39
40 </body>
41 </html>