Day01
簡介
- 百度百科查jQuery
- 官網(wǎng)
- 下載地址
- 壓縮版
- 非壓縮版
- 中文文檔
- 引用操作
<script type="text/javascript" src="jQuery的地址"></script> - 優(yōu)化原則
- 將CSS文件在頁面的頭部
<head></head>引入 - 將JS文件在頁面的尾部
</body>之前引入
- 將CSS文件在頁面的頭部
- 學習路線
- 選擇器
- DOM(Document Object Model)操作
- 常用函數(shù)
- 事件
- 動畫
- ajax
- jQuery插件
基本語法
基本語法
jQuery(選擇器).動作();
$(selector).action();
例如:
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有段落
$("p .test").hide() - 隱藏所有 class="test" 的段落
$("#test").hide() - 隱藏所有 id="test" 的元素
文檔就緒模式
<script type="text/javascript">
jQuery(document).ready(function () {
console.log($());
});
$(document).ready(function () {
console.log($());
});
$(function () {
console.log($());
});
</script>
選擇器
$('*').css('color', 'red');
//多個屬性選擇器: 復合
<a href="#target" data-toggle="dropdown">目標</a>
<a href="#target">輔助驗證</a>
$('[href="#target"][data-toggle="dropdown"]').css('color', 'red');
| 選擇器 | 實例 | 選取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | class="intro" 的所有元素 |
| .class,.class | $(".intro,.demo") | class 為 "intro" 或 "demo" 的所有元素 |
| element | $("p") | 所有 <p> 元素 |
| el1,el2,el3 | $("h1,div,p") | 所有 <h1>、<div> 和 <p> 元素 |
| :first | $("p:first") | 第一個 <p> 元素 |
| :last | $("p:last") | 最后一個 <p> 元素 |
| :even | $("tr:even") | 所有偶數(shù) <tr> 元素 |
| :odd | $("tr:odd") | 所有奇數(shù) <tr> 元素 |
| :first-child | $("p:first-child") | 屬于其父元素的第一個子元素的所有 <p> 元素 |
| :first-of-type | $("p:first-of-type") | 屬于其父元素的第一個 <p> 元素的所有 <p> 元素 |
| :last-child | $("p:last-child") | 屬于其父元素的最后一個子元素的所有 <p> 元素 |
| :last-of-type | $("p:last-of-type") | 屬于其父元素的最后一個 <p> 元素的所有 <p> 元素 |
| :nth-child(n) | $("p:nth-child(2)") | 屬于其父元素的第二個子元素的所有 <p> 元素 |
| :nth-last-child(n) | $("p:nth-last-child(2)") | 屬于其父元素的第二個子元素的所有 <p> 元素，從最后一個子元素開始計數(shù) |
| :nth-of-type(n) | $("p:nth-of-type(2)") | 屬于其父元素的第二個 <p> 元素的所有 <p> 元素 |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") | 屬于其父元素的第二個 <p> 元素的所有 <p> 元素丑孩，從最后一個子元素開始計數(shù) |
| :only-child | $("p:only-child") | 屬于其父元素的唯一子元素的所有 <p> 元素 |
| :only-of-type | $("p:only-of-type") | 屬于其父元素的特定類型的唯一子元素的所有 <p> 元素 |
| parent > child | $("div > p") |
<div> 元素的直接子元素的所有 <p> 元素 |
| parent descendant | $("div p") |
<div> 元素的后代的所有 <p> 元素 |
| element + next | $("div + p") | 每個 <div> 元素相鄰的下一個 <p> 元素 |
| element ~ siblings | $("div ~ p") |
<div> 元素同級的所有 <p> 元素 |
| :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)") | 所有不為空的輸入元素 |
| :header | $(":header") | 所有標題元素 <h1>, <h2> ... |
| :animated | $(":animated") | 所有動畫元素 |
| :focus | $(":focus") | 當前具有焦點的元素 |
| :contains(text) | $(":contains('Hello')") | 所有包含文本 "Hello" 的元素 |
| :has(selector) | $("div:has(p)") | 所有包含有 <p> 元素在其內(nèi)的 <div> 元素 |
| :empty | $(":empty") | 所有空元素 |
| :parent | $(":parent") | 選擇所有含有子元素或者文本的父級元素。 |
| :hidden | $("p:hidden") | 所有隱藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可見的表格 |
| :root | $(":root") | 文檔的根元素 |
| :lang(language) | $("p:lang(de)") | 所有帶有以 "de" 開頭的 lang 屬性值的 <p> 元素 |
| [attribute] | $("[href]") | 所有帶有 href 屬性的元素 |
| [attribute=value] | $("[href='default.htm']") | 所有帶有 href 屬性且值等于 "default.htm" 的元素 |
| [attribute!=value] | $("[href!='default.htm']") | 所有帶有 href 屬性且值不等于 "default.htm" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有帶有 href 屬性且值以 ".jpg" 結(jié)尾的元素 |
| [attribute|=value] | $("[title|='Tomorrow']") | 所有帶有 title 屬性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟連接符作為開頭的字符串 |
| [attribute^=value] | $("[title^='Tom']") | 所有帶有 title 屬性且值以 "Tom" 開頭的元素 |
| [attribute~=value] | $("[title~='hello']") | 所有帶有 title 屬性且值包含單詞 "hello" 的元素 |
| [attribute*=value] | $("[title*='hello']") | 所有帶有 title 屬性且值包含字符串 "hello" 的元素 |
| :input | $(":input") | 所有 input 元素 |
| :text | $(":text") | 所有帶有 type="text" 的 input 元素 |
| :password | $(":password") | 所有帶有 type="password" 的 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方法
<input type="checkbox" name="class[]" value="1"> PHP<br>
<input type="checkbox" name="class[]" value="2" checked="checked"> MySQL
<script type="text/javascript" src="../../jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
// 就緒函數(shù)
$(function(){
// 使用 attr 方法獲取 checked 屬性
console.log($('input:first').attr('checked')); //undefined
console.log($('input:last').attr('checked')); //checked
// 使用 prop 方法獲取 checked 屬性
console.log($('input:first').prop('checked')); //false
console.log($('input:last').prop('checked')); //true
});
</script>
image
| 方法 | 描述 |
|---|---|
| addClass() | 向被選元素添加一個或多個類名 |
| after() | 在被選元素后插入內(nèi)容 |
| append() | 在被選元素的結(jié)尾插入內(nèi)容 |
| appendTo() | 在被選元素的結(jié)尾插入 HTML 元素 |
| attr() | 設(shè)置或返回被選元素的屬性/值 |
| before() | 在被選元素前插入內(nèi)容 |
| clone() | 生成被選元素的副本 |
| css() | 為被選元素設(shè)置或返回一個或多個樣式屬性 |
| detach() | 移除被選元素（保留數(shù)據(jù)和事件） |
| empty() | 從被選元素移除所有子節(jié)點和內(nèi)容 |
| hasClass() | 檢查被選元素是否包含指定的 class 名稱 |
| height() | 設(shè)置或返回被選元素的高度 |
| html() | 設(shè)置或返回被選元素的內(nèi)容 |
| innerHeight() | 返回元素的高度（包含 padding李皇，不包含 border） |
| innerWidth() | 返回元素的寬度（包含 padding，不包含 border） |
| insertAfter() | 在被選元素后插入 HTML 元素 |
| insertBefore() | 在被選元素前插入 HTML 元素 |
| offset() | 設(shè)置或返回被選元素的偏移坐標（相對于文檔） |
| offsetParent() | 返回第一個定位的祖先元素 |
| outerHeight() | 返回元素的高度（包含 padding 和 border） |
| outerWidth() | 返回元素的寬度（包含 padding 和 border） |
| position() | 返回元素的位置（相對于父元素） |
| prepend() | 在被選元素的開頭插入內(nèi)容 |
| prependTo() | 在被選元素的開頭插入 HTML 元素 |
| prop() | 設(shè)置或返回被選元素的屬性/值 |
| remove() | 移除被選元素（包含數(shù)據(jù)和事件） |
| removeAttr() | 從被選元素移除一個或多個屬性 |
| removeClass() | 從被選元素移除一個或多個類 |
| removeProp() | 移除通過 prop() 方法設(shè)置的屬性 |
| replaceAll() | 把被選元素替換為新的 HTML 元素 |
| replaceWith() | 把被選元素替換為新的內(nèi)容 |
| scrollLeft() | 設(shè)置或返回被選元素的水平滾動條位置 |
| scrollTop() | 設(shè)置或返回被選元素的垂直滾動條位置 |
| text() | 設(shè)置或返回被選元素的文本內(nèi)容 |
| toggleClass() | 在被選元素中添加/移除一個或多個類之間切換 |
| unwrap() | 移除被選元素的父元素 |
| val() | 設(shè)置或返回被選元素的屬性值（針對表單元素） |
| width() | 設(shè)置或返回被選元素的寬度 |
| wrap() | 在每個被選元素的周圍用 HTML 元素包裹起來 |
| wrapAll() | 在所有被選元素的周圍用 HTML 元素包裹起來 |
| wrapInner() | 在每個被選元素的內(nèi)容周圍用 HTML 元素包裹起來 |
節(jié)點遍歷
| 方法 | 描述 |
|---|---|
| add() | 把元素添加到匹配元素的集合中 |
| addBack() | 把之前的元素集添加到當前集合中 |
| andSelf() | 在版本 1.8 中被廢棄座云。addBack() 的別名 |
| children() | 返回被選元素的所有直接子元素 |
| closest() | 返回被選元素的第一個祖先元素 |
| contents() | 返回被選元素的所有直接子元素（包含文本和注釋節(jié)點） |
| each() | 為每個匹配元素執(zhí)行函數(shù) |
| end() | 結(jié)束當前鏈中最近的一次篩選操作疙赠，并把匹配元素集合返回到前一次的狀態(tài) |
| eq() | 返回帶有被選元素的指定索引號的元素 |
| filter() | 把匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素 |
| find() | 返回被選元素的后代元素 |
| first() | 返回被選元素的第一個元素 |
| has() | 返回擁有一個或多個元素在其內(nèi)的所有元素 |
| is() | 根據(jù)選擇器/元素/jQuery 對象檢查匹配元素集合，如果存在至少一個匹配元素朦拖，則返回 true |
| last() | 返回被選元素的最后一個元素 |
| map() | 把當前匹配集合中的每個元素傳遞給函數(shù)圃阳，產(chǎn)生包含返回值的新 jQuery 對象 |
| next() | 返回被選元素的后一個同級元素 |
| nextAll() | 返回被選元素之后的所有同級元素 |
| nextUntil() | 返回介于兩個給定參數(shù)之間的每個元素之后的所有同級元素 |
| not() | 從匹配元素集合中移除元素 |
| offsetParent() | 返回第一個定位的父元素 |
| parent() | 返回被選元素的直接父元素 |
| parents() | 返回被選元素的所有祖先元素 |
| parentsUntil() | 返回介于兩個給定參數(shù)之間的所有祖先元素 |
| prev() | 返回被選元素的前一個同級元素 |
| prevAll() | 返回被選元素之前的所有同級元素 |
| prevUntil() | 返回介于兩個給定參數(shù)之間的每個元素之前的所有同級元素 |
| siblings() | 返回被選元素的所有同級元素 Returns all sibling elements of the selected element |
| slice() | 把匹配元素集合縮減為指定范圍的子集 |
動畫效果
| 方法 | 描述 |
|---|---|
| animate() | 對被選元素應(yīng)用"自定義"的動畫 |
| clearQueue() | 對被選元素移除所有排隊函數(shù)（仍未運行的） |
| delay() | 對被選元素的所有排隊函數(shù)（仍未運行）設(shè)置延遲 |
| dequeue() | 移除下一個排隊函數(shù)，然后執(zhí)行函數(shù) |
| fadeIn() | 逐漸改變被選元素的不透明度璧帝，從隱藏到可見 |
| fadeOut() | 逐漸改變被選元素的不透明度捍岳，從可見到隱藏 |
| fadeTo() | 把被選元素逐漸改變至給定的不透明度 |
| fadeToggle() | 在 fadeIn() 和 fadeOut() 方法之間進行切換 |
| finish() | 對被選元素停止、移除并完成所有排隊動畫 |
| hide() | 隱藏被選元素 |
| queue() | 顯示被選元素的排隊函數(shù) |
| show() | 顯示被選元素 |
| slideDown() | 通過調(diào)整高度來滑動顯示被選元素 |
| slideToggle() | slideUp() 和 slideDown() 方法之間的切換 |
| slideUp() | 通過調(diào)整高度來滑動隱藏被選元素 |
| stop() | 停止被選元素上當前正在運行的動畫 |
| toggle() | hide() 和 show() 方法之間的切換 |
事件方法
| 方法 | 描述 |
|---|---|
| bind() | 向元素添加事件處理程序 |
| blur() | 添加/觸發(fā) blur 事件 |
| change() | 添加/觸發(fā) change 事件 |
| click() | 添加/觸發(fā) click 事件 |
| dblclick() | 添加/觸發(fā) double click 事件 |
| delegate() | 向匹配元素的當前或未來的子元素添加處理程序 |
| die() | 在版本 1.9 中被移除睬隶。移除所有通過 live() 方法添加的事件處理程序 |
| error() | 在版本 1.8 中被廢棄锣夹。添加/觸發(fā) error 事件 |
| event.currentTarget | 在事件冒泡階段內(nèi)的當前 DOM 元素 |
| event.data | 包含當前執(zhí)行的處理程序被綁定時傳遞到事件方法的可選數(shù)據(jù) |
| event.delegateTarget | 返回當前調(diào)用的 jQuery 事件處理程序所添加的元素 |
| event.isDefaultPrevented() | 返回指定的 event 對象上是否調(diào)用了 event.preventDefault() |
| event.isImmediatePropagationStopped() | 返回指定的 event 對象上是否調(diào)用了 event.stopImmediatePropagation() |
| event.isPropagationStopped() | 返回指定的 event 對象上是否調(diào)用了 event.stopPropagation() |
| event.namespace | 返回當事件被觸發(fā)時指定的命名空間 |
| event.pageX | 返回相對于文檔左邊緣的鼠標位置 |
| event.pageY | 返回相對于文檔上邊緣的鼠標位置 |
| event.preventDefault() | 阻止事件的默認行為 |
| event.relatedTarget | 返回當鼠標移動時哪個元素進入或退出 |
| event.result | 包含由被指定事件觸發(fā)的事件處理程序返回的最后一個值 |
| event.stopImmediatePropagation() | 阻止其他事件處理程序被調(diào)用 |
| event.stopPropagation() | 阻止事件向上冒泡到 DOM 樹，阻止任何父處理程序被事件通知 |
| event.target | 返回哪個 DOM 元素觸發(fā)事件 |
| event.timeStamp | 返回從 1970 年 1 月 1 日到事件被觸發(fā)時的毫秒數(shù) |
| event.type | 返回哪種事件類型被觸發(fā) |
| event.which | 返回指定事件上哪個鍵盤鍵或鼠標按鈕被按下 |
| focus() | 添加/觸發(fā) focus 事件 |
| focusin() | 添加事件處理程序到 focusin 事件 |
| focusout() | 添加事件處理程序到 focusout 事件 |
| hover() | 添加兩個事件處理程序到 hover 事件 |
| keydown() | 添加/觸發(fā) keydown 事件 |
| keypress() | 添加/觸發(fā) keypress 事件 |
| keyup() | 添加/觸發(fā) keyup 事件 |
| live() | 在版本 1.9 中被移除苏潜。添加一個或多個事件處理程序到當前或未來的被選元素 |
| load() | 在版本 1.8 中被廢棄银萍。添加一個事件處理程序到 load 事件 |
| mousedown() | 添加/觸發(fā) mousedown 事件 |
| mouseenter() | 添加/觸發(fā) mouseenter 事件 |
| mouseleave() | 添加/觸發(fā) mouseleave 事件 |
| mousemove() | 添加/觸發(fā) mousemove 事件 |
| mouseout() | 添加/觸發(fā) mouseout 事件 |
| mouseover() | 添加/觸發(fā) mouseover 事件 |
| mouseup() | 添加/觸發(fā) mouseup 事件 |
| off() | 移除通過 on() 方法添加的事件處理程序 |
| on() | 向元素添加事件處理程序 |
| one() | 向被選元素添加一個或多個事件處理程序。該處理程序只能被每個元素觸發(fā)一次 |
| $.proxy() | 接受一個已有的函數(shù)恤左，并返回一個帶特定上下文的新的函數(shù) |
| ready() | 規(guī)定當 DOM 完全加載時要執(zhí)行的函數(shù) |
| resize() | 添加/觸發(fā) resize 事件 |
| scroll() | 添加/觸發(fā) scroll 事件 |
| select() | 添加/觸發(fā) select 事件 |
| submit() | 添加/觸發(fā) submit 事件 |
| toggle() | 在版本 1.9 中被移除贴唇。添加 click 事件之間要切換的兩個或多個函數(shù) |
| trigger() | 觸發(fā)綁定到被選元素的所有事件 |
| triggerHandler() | 觸發(fā)綁定到被選元素的指定事件上的所有函數(shù) |
| unbind() | 從被選元素上移除添加的事件處理程序 |
| undelegate() | 從現(xiàn)在或未來的被選元素上移除事件處理程序 |
| unload() | 在版本 1.8 中被廢棄。添加事件處理程序到 unload 事件 |
jQuery AJAX 方法
AJAX 是一種與服務(wù)器交換數(shù)據(jù)的技術(shù)飞袋，可以在補充在整個頁面的情況下更新網(wǎng)頁的一部分戳气。
| 方法 | 描述 |
|---|---|
| $.ajax() | 執(zhí)行異步 AJAX 請求 |
| $.ajaxPrefilter() | 在每個請求發(fā)送之前且被 $.ajax() 處理之前，處理自定義 Ajax 選項或修改已存在選項 |
| $.ajaxSetup() | 為將來的 AJAX 請求設(shè)置默認值 |
| $.ajaxTransport() | 創(chuàng)建處理 Ajax 數(shù)據(jù)實際傳送的對象 |
| $.get() | 使用 AJAX 的 HTTP GET 請求從服務(wù)器加載數(shù)據(jù) |
| $.getJSON() | 使用 HTTP GET 請求從服務(wù)器加載 JSON 編碼的數(shù)據(jù) |
| $.getScript() | 使用 AJAX 的 HTTP GET 請求從服務(wù)器加載并執(zhí)行 JavaScript |
| $.param() | 創(chuàng)建數(shù)組或?qū)ο蟮男蛄谢硎拘问剑捎糜?AJAX 請求的 URL 查詢字符串） |
| $.post() | 使用 AJAX 的 HTTP POST 請求從服務(wù)器加載數(shù)據(jù) |
| ajaxComplete() | 規(guī)定 AJAX 請求完成時運行的函數(shù) |
| ajaxError() | 規(guī)定 AJAX 請求失敗時運行的函數(shù) |
| ajaxSend() | 規(guī)定 AJAX 請求發(fā)送之前運行的函數(shù) |
| ajaxStart() | 規(guī)定第一個 AJAX 請求開始時運行的函數(shù) |
| ajaxStop() | 規(guī)定所有的 AJAX 請求完成時運行的函數(shù) |
| ajaxSuccess() | 規(guī)定 AJAX 請求成功完成時運行的函數(shù) |
| load() | 從服務(wù)器加載數(shù)據(jù)巧鸭，并把返回的數(shù)據(jù)放置到指定的元素中 |
| serialize() | 編碼表單元素集為字符串以便提交 |
| serializeArray() | 編碼表單元素集為 names 和 values 的數(shù)組 |
