參考資料
引言：不得不承認张弛，麻雀雖小腌且，五臟俱全犯祠。jquery庫雖然上手非常簡單何吝，但是一點也不low忆某。宏怔。奏路。正如官方所說，write less臊诊，do more鸽粉。降低編碼成本，兼容性也更高抓艳。本篇簡單說下jquery常用的點及個人的理解和學習方法触机。
1. How to learn
2. About jquery
- jquery是一個JavaScript庫（library）
- jquery極大地簡化了JavaScript編程
- jquery解決了很多JavaScript兼容性問題以及常見的需要處理的問題
3. Install
// 文件從官網(wǎng)直接下載
<script src="jquery.js"></script>
// 從www.bootcdn.cn查找引入cdn
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
var $ = require("jquery");
4. syntax
$(selector).action().action().action() // action()可以多個，這便是jQuery的chaining约谈，chaining允許我們在一條語句中運行多個jQuery方法（在相同元素上）
- 美元符號定義jQuery笔宿，當然也可以直接使用
jQuery(selector)犁钟，這也是避免與其他庫全局變量沖突的方法
- 選擇符“查詢”和“查找”HTML元素
- jQuery的action()執(zhí)行對元素的操作
5 . API
5.1 jQuery 效果
// hide()
$(selector).hide(speed,callback);
// show()
$(selector).show(speed,callback);
// toggle()
$(selector).toggle(speed,callback);
// animate()
$(selector).animate({params},speed,callback);
| method |
description |
| animate() |
對被選元素應(yīng)用“自定義”的動畫 |
| clearQueue() |
對被選元素移除所有排隊的函數(shù)（仍未運行的） |
| delay() |
對被選元素的所有排隊函數(shù)（仍未運行的）設(shè)置延遲 |
| dequeue() |
運行被選元素的下一個排隊函數(shù) |
| fadeIn() |
逐漸改變被選元素的不透明度，從隱藏到可見 |
| fadeOut() |
逐漸改變被選元素的不透明度泼橘，從可見到隱藏 |
| fadeTo() |
把被選元素逐漸改變至給定的不透明度 |
| hide() |
隱藏被選的元素 |
| queue() |
顯示被選元素的排隊函數(shù) |
| show() |
顯示被選的元素 |
| slideDown |
通過調(diào)整高度來滑動顯示被選元素 |
| slideToggle() |
對被選元素進行滑動隱藏和滑動顯示的切換 |
| slideUp() |
通過調(diào)整高度來滑動隱藏被選元素 |
| stop() |
停止被選元素上運行動畫 |
| toggle() |
對被選元素進行隱藏和顯示的切換 |
5.2 jQuery HTML
// 回調(diào)參數(shù)由兩個參數(shù)：被選元素列表中當前元素的下標涝动，以及原始值
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
| method |
description |
| addClass() |
向匹配的元素添加指定的類名 |
| after() |
在匹配元素之后插入內(nèi)容 |
| append() |
向匹配元素集合中的每個元素結(jié)尾插入由參數(shù)指定的內(nèi)容 |
| appendTo() |
向目標結(jié)尾插入匹配元素集合中的每個元素 |
| attr() |
設(shè)置或返回匹配元素的屬性和值 |
| before() |
在每個匹配的元素之前插入內(nèi)容 |
| clone() |
創(chuàng)建匹配元素集合的副本 |
| detach() |
從DOM中移除匹配元素集合 |
| empty() |
刪除匹配的元素集合中所有的子節(jié)點 |
| hasClass() |
檢查匹配的元素是否擁有指定的類 |
| html() |
設(shè)置或返回匹配的元素集合中的HTML內(nèi)容 |
| insertAfter() |
把匹配的元素插入到另一個指定的元素集合的后面 |
| insertBefore() |
把匹配的元素插入到另一個指定的元素 |
| prepend() |
向匹配元素集合中的每個元素開頭插入由參數(shù)指定的內(nèi)容 |
| prependTo() |
向目標開頭插入匹配元素集合中的每個元素 |
| remove() |
移除所有匹配的元素 |
| removeAttr() |
從所有匹配的元素中移除指定的屬性 |
| removeClass() |
從所有匹配的元素中刪除全部或指定的類 |
| replaceAll() |
用匹配的元素替換所有匹配到的元素 |
| replaceWith() |
用新內(nèi)容替換匹配的元素 |
| text() |
設(shè)置或返回匹配元素的內(nèi)容 |
| toggleClass() |
從匹配的元素中添加或刪除一個類 |
| unwrap() |
移除并替換指定元素的父元素 |
| val() |
設(shè)置或返回匹配元素的值 |
| wrap() |
把匹配的元素用指定的內(nèi)容或元素包裹起來 |
| wrapAll() |
把所有匹配的元素用指定的內(nèi)容或元素包裹起來 |
| wrapinner() |
將每一個匹配的元素的子內(nèi)容用指定的內(nèi)容或元素包裹起來 |
| css() |
設(shè)置或返回匹配元素的樣式屬性 |
| height() |
設(shè)置或返回匹配元素的高度 |
| offset() |
返回第一個匹配元素相對于文檔的位置 |
| offsetParent() |
返回最近的定位祖先元素 |
| position() |
返回第一個匹配元素相對于父元素的位置 |
| scrollLeft() |
設(shè)置或返回匹配元素相對滾動條左側(cè)的偏移 |
| scrollTop() |
設(shè)置或返回匹配元素相對滾動條頂部的偏移 |
| width() |
設(shè)置或返回匹配元素的寬度 |
5.3 jQuery 遍歷
- jQuery 遍歷，意為“移動”炬灭，用于根據(jù)其相對于其他元素的關(guān)系來“查找”（或選却姿凇）HTML 元素。以某項選擇開始重归，并沿著這個選擇移動米愿，直到抵達您期望的元素為止。
// 遍歷父元素
$(document).ready(function(){
$("span").parent();
});
| function |
description |
| add() |
將元素添加到匹配元素的集合中 |
| andSelf() |
把堆棧中之前的元素集添加到當前集合中 |
| children() |
獲得匹配元素集合中每個元素的所有子元素 |
| closest() |
從元素本身開始鼻吮，逐級向上級元素匹配育苟，并返回最先匹配的祖先元素 |
| contents() |
獲得匹配元素集合中每個元素的子元素，包括文本和注釋節(jié)點 |
| each() |
對jQuery對象進行迭代椎木，為每個匹配元素執(zhí)行函數(shù) |
| end() |
結(jié)束當前鏈中最近的一次篩選操作违柏，并將匹配元素集合返回到前一次的狀態(tài) |
| eq() |
將匹配元素集合縮減為位于指定索引的新元素 |
| filter() |
將匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素 |
| find() |
獲得當前匹配元素集合中每個元素的后代，由選擇器進行篩選香椎。 |
| first() |
將匹配元素集合縮減為集合中的第一個元素 |
| has() |
將匹配元素集合縮減為包含特定元素的后代的集合 |
| is() |
根據(jù)選擇器檢查當前匹配元素集合漱竖，如果存在至少一個匹配元素，則返回true |
| last() |
將匹配元素集合縮減為集合中的最后一個元素 |
| map() |
把當前匹配集合中每個元素傳遞給函數(shù)畜伐，產(chǎn)生包含返回值的新jQuery對象 |
| next() |
獲得匹配元素集合中每個元素緊鄰的同輩元素 |
| nextAll() |
獲得匹配元素集合中每個元素之后的所有同輩元素馍惹，由選擇器進行篩選 |
| nextUntil() |
獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止玛界。 |
| not() |
從匹配元素集合中刪除元素 |
| offsetParent() |
獲得用于定位的第一個父元素 |
| parent() |
獲得當前匹配元素集合中每個元素的父元素万矾，由選擇器篩選（可選） |
| parents() |
獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選） |
| parentsUntil() |
獲得當前匹配元素集合中每個元素的祖先元素脚仔，直到遇到匹配選擇器的元素為止 |
| prev() |
獲得匹配元素集合中每個元素緊鄰的前一個同輩元素勤众，由選擇器篩選（可選） |
| prevAll() |
獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選） |
| prevUntil() |
獲得每個元素之前所有的同輩元素鲤脏，直到遇到匹配選擇器的元素為止 |
| siblings() |
獲得匹配元素集合中所有元素的同輩元素们颜，由選擇器篩選（可選） |
| slice() |
將匹配元素集合縮減為指定范圍的子集 |
5.4 jQuery AJAX
| function |
description |
| jQuery.ajax() |
執(zhí)行異步HTTP（Ajax）請求 |
| .ajaxComplete() |
當Ajax請求完成時注冊要調(diào)用的處理程序，這是一個Ajax事件 |
| .ajaxError() |
當Ajax請求完成時出現(xiàn)錯誤時注冊要調(diào)用的處理程序 |
| .ajaxSend() |
當Ajax請求發(fā)送之前顯示一條信息 |
| jQuery.ajaxSetup() |
設(shè)置將來的Ajax請求的默認值 |
| .ajaxStart() |
當首個Ajax請求完成開始時注冊要調(diào)用的處理程序猎醇，這是一個Ajax事件 |
| .ajaxStop() |
當所有Ajax請求完成時注冊要調(diào)用的處理程序窥突，這是一個Ajax事件 |
| .ajaxSuccess() |
當Ajax請求成功完成時顯示一條消息 |
| jQuery.get() |
使用HTTP GET請求從服務(wù)器加載數(shù)據(jù) |
| jQuery.getJSON() |
使用HTTP GET請求從服務(wù)器加載JSON編碼數(shù)據(jù) |
| jQuery.getScript() |
使用HTTP GET請求從服務(wù)器加載JavaScript文件，然后執(zhí)行該文件 |
| .load() |
從服務(wù)器加載數(shù)據(jù)硫嘶，然后把返回到HTML放入匹配元素 |
| jQuery.param() |
創(chuàng)建數(shù)據(jù)或?qū)ο蟮男蛄谢硎咀栉剩m合在URL查詢字符串或Ajax請求中使用 |
| jQuery.post() |
使用HTTP POST 請求從服務(wù)器加載數(shù)據(jù) |
| .serialize() |
將表單內(nèi)容序列化為字符串 |
| .serializeArray() |
序列化表單元素，返回JSON數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù) |
6. think about jQuery
- jQuery常見面試題
- 建議：查看《JavaScript權(quán)威指南》對象沦疾、DOM称近、腳本化http章節(jié)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
