DIV CSS 佈局教程網

jQuery全面簡單介紹
編輯:JQuery特效代碼     

這是學習 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
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved