前言
本見書上JavaScript事件一塊較為繁瑣細(xì)節(jié)甚多以為是要花上好一段時間才能學(xué)完再來做筆記。結(jié)果是當(dāng)天晚上就粗粗看完內(nèi)容后決定暫且不做筆記，轉(zhuǎn)而在w3cschool上瀏覽完了jQuery教程昨天來不及做，今天起來就開始補上這篇小記。
效果動畫
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.滑動：
$(selector).slideDown(speed,callback);//向下滑動顯示元素
$(selector).slideUp(speed,callback);//向上滑動顯示元素
$(selector).slideToggle(speed,callback);
4.動畫：
語法：$(selector).animate({params},speed,callback);
該語句幾乎可以操作所有的css屬性，當(dāng)需要操作元素的位置屬性是需將元素的position設(shè)置為relative、fixed 或 absolute。同時填寫css屬性名稱使用駝峰形式。
存在動畫隊列：即一個元素完成多條動畫指令：
$("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");
});
有個鏈接功能：即對于同一個元素的多條語句（動作或方法）可以通過鏈接連在一起：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
5.停止動畫
單獨列出這一條語句是因為該語句存在兩個參數(shù)需要試驗過理解了才能熟練的使用：$(selector).stop(stopAll,goToEnd);
stopAll表示是否停止動畫隊列里所有動畫默認(rèn)為false
goToEnd只有設(shè)置了stopAll才有效，表示是否跳過動畫達到當(dāng)前動畫語句的最后的形態(tài)
而如果stopAll為false則立馬跳過第一條動畫立即執(zhí)行下一條動畫指令。
ps:描述并不清楚，若回顧這篇文章還是需要自己動手實踐過才知道兩個參數(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ù)都存在回調(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è)置多個屬性：
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.itdecent.cn/",
"title" : "簡書官網(wǎng)"
});
});
而attr()方法的回調(diào)函數(shù)用法如下：
$("button").click(function(){
$("#link_test").attr("href", function(i,origValue){
return origValue + "/u/caf9042c3d27";
});
});
個人認(rèn)為該回調(diào)函數(shù)更方便的獲得了舊屬性來進行接下來的操作。
7.刪除元素
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素
remove() 方法也可接受一個參數(shù)，允許對被刪元素進行過濾。
該參數(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ù)量個新元素
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() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作
css("propertyname") - 返回首個匹配元素的樣式屬性值
同時可以通過 css("propertyname","value");設(shè)置屬性值
如需設(shè)置多個 CSS 屬性，請使用如下語法：
element.css({"propertyname":"value","propertyname":"value",...});
10.遍歷DOM
向上遍歷DOM樹：
parent()//返回所選元素的直接父元素
parents()//返回所選元素的所有祖先元素，一路向上直到文檔的根元素,<html>
parentsUntil()
parents()方法存在可選參數(shù)(祖先元素的類型)來過濾搜索結(jié)果：
$(document).ready(function(){
$("span").parents("ul");
});
parentsUntil()方法返回兩個元素之間的所有被選元素的祖先元素（不包括邊界元素）:
<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也會擁有紅色邊框.說明該參數(shù)可以是任何 jQuery 選擇器的語法。
向下遍歷簡單了許多：
children()//沒有參數(shù)則返回直接子元素、也可以有參數(shù)對結(jié)果進行過濾
find()//有參數(shù)對搜索結(jié)果進行過濾,該參數(shù)可以是任何 jQuery 選擇器的語法。
返回div的所有后代：$("div").find("*");
水平遍歷：
水平遍歷分為兩大類：
1.返回所有的兄弟元素：
siblings()
//可以有參數(shù)，和遍歷祖先和孩子一樣填寫參數(shù)
2.單一方向遍歷：
分為向前向后遍歷，在此只記錄向后遍歷：
next()//返回當(dāng)前元素的下一個兄弟元素只返回一個元素所以沒有參數(shù)
nextAll()//返回所有跟隨元素且可以有參數(shù)參數(shù)填寫同上文
nextUntil()//用法與parentsUntil()類似也可以有參數(shù)
向前遍歷：
preve(),prevAll(),prevUntil()
11.過濾
在選取DOM中的節(jié)點時存在了過濾的方法來縮小搜索范圍：
first(),
last()，
eq(n)//第n個元素從0開始計數(shù)
filter("")//通過css選擇器來縮小范圍表示符合filter內(nèi)的條件的某些元素
not()//與filter正好相反
結(jié)尾
內(nèi)容不算很多，但是記錄下來也花了很多時間，本是想分好幾天看完，心有愧疚地玩了會游戲又開始逼著自己看完了內(nèi)容?？吹臅r候就開始記錄筆記為了方便寫簡書，可能是剛開始記錄的原因?qū)嵲谑怯悬c煩人有點累，堅持堅持就好。
