1.jquery 8大選擇器:基本、屬性選擇器,層級、子元素選擇器,內(nèi)容、可見性選擇器,表單、表單屬性選擇器
2.jquery dom元素操作(對象訪問)
each() $("img").each(function{alert("test each()";});
size() $("img").size();計算dom元素的個數(shù)
length $("img").length; 同上
get() $("img").get(); 獲取dom元素的集合
get(index) $("img").get(0);獲取某一個dom元素
index(subject) $("li").index($("#bar")) 獲取索引值
3.屬性操作:
attr(name,val);
removeAttr(name)
html() //獲取 html("append"); 負(fù)值
text() 同上
val()取當(dāng)前值
4.css相關(guān)操作
css:
css(name,val);
位置:
offset() $("p:last").offset({top:30,left:20});
設(shè)置匹配元素相對于document對象的坐標(biāo) postion() var postion = $("p:first").postion();
獲取匹配元素相對父元素的偏移坐標(biāo)
scrollTop() $("p:last").scrollTop();
獲取匹配元素相對滾動條頂部的偏移 scrollLeft $("p:last").scrollLeft;
獲取匹配元素相對滾動條左側(cè)的偏移 尺寸:
width();
height();
innerWidth();innerHeight();
outerWidth();outerHeight();
5.文檔處理
內(nèi)部插入:
append();在匹配元素中插入
appendTo();被插入
prepend();
prependTo()
外部插入:
after(); $("p").after("<b>ss</b>"); 放到匹配元素后面
insertAfter(); 把匹配元素放到后面
before();
insertBefor()
包裹:
wrap(html,elem,fn); 作用與內(nèi)部插入appendTo()差不多
unwrap(); 移除父元素
wrapInner(html,elem,fn); 作用與wrap相反,在匹配元素內(nèi)部包裹
替換: replaceWith(); replaceAll();
刪除:
empty(); 清空匹配元素的所有子元素
remove(); 只清空匹配元素,不清空匹配元素內(nèi)容
復(fù)制:clone();clone(true);
6.篩選
過濾:
eq(index); 取得index處的值
first();
last();
filter(); $("p").filter(".myClass,:first");
is(); $("input[type='checkbox']").parent.is("form");是form,則返回true,否則返回false
has(); $("li").has("ul").css("background-color","red");
not(); $("p").not($("#id")[0]); 刪除匹配的元素
slice(start,end); <p>hello</p><p>ni hao</p><p>hoo</p> 選取第一個P,$("p").slice(0,1);
查找:
find(expr) $("p").find("span"); expr 可以像是.selected .myClass
children(expr) 不帶expr時是不帶查找條件所有子結(jié)點(diǎn)元素
parent(expr) 查找匹配元素的唯一父元素,最后還包括匹配元素
prev(expr) 取得前一個緊鄰元素
next(expr) 取得后一個緊鄰元素
subling(expr) 取得同級其它子元素集合
7.事件
bind(type,[data],fn);
$('#bar').bind('click', {msg: message}, function(event) {
alert(event.data.msg);
});
one(type,[data],fn);一次性事件綁定 ,只要第一次
$("p").one("click", function(){
alert( $(this).text() );
});
trigger(type,[data]);在匹配元素上觸發(fā)事件
$("form:first").trigger("submit") 不用submit提交第一個表單
//給事件傳遞一個參數(shù)
$("p").click( function (event, a, b) {
// 一個普通的點(diǎn)擊事件時,a和b是undefined類型
// 如果用下面的語句觸發(fā),那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
//顯示Hello World!
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
unbind([type],[data]); 去除綁定
hover(overFn,outFn); 鼠標(biāo)懸停時事件,不是點(diǎn)擊
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle(fn1,fn2,fn3....) 鼠標(biāo)點(diǎn)擊依次事件
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":", "color":"});
}
);
8.效果
基本:
show(); 也可帶參數(shù)show(speed,callback)
hidden();也可帶參數(shù)hidden(speed,callback)
toggle();也可帶參數(shù)toggle(speed,callback);
滑動:
slideDown(speed,[callback]);
slideUp(speed,[callback]);
slideToggle(speed,[callback]);
淡入淡出:
fadeIn(speed,[callback]);
fadeOut(speed,[callback]);
fadeTo(speed,opacity,[fn]); //opacity,
不透明度值(0到1之間的數(shù)字 動畫效果:
animate(parames,[duration],[easing],[callback])
paramsOptions
一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
duration (可選)String,Number
三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如:1000)
easing (可選)String
要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing".
callback (可選)Function
在動畫完成時執(zhí)行的函數(shù)
// 在一個動畫中同時應(yīng)用三種類型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
9.數(shù)組對象操作
$.each(Array or Object,[callback]); // 遍歷數(shù)組或?qū)ο?br />
//例遍對象,同時使用成員名稱和變量內(nèi)容。
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
$.grep(array,callback,[invert]) //
過濾數(shù)組元素//過濾數(shù)組中大于 0 的元素
$.grep( [0,1,2], function(n,i){
return n > 0;
});
結(jié)果:[1,2]
$.map(array,callbak)// 對數(shù)組內(nèi)元素操作,得到新的數(shù)組
//將原數(shù)組中每個元素加 4 轉(zhuǎn)換為一個新數(shù)組。
$.map( [0,1,2], function(n){
return n + 4;
});
//原數(shù)組中大于 0 的元素加 1 ,否則刪除
$.map( [0,1,2], function(n){
return n > 0 ? n + 1 : null;
});
$.makeArray(obj) //將類數(shù)組對象轉(zhuǎn)換為數(shù)組對象
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // 使用數(shù)組翻轉(zhuǎn)函數(shù)
Fourth
Third
Second
First
$.inArray(val,array) //
確定第一個參數(shù)在數(shù)組中的位置(索引值) ,沒有則返回-1
$.toArray(); //將多個DOM元素轉(zhuǎn)變成一個數(shù)組
$.merge(arr1,arr2);//合并兩個數(shù)組
$.unique(array);//刪除重復(fù)元素,但是只對dom元素的數(shù)組好使,對數(shù)字或字符串?dāng)?shù)組不好使
10.判斷操作
$.contains(container,contained) //
一個DOM節(jié)點(diǎn)是否包含另一個DOM節(jié)點(diǎn) $.isEmptyObject(obj) //判斷是否為空對象,即不包含任何屬性
$.trim(str) 去首尾空格