學(xué)習(xí) jquery
簡介
什么是 jquerye
jQuery是一個JavaScript函數(shù)庫朝捆。
jQuery是一個輕量級的"寫的少般渡，做的多"的JavaScript庫。
jQuery庫包含以下功能：
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數(shù)
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities
提示： 除此之外芙盘，Jquery還提供了大量的插件驯用。
jquery 安裝
1.直接下載
https://jquery.com/download/
下載 jQuery
有兩個版本的 jQuery 可供下載：
Production version - 用于實際的網(wǎng)站中，已被精簡和壓縮儒老。
Development version - 用于測試和開發(fā)（未壓縮蝴乔，是可讀的代碼）
<script src="jquery-1.10.2.min.js"></script>
2.網(wǎng)絡(luò)
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
加載運行函數(shù)
jQuery 入口函數(shù):
$(document).ready(function(){
// 執(zhí)行代碼
});
或者
$(function(){
// 執(zhí)行代碼
});
JavaScript 入口函數(shù):
window.onload = function () {
// 執(zhí)行代碼
}
jQuery 入口函數(shù)與 JavaScript 入口函數(shù)的區(qū)別：
jQuery 的入口函數(shù)是在 html 所有標(biāo)簽(DOM)都加載之后，就會去執(zhí)行驮樊。
JavaScript 的 window.onload 事件是等到所有內(nèi)容淘这，包括外部圖片之類的文件加載完后剥扣，才會執(zhí)行。
選擇器
- 標(biāo)簽
- 類名
- id
| 語法 | 描述 |
|---|---|
| $("*") | 選取所有元素 |
| $(this) | 選取當(dāng)前 HTML 元素 |
| $("p.intro") | 選取 class 為 intro 的 <p> 元素 |
| $("p:first") | 選取第一個 <p> 元素 |
| $("ul li:first") | 選取第一個 <ul> 元素的第一個 <li> 元素 |
| $("ul li:first-child") | 選取每個 <ul> 元素的第一個 <li> 元素 |
| $("[href]") | 選取帶有 href 屬性的元素 |
| $("a[target='_blank']") | 選取所有 target 屬性值等于 "_blank" 的 <a> 元素 |
| $("a[target!='_blank']") | 選取所有 target 屬性值不等于 "_blank" 的 <a> 元素 |
| $(":button") | 選取所有 type="button" 的 <input> 元素 和 <button> 元素 |
| $("tr:even") | 選取偶數(shù)位置的 <tr> 元素 |
| $("tr:odd") | 選取奇數(shù)位置的 <tr> 元素 |
事件
| 鼠標(biāo)事件 | 鍵盤事件 | 表單事件 | 文檔/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
jquery 效果
- 1.顯示隱藏
$(ele).show(speed铝穷，循環(huán)钠怯，函數(shù))
$(ele).hide(speed，循環(huán)曙聂，函數(shù))
$(ele).toggle(speed晦炊，循環(huán)，函數(shù))
- speed
可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度宁脊，可以取以下值："slow"断国、"fast" 或毫秒。
- 循環(huán)的方式
swing linear
- 2.淡入淡出
jQuery fadeIn(speed,callback)//淡入
jQuery fadeOut(speed,callback)//淡出
jQuery fadeToggle(speed,callback)//雙向
jQuery fadeTo(speed,opacity,callback)//允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）榆苞。
- speed 屬性
可選的 speed 參數(shù)規(guī)定效果的時長稳衬。它可以取以下值：() "slow"、"fast" 或毫秒坐漏。
- 3.滑動
slideDown(speed,callback) 向下滑動
slideUp(speed,callback) 收回
slideToggle(speed,callback) 雙向
- speed 屬性
可選的 speed 參數(shù)規(guī)定效果的時長薄疚。它可以取以下值：() "slow"、"fast" 或毫秒赊琳。
- 4.動畫
$(selector).animate({params},speed,callback);自定義動畫
必需的 params 參數(shù)定義形成動畫的 CSS 屬性街夭。
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"躏筏、"fast" 或毫秒板丽。
可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。
- 屬性使用相對值
也可以定義相對值（該值相對于元素的當(dāng)前值）趁尼。需要在值的前面加上 += 或 -=：
height:'+=150px',
width:'+=150px'
- 使用預(yù)定義值
您甚至可以把屬性的動畫值設(shè)置為 "show"埃碱、"hide" 或 "toggle"：
height:'toggle'
- 使用隊列功能（依次執(zhí)行）
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
- 5.停止動畫
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊列。默認(rèn)是 false酥泞，即僅停止活動的動畫砚殿，允許任何排入隊列的動畫向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫婶博。默認(rèn)是 false瓮具。
默認(rèn)地，stop() 會清除在被選元素上指定的當(dāng)前動畫凡人。
- 6.鏈?zhǔn)?/h4>
操作 dom
1.捕獲獲取內(nèi)容和屬性
獲得內(nèi)容 - text()名党、html() 以及 val()
獲取屬性 - attr()
2.設(shè)置內(nèi)容和屬性
text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
val() - 設(shè)置或返回表單字段的值
- 回調(diào)
$().txt(function(){return xx})
設(shè)置屬性 - attr("src","http") -attr({a:1,B:2})
- 回調(diào)
$().txt('src',function(){return http})
3.添加元素
("p").prepend("在開頭追加文本"); - 在被選元素的開頭插入內(nèi)容
("img").after("在后面添加文本"); - 在被選元素之后插入內(nèi)容
$("img").before("在前面添加文本"); - 在被選元素之前插入內(nèi)容
- 區(qū)別
append/prepend 是在選擇元素內(nèi)部嵌入。
after/before 是在元素外面追加挠轴。
4. 刪除元素
remove() - 刪除被選元素（及其子元素）
empty() - empty() 方法刪除被選元素的子元素传睹。
- 過濾 $("p").remove(".italic");
5.css 類
addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進(jìn)行添加/刪除類的切換操作
css() - 設(shè)置或返回樣式屬性
6.css() 方法
css("propertyname"); 返回屬性值
css("propertyname","value");設(shè)置單個屬性值
css({"propertyname":"value","propertyname":"value",...});設(shè)置多個屬性值
7.元素尺寸
width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）岸晦。
height()
innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）欧啤。
innerHeight()
outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）睛藻。
outerHeight()
!設(shè)置了 box-sizing 后，width() 獲取的是 css 設(shè)置的 width 減去 padding 和 border 的值
遍歷
向上查找
parent() 方法返回被選元素的直接父元素邢隧。
parents() 方法返回被選元素的所有祖先元素店印，它一路向上直到文檔的根元素 (<html>)。
使用可選參數(shù)來過濾對祖先元素的搜索倒慧。$("span").parents("ul");
parentsUntil() parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素按摘。
$("span").parentsUntil("div");
后代
children()
children() 方法返回被選元素的所有直接子元素。
該方法只會向下一級對 DOM 樹進(jìn)行遍歷纫谅。
find()
find() 方法返回被選元素的后代元素炫贤，一路向下直到最后一個后代。
$("div").find("span");
同輩
siblings() 方法返回被選元素的所有同胞元素付秕。
$("h2").siblings("p"); <h2> 的同胞元素的所有 <p> 元素：
next() 方法返回被選元素的下一個同胞元素兰珍。
該方法只返回一個元素。
nextAll() 方法返回被選元素的所有跟隨的同胞元素询吴。
nextUntil() 方法返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素掠河。
$("h2").nextUntil("h6"); 返回介于 <h2> 與 <h6> 元素之間的所有同胞元素：
prev()
prevAll()
prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞之前元素遍歷汰寓，而不是之后元素遍歷）口柳。
過濾
三個最基本的過濾方法是：first(), last() 和 eq()苹粟，它們允許您基于其在一組元素中的位置來選擇一個特定的元素有滑。
其他過濾方法，比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標(biāo)準(zhǔn)的元素嵌削。
first() 方法返回被選元素的首個元素毛好。
last() 方法返回被選元素的最后一個元素
eq() 方法返回被選元素中帶有指定索引號的元素。索引從 0 開始
filter() 方法允許您規(guī)定一個標(biāo)準(zhǔn)苛秕。不匹配這個標(biāo)準(zhǔn)的元素會被從集合中刪除肌访，匹配的元素會被返回。
("p").not(".url"); 下面的例子返回不帶有類名 "url" 的所有 <p> 元素：
jquery_ajax
什么是 ajax
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）吼驶。
簡短地說，在不重載整個網(wǎng)頁的情況下店煞，AJAX 通過后臺加載數(shù)據(jù)蟹演，并在網(wǎng)頁上進(jìn)行顯示。
使用 AJAX 的應(yīng)用程序案例：谷歌地圖顷蟀、騰訊微博酒请、優(yōu)酷視頻、人人網(wǎng)等等鸣个。
scrollTop 網(wǎng)頁偏移量
兼容 獲取
("body").scrollTop()//body.sroll 一般為 0
設(shè)置
$("html,body").scrollTop(200)
自動觸發(fā)事件
('a').triggerHandler('click') 無事件冒泡布朦，無默認(rèn)行為
！在 a 標(biāo)簽中用 trigger triggerHandler 都不會觸發(fā) a 標(biāo)簽?zāi)J(rèn)事件昼窗，所有要寫在其他地方是趴，不能寫在 a 標(biāo)簽中
jquery 自定義事件
用 trigger
條件 1.事件不能通過 eventName 添加,通過 on 2.事件通過 trigger 觸發(fā)
$('ele').on('事件'，callback)
$('ele).trigger('事件')
事件命名空間
觸發(fā)單一 click
條件澄惊；
通過 on 綁定
通過 trigger 觸發(fā)
('ele).trigger('click.aa')
右遭！利用 trigger 觸發(fā)子元素帶命名空間的事件，父元素相同也會觸發(fā)
利用 trigger 觸發(fā)子元素帶命名空間的事件缤削，子元素和父元素帶相同的也會觸發(fā)
事件委托
delegate
$('ul').delegate('li','click',callback)
let add=$('代碼片段');
xx.append(add)//添加
add.remove()//刪除
Dom 節(jié)點
append(content|fn) 向每個匹配的元素內(nèi)部追加內(nèi)容窘哈。父標(biāo)簽內(nèi)容后
("<div>哈哈</div>").appendTo('.box')
prepend(content|fn) 向每個匹配的元素內(nèi)部前置內(nèi)容亭敢。 父標(biāo)簽內(nèi)容前
prependTo(content) 把所有匹配的元素前置到另一個滚婉、指定的元素元素集合中。
after(content|fn) 在每個匹配的元素之后插入內(nèi)容帅刀。
before() 在每個匹配的元素之前插入內(nèi)容让腹。
('<div>哈哈</div>').insertAfter($(".box").eq(2))
insertBefore(content) 把所有匹配的元素插入到另一個骇窍、指定的元素元素集合的前面。
wrap(html|element|fn) 把所有的段落用一個新創(chuàng)建的 div 包裹起來 每個匹配的都用單獨的一個
$(".uli").wrap("<div></div>")
unwrap() 移出元素的父元素
wrapAll 所有選中的移到同一個
wrapInner() 在元素里
replaceWith() 替換選中的
replaceAll()
empty() 刪除選中節(jié)點的全部子元素
remove() 刪除選中節(jié)點
detach() 刪除保留事件或方法
clone() 克隆 true||false 一個布爾值（true 或者 false）指示事件處理函數(shù)是否會被復(fù)制锥余。
has 選中含有此節(jié)點的父節(jié)點
(".box:parent")
:hidden 匹配所有不可見元素腹纳，或者 type 為 hidden 的元素
visible 匹配所有的可見元素
