前言
本見書上JavaScript事件一塊較為繁瑣細(xì)節(jié)甚多以為是要花上好一段時(shí)間才能學(xué)完再來做筆記讥耗。結(jié)果是當(dāng)天晚上就粗粗看完內(nèi)容后決定暫且不做筆記崖堤，轉(zhuǎn)而在w3cschool上瀏覽完了jQuery教程昨天來不及做，今天起來就開始補(bǔ)上這篇小記。
效果動(dòng)畫
1.隱藏和顯示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);//切換
可選的speed參數(shù):可選值為"slow","fast"或者毫秒數(shù)
$(selector).hide(1000);
可選的callback參數(shù)是在隱藏或顯示完成后執(zhí)行的函數(shù)名稱
2.淡入淡出：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);//透明度變化
3.滑動(dòng)：
$(selector).slideDown(speed,callback);//向下滑動(dòng)顯示元素
$(selector).slideUp(speed,callback);//向上滑動(dòng)顯示元素
$(selector).slideToggle(speed,callback);
4.動(dòng)畫：
語法：$(selector).animate({params},speed,callback);
該語句幾乎可以操作所有的css屬性，當(dāng)需要操作元素的位置屬性是需將元素的position設(shè)置為relative、fixed 或 absolute周荐。同時(shí)填寫css屬性名稱使用駝峰形式。
存在動(dòng)畫隊(duì)列：即一個(gè)元素完成多條動(dòng)畫指令：
$("button").click(function(){
var div=$("div");
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");
});
有個(gè)鏈接功能：即對(duì)于同一個(gè)元素的多條語句（動(dòng)作或方法）可以通過鏈接連在一起：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
5.停止動(dòng)畫
單獨(dú)列出這一條語句是因?yàn)樵撜Z句存在兩個(gè)參數(shù)需要試驗(yàn)過理解了才能熟練的使用：$(selector).stop(stopAll,goToEnd);
stopAll表示是否停止動(dòng)畫隊(duì)列里所有動(dòng)畫默認(rèn)為false
goToEnd只有設(shè)置了stopAll才有效僵娃，表示是否跳過動(dòng)畫達(dá)到當(dāng)前動(dòng)畫語句的最后的形態(tài)
而如果stopAll為false則立馬跳過第一條動(dòng)畫立即執(zhí)行下一條動(dòng)畫指令概作。
ps:描述并不清楚，若回顧這篇文章還是需要自己動(dòng)手實(shí)踐過才知道兩個(gè)參數(shù)的實(shí)際意義默怨。
6：捕獲
所謂捕獲就是獲取東西讯榕，可以獲取的有內(nèi)容和屬性。
1.獲取內(nèi)容：
text()返回所選元素的文本內(nèi)容
html()返回所選元素的內(nèi)容包含HTML標(biāo)記
val()返回表單字段的值（ex:input里的輸入值）
<p>名稱: <input type="text" id="test" value="someText"></p>
<button>顯示值</button>
$(document).ready(function(){
$("button").click(function(){
alert("值為: " + $("#test").val());
});
});
同時(shí)這三個(gè)函數(shù)都存在回調(diào)函數(shù)：
$(element).text(function(i,origText){
return
"The old text: "+origText + "New text : hello world!";
});
return的值就是要寫入element中的新值，origText是舊值愚屁，i是該元素的的下標(biāo)
2.獲取屬性
$(element).attr("attrName");
而attr()方法允許同時(shí)設(shè)置多個(gè)屬性：
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.reibang.com/",
"title" : "簡(jiǎn)書官網(wǎng)"
});
});
而attr()方法的回調(diào)函數(shù)用法如下：
$("button").click(function(){
$("#link_test").attr("href", function(i,origValue){
return origValue + "/u/caf9042c3d27";
});
});
個(gè)人認(rèn)為該回調(diào)函數(shù)更方便的獲得了舊屬性來進(jìn)行接下來的操作济竹。
7.刪除元素
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素
remove() 方法也可接受一個(gè)參數(shù)，允許對(duì)被刪元素進(jìn)行過濾霎槐。
該參數(shù)可以是任何 jQuery 選擇器的語法送浊。
$("p").remove(".italic");
//不是刪除p元素中class為italic的元素而是刪除所有class為italic的p元素
8.添加元素
append() - 在被選元素內(nèi)部的結(jié)尾插入指定內(nèi)容
prepend() - 在被選元素內(nèi)部的開頭插入指定內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容
這些方法都可以接受無限數(shù)量個(gè)新元素
function appendText()
{
var txt1="<p>Text.</p>"; // 使用 HTML 標(biāo)簽創(chuàng)建文本
var txt2=$("<p></p>").text("Text."); // 使用 jQuery 創(chuàng)建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM
$("p").append(txt1,txt2,txt3); // 追加新元素
}
function afterText()
{
var txt1="<b>I </b>"; // 使用 HTML 創(chuàng)建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 創(chuàng)建元素
var txt3=document.createElement("big"); // 使用 DOM 創(chuàng)建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在圖片后添加文本
}
9.操作類
addClass() - 向被選元素添加一個(gè)或多個(gè)類
removeClass() - 從被選元素刪除一個(gè)或多個(gè)類
toggleClass() - 對(duì)被選元素進(jìn)行添加/刪除類的切換操作
css("propertyname") - 返回首個(gè)匹配元素的樣式屬性值
同時(shí)可以通過 css("propertyname","value");設(shè)置屬性值
如需設(shè)置多個(gè) CSS 屬性丘跌，請(qǐng)使用如下語法：
element.css({"propertyname":"value","propertyname":"value",...});
10.遍歷DOM
向上遍歷DOM樹：
parent()//返回所選元素的直接父元素
parents()//返回所選元素的所有祖先元素袭景，一路向上直到文檔的根元素,<html>
parentsUntil()
parents()方法存在可選參數(shù)(祖先元素的類型)來過濾搜索結(jié)果：
$(document).ready(function(){
$("span").parents("ul");
});
parentsUntil()方法返回兩個(gè)元素之間的所有被選元素的祖先元素（不包括邊界元素）:
<body class="ancestors"> body (曾曾祖父元素)
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
ul和li有紅色邊框顯示
而將parentsUntil參數(shù)變成parentsUntil(".ancestors")則在上面的基礎(chǔ)上div也會(huì)擁有紅色邊框.說明該參數(shù)可以是任何 jQuery 選擇器的語法。
向下遍歷簡(jiǎn)單了許多：
children()//沒有參數(shù)則返回直接子元素闭树、也可以有參數(shù)對(duì)結(jié)果進(jìn)行過濾
find()//有參數(shù)對(duì)搜索結(jié)果進(jìn)行過濾,該參數(shù)可以是任何 jQuery 選擇器的語法耸棒。
返回div的所有后代：$("div").find("*");
水平遍歷：
水平遍歷分為兩大類：
1.返回所有的兄弟元素：
siblings()
//可以有參數(shù)，和遍歷祖先和孩子一樣填寫參數(shù)
2.單一方向遍歷：
分為向前向后遍歷报辱，在此只記錄向后遍歷：
next()//返回當(dāng)前元素的下一個(gè)兄弟元素只返回一個(gè)元素所以沒有參數(shù)
nextAll()//返回所有跟隨元素且可以有參數(shù)參數(shù)填寫同上文
nextUntil()//用法與parentsUntil()類似也可以有參數(shù)
向前遍歷：
preve(),prevAll(),prevUntil()
11.過濾
在選取DOM中的節(jié)點(diǎn)時(shí)存在了過濾的方法來縮小搜索范圍：
first(),
last()与殃，
eq(n)//第n個(gè)元素從0開始計(jì)數(shù)
filter("")//通過css選擇器來縮小范圍表示符合filter內(nèi)的條件的某些元素
not()//與filter正好相反
結(jié)尾
內(nèi)容不算很多，但是記錄下來也花了很多時(shí)間捏肢，本是想分好幾天看完奈籽，心有愧疚地玩了會(huì)游戲又開始逼著自己看完了內(nèi)容⊥液眨看的時(shí)候就開始記錄筆記為了方便寫簡(jiǎn)書衣屏，可能是剛開始記錄的原因?qū)嵲谑怯悬c(diǎn)煩人有點(diǎn)累，堅(jiān)持堅(jiān)持就好辩棒。
