這是學習 jQuery 時做的一些簡單的筆記。
我的想法是:
根據這些簡單的筆記去回想他們詳細的用法。
仔細思考相同的效果如何用原生 JavaScript 實現,或者說怎樣用原生 JavaScript 寫這些方法,達到練習 JavaScript 的目的。
可以看一些源碼(從早期的 jQuery 開始),通過和其它框架進行比較,了解各個框架的優缺點,熟悉原生 JavaScript 及各大框架
選擇元素
$().action
等待文檔加載完成
$(function() {
//jQuery method
})
$(docuemnt).ready(function() {
//jQuery method
})
選擇器
$()
$("selecter")
$("#id")
$(".class")
事件
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
隱藏/顯示
hide()
show()
toggle() $(selector).toggle(speed,callback);
淡入/淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo() 不透明度(0 - 1之間)
滑動
slideDown()
slideUp()
slideToggle()
動畫
$(selector).animate({params},speed,callback);
params 為必選,可以操作幾乎所有 CSS 屬性,但必須使用 Comel 命名法
speed 可選項,動畫執行的速度(fast,normal,slow,毫秒)
callback 可選項,animate 完成後執行的函數
停止動畫
$(selector).stop(stopAll,goToEnd);
stopAll 為是否要清除動畫隊列,默認為 false,即僅僅清除當前動畫
goToEnd 為是否立即完成動畫,默認為 false
Chaining
在相同元素上聯系運行命令,一條接一條
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
捕獲
text()
html()
val()
attr()
設置
text("text")
html("html")
val("value")
attr("attr", "attrValue")
以上四個方法都有回調函數,函數有兩個參數:當前元素在列表中的下標,原始(舊的)值。函數返回新值。
添加元素
append()
preppend()
before()
after()
刪除元素
remove() --- 刪除元素及其子元素
empty() --- 刪除子元素
remove(.class) 過濾
CSS類
addClass()
removeClass()
toggleClass()
css() 方法
css("propertyname");
css("propertyname","value");
css({"propertyname":"value","propertyname":"value",...});
尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerWidth()
祖先
parent()
parents("selecter")
parentUntil("selecter")
後代
children() $(div).children("p.1")
find("selecter")
同胞
siblings("selecter")
next()
nextAll()
nextUntil("selecter")
prev()
prevAll()
prevUntil("selecter")
過濾
first()
last()
eq(0)
filter()
not()
AJAX load()
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
AJAX get()/post()
$.get()
$.post()
noConflict
var jq = $.noConflict();
JSONP