jQuery初學者筆記 一
Mirror王宇陽 by
jQuery語法
jQuery語法是通過選取HTML元素，並對選取的元素進行操作
基礎語法：
所有jQuery語句用“$”符號開始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>點擊消失</p>
<p>點擊消失</p>
<script src="jq/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){ //固定的jQ開頭
$("p").click(function(){ // 選取p標簽，並綁定clisk事件
$(this).hide(); //事件觸發使用hide()方法（隱藏當前標簽屬性）
})
})
</script>
</body>
</html>
jQuery函數位於一個document ready函數中，我們需要在js中加載該函數文檔
// jQuery入口函數
$(document).ready(function(){
//jQuery代碼
});
/*******************************/
$(function(){
//jQuery代碼
});
選擇器語法:
jQuery的選擇器語法格式和CSS的調用方法一樣的哦！
選擇器允許基於元素的id、class、type、屬性、屬性值等選擇方法來找到指定的HTML元素
-
元素選擇器
$("p"); //選取p標簽元素 -
id選擇器
$("#demo"); // 選取id='demo'的元素 -
.class選擇器
$(".demo"); // 選取class='demo'的元素 -
所有元素
$("*"); // 選取全部元素
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 事件 |
過濾選擇器
基本標簽層次過濾器
-
:first/:last
:first:選取第一個元素:last:選取最后一個元素 -
:not(*):去除選擇器給定的元素
-
:even/:odd
:even:偶數索引的標簽
:odd:奇數索引的標簽
-
:eq()/:gt()/:lt()
eq():選取指定索引的元素
ge():選取大於指定索引的元素
lt():選取小於指定索引的元素
-
:focus 選取所有失去焦點的元素
-
:header 選取所有標題元素（h1\h2\h3……）
-
:animated 匹配所有正在執行動畫操作的元素
-
實例：
$(document).ready(function(){
$("div:lt(4)").addClass("myClass");// 除最后三個元素以外添加myClass
$("div:not(.green,.gray)").addClass("myClass"); //除了green和gay以外的元素添加myClass
$("div:gt(3)").addClass("myClass");//給最后三個元素添加myClass
$("div:even").addClass("myClass");//偶數索引添加myClass
$("div:odd").addClass("myClass");// 奇數索引添加沒有Class
$("div:eq(3)").addClass("myClass");//給指定索引添加myClass
$("div:first").addClass("myClass");//第一個標簽
$("div:last").addClass("myClass");//最后一個標簽
});
內容過濾選擇器
- :contains(text) 選取包含text文本內容的元素；區分大小寫
- :empty 選取不含子元素或者文本節點的空元素
- :has(selector) 選取含有選擇器所匹配的元素的元素
- :parent 選取含有子元素或文本節點的元素
屬性過濾選擇器
- [attribute] 選取擁有此屬性的元素
- [attribute = value] 選取此屬性值為value的所有元素
- [attribute != value] 選取此屬性值不為value的所有元素
- [attribute ^= value] 選取此屬性值為value開始的所有元素
- [attribute $= value] 選取此屬性值為value結束的所有元素
- [attribute *= value] 選取屬性值包含value的所有元素
表單過濾選擇器
表單屬性過濾選擇器
jQuery效果
隱藏和顯示 (hide/show)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hide()/show()</title>
</head>
<body>
<div id="demo">
<input type="button" id="hide" value="隱藏" />
<input type="button" id="show" value="顯示" />
<div id="a1" style=
"color: #000;
background-color: #66FF66;
width: 100px;
height: 100px;
margin-top: 20px;
text-align: center;">
演示塊
</div>
</div>
<script src="jq/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#hide").click(function(){
// 隱藏
$("#a1").hide();
})
$("#show").click(function(){
//顯示
$("#a1").show();
})
})
</script>
</body>
</html>
<!-- hide/show()語法原型
$().hide(speed,callback);
$().show(speed,callback);
speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
callback:完成執行后調用的函數名稱
-->
toggle():開關
$("#toggle").click(function(){
// toggle開關
$("#a1").toggle();
});
<!--
speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
callback:完成執行后調用的函數名稱
-->
淡入淡出
fadeIn():淡入已隱藏的元素
- 語法
$().fadeIn(speed,callback);
<!--
speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
callback:完成執行后調用的函數名稱
-->
fadeOut():淡出可見的元素
- 語法
$().fadeOut(speed,callback);
<!--
speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
callback:完成執行后調用的函數名稱
-->
fadeToggle()：淡入/出 已隱藏的/可見的元素
- 語法
$().fadeToggle(speed,callback);
<!-- speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
callback:完成執行后調用的函數名稱
-->
fadeTo()：允許漸變為給定的不透明度（值介於 0 與 1 之間）
- 語法 ：該方法嚴格的說只是將原本100%透明的隱藏給設置了不透明度來利用
$().fadeTo(speed,opacity,callback);
<!-- speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
opacity:設置給定的不透明度（0~1）
callback:完成執行后調用的函數名稱
-->
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fadeIn()|fadeOut()|fadeToggle()|fadeTo()</title>
<script src="jq/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="demo">
<input type="button" id="fadeIn" value="fadeIn" />
<input type="button" id="fadeOut" value="fadeOut" />
<input type="button" id="fadeToggle" value="fadeToggle" />
<input type="button" id="fadeTo" value="fadeTo" />
<br>
<div id="a1" style="
background-color: #5555FF;
width: 300px;
height: 100px;
margin-top: 20px;
">
</div>
<div id="info" style="display: none;">
已隱藏
</div>
</div>
<script>
function info(){
$("#info").toggle();
}
$(function(){
$("#fadeIn").click(function(){
$("#a1").fadeIn("slow",info());
// slow:慢速的
// fast:快速的
});
$("#fadeOut").click(function(){
$("#a1").fadeOut("slow",info());
});
$("#fadeToggle").click(function(){
$("#a1").fadeToggle("slow",info());
})
$("#fadeTo").click(function(){
// 設置隱藏不透明度(通俗的講就是顏色變淡並不是完全淡出)
$("#a1").fadeTo("slow",0.5);
})
})
</script>
</body>
</html>
滑動
slideDown():向下滑動元素
- 語法
$().slideDown(speed,callback);
<!--
speed:slow\fast\毫秒值
callback:完成動作后執行的函數名稱
-->
slideUp():向上滑動元素
- 語法
$().slideUp(speed,callback);
<!--
speed:slow\fast\毫秒值
callback:完成動作后執行的函數名稱
-->
slideToggle():上/下 切換滑動元素
$().slideToggle(speed,callback);
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slideDown()|slideUp()|slideToggle()</title>
<script src="jq/jquery-3.4.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#Down,#Up,#Toggle{
width: 60px;
height: 20px;
color: #000000;
font-size: 10px;
text-align: center;
float: left;
cursor: pointer;
}
#Down{background-color: #5555FF;}
#Toggle{background-color: #FCFF9F;}
#Up{background-color: #66FF66;}
#slide{
clear: both;
background-color: #CCCCCC;
width: 180px;
height: 100px;
border-top: #FF0000;
text-align: center;
position: relative;
}
#demo{margin: 10px 0px 0px 10px;}
</style>
</head>
<body>
<div id="demo">
<div id="Down">向下滑動</div>
<div id="Toggle">滑動切換</div>
<div id="Up">向上滑動</div>
<div id="slide">
</div>
</div>
<script>
$(function(){
$("#Down").click(function(){
$("#slide").slideDown();
})
$("#Up").click(function(){
$("#slide").slideUp();
})
$("#Toggle").click(function(){
$("#slide").slideToggle();
})
})
</script>
</body>
</html>
動畫
animate():創建自定義動畫
- 語法
$().animate({css},speed,callback);
<!--
{css}:定義動畫的css屬性
（支持多個同時、支持相對值[+=/-=]、支持hide,toggle…等預定義值）
支持‘隊列’式的動畫（即多個animate()組成一串（隊列）動畫）
speed:slow/fast/毫秒值
callback:執行完成調用函數
-->
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animate()動畫</title>
<script src="jq/jquery-3.4.1.min.js"></script>
<style type="text/css">
#demo{
margin: 10px;
width: 100px;
height: 100px;
background-color: #5555FF;
position: relative;
}
</style>
</head>
<body>
<div id="demo">
</div>
<script>
$(function(){
$("#demo").animate({
left:'300px',
width:'+=150px',
height:'+=150px',
// 支持多個樣式的組合的動畫
// 支持相對值
},2000);//支持延遲
$("#demo").animate({left:'10px',width:'-=100px',height:'-=100px'});
$("#demo").click(function(){
$("#demo").animate({top:'100px'},1000);
$("#demo").animate({left:'100px'},1000);
$("#demo").animate({top:'0px'});
$("#demo").animate({left:'0px'});
// 支持隊列組合的動畫動作
})
})
</script>
</body>
</html>
- 停止動畫或效果：
- 語法
$().stop(stopAll,goToEnd);
<!--
stopAll:是否清除動畫隊列 默認false
goToEnd:是否立即停止動畫 默認false
默認情況下，stop()會清除被選中的元素的當前動畫
-->
Callback()
- 當前動畫 100% 完成之后執行
jQuery DOM
獲取/設置內容
- text() 設置/返回所選元素的文本內容[原型：innerhtml]
- html() 設置/返回所選元素的內容（含HTML標簽）
- val() 設置/樊湖表單字段的value
獲取/設置屬性
- attr() 設置/返回所選元素的屬性內容（支持多個屬性設置，返回數組）
添加元素
- append() 尾部插入元素
- prepend() 開頭插入元素
- after() 被選元素后插入元素
- before() 被選元素前插入元素
刪除元素
- remove() 刪除被選元素和子元素
- 接受一個參數，過濾被刪除的元素（即指定刪除）
- removeClass() 刪除元素的class加載
- empty() 刪除被選元素的子元素
jQuery CSS 獲取/設置
- addClass() 向被選元素添加一個或多個Class類
- removerClass() 從被選元素中刪除指定的一個或多個Class類
- toggleClass() 對被選元素的add/remove進行切換式的操作
- css() 設置/獲取被選元素的Class屬性
- css("classname","value") 單個
- css("classname":"value",……) 多個
jQuery 尺寸設置
- width()/height() 設置/返回元素的寬度/高度（content;不包括內邊距、邊框、外邊距）
- innerWidth()/innerHeight() 設置/返回元素的寬度/高度（Content+Padding；不包括邊框、外邊距）
- outerWidth()/outerHeight() 設置/返回元素的寬度/高度（Content+Padding+Border；不包括外邊距）
jQuery 遍歷
向上遍歷DOM樹
- parent() 返回自己的直接父類元素
- parents() 返回自己的所有直系類元素（直至根元素）
- parentsUntil() 返回兩種直接的所有直系類元素（不包含）
// parents(*)/parentsUntil(*):兩個方法在這里均可選一個參數接收
向下遍歷DOM樹
- children() 返回被選元素的所有直接子元素(支持過濾參數)
- find() 返回被選元素的后代元素(支持過濾參數，指定標簽、類名、id、name等)
水平遍歷DOM樹
-
siblings() 返回被選元素的所有同級元素(支持過濾參數)
-
next() 返回被選元素的下一個同級元素
-
nextAll() 返回被選元素之后的所有同級元素
-
nextUntil() 返回被選元素與參數之間的所有同級元素
-
prev() 返回被選元素的上一個同級元素
-
prevAll() 返回被選元素之前的所有同級元素
-
prevUntil() 返回被選元素與參數之間的所有同級元素
遍歷 過濾
- first() 返回被選元素的首個子元素
- last() 返回被選元素的最后子元素
- eq() 返回被選元素中帶有指定索引的元素(可選參數，指定索引)
- filter()返回可匹配的所有元素
- not() 返回不匹配的所有元素
jQuery AJAX
AJAX
-
AJAX = 異步JavaScript + XML
在不重載網頁的情況下，后台加載數據並顯示在頁面上
AJAX load()
- load() 從服務器加載數據，並返回數據
常常利用：調用一個重復的代碼塊，例如網頁的導航、版本塊等……
由此可以大大的減少代碼量的編寫工作，模塊化的團隊開發應該常用
- 語法
$().load(URL,data,callback);
<!--
URL:加載的數據文件位置uRL
data:與URL加載請求一起發送的字符串鍵/值對集合
callback:執行完畢后調用的函數
- responseTxt : 調用成功的結果
- statusTXT : 調用的狀態
- xhr : XMLHttpRequest對象
-->
AJAX GET()
- $.get() 從指定的資源請求數據
- 語法
$.get(URL , callback);
<!--
URL:加載的uRL
callback:執行完畢后調用的函數
-->
- 實例
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("數據: " + data + "\n狀態: " + status);
});
});
AJAX POST()
- $.post() 使用 POST 請求向服務器提交數據