事件之營(yíng)造事件
click觸發(fā)每一個(gè)匹配元素的click事件。
//將頁面內(nèi)所有段落點(diǎn)擊后隱藏。
$(“p”).click( function () { $(this).hide(); });
mouseover當(dāng)鼠標(biāo)指針位于元素上方時(shí),會(huì)發(fā)生 mouseover 事件。
//當(dāng)鼠標(biāo)指針位于元素上方時(shí)時(shí),改變?cè)氐谋尘吧?/p>
$(“p”).mouseover(function(){
$(“p”).css(“background-color”,”yellow”);
});
mouseout當(dāng)鼠標(biāo)指針從元素上移開時(shí),發(fā)生 mouseout 事件。
//當(dāng)鼠標(biāo)從元素上移開時(shí),改變?cè)氐谋尘吧?/p>
$(“p”).mouseout(function(){
$(“p”).css(“background-color”,”#E9E9E4″);
});
bind()為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。
// 當(dāng)每個(gè)段落被點(diǎn)擊的時(shí)候,彈出其文本。
$(“p”).bind(“click”, function(){
alert( $(this).text() );
});
事件之合成事件
hover()一個(gè)模仿懸停事件(鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象)的方法。這是一個(gè)自定義的方法,它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。
$(“.class”).hover(
function () {
$(this).addClass(“hover”);
},
function () {
$(this).removeClass(“hover”);
}
);
事件之模擬事件
trigger();在每一個(gè)匹配的元素上觸發(fā)某類事件。
//模擬客戶提交表單
$(“form:first”).trigger(“submit”);
//模擬客戶點(diǎn)擊
$(‘.cla’).trigger(‘click’);
//模擬元素獲得焦點(diǎn)
$(‘#text’).trigger(‘focus’);
表單操作
val()獲得或者設(shè)置匹配元素的當(dāng)前值。
//獲取輸入框user的值
$(“input[name=’user’]”).val();
//修改輸入框user的值
$(“input[name=’user’]”).val(2323);
prop()修改、獲取表單屬性值
//獲取到屬性值
$(“input[name=’user’]”).prop(‘value’);
// 禁用
$(“input[name=’user’]”).prop(‘disabled’,true);
//選中
$(“input[name=’love’]”).prop(‘checked’,true);
jquery動(dòng)畫
show()顯示隱藏的匹配元素
//將選中的元素顯示出來
$(“p”).show();
//將選中的元素緩慢的顯示出來,有slow、normal、fast 或者是毫秒數(shù)
$(“p”).show(“slow”);
//回調(diào)函數(shù),完成效果后執(zhí)行這個(gè)函數(shù)
$(“p”).show(“fast”,function(){
$(this).text(“show time !”);
});
hide()隱藏顯示的元素
//將選中的元素隱藏出來
$(“p”).hide();
//將選中的元素緩慢的隱藏出來,有slow、normal、fast 或者是毫秒數(shù)
$(“p”).hide(“slow”);
//回調(diào)函數(shù),完成效果后執(zhí)行這個(gè)函數(shù)
$(“p”).hide(“fast”,function(){
alert($(this).text());
});
fadeIn()改變不透明度,直到顯示
fadeOut()改變不透明度,直到”消失”
slideUp()改變高度,直到隱藏
slideDown() 改變高度,直到完全顯示
animate()自定義動(dòng)畫
可以根據(jù)自己的需要進(jìn)行定制動(dòng)畫。
//同時(shí)執(zhí)行
$(“.one”).animate({
width: “800px”,
height: “500px”,
fontSize: “20px”,
borderWidth:’10px’
}, 1000 );
//順序執(zhí)行
$(“.one”).animate({
width:”800px”
},3000).animate({
height:”500px”
},2000).animate({
fontSize :”30px”
},2000);
stop()清除隊(duì)列,避免動(dòng)畫循環(huán)
$(‘.one’).hover(function(){$(this).stop().animate({width:”300px”,height:”400px”},1000);},function(){
$(this).stop().animate({width:”200px”,height:”200px”},1000);
});
其他動(dòng)畫:
toggle()slidToggle()
fadeTo()fadeToggle()
綜合應(yīng)用于jquery選項(xiàng)卡、表單驗(yàn)證、圖片輪播等等。
本文由網(wǎng)上采集發(fā)布,不代表我們立場(chǎng),轉(zhuǎn)載聯(lián)系作者并注明出處:http://webhosting0.com/shbk/39091.html