JQuery中的事件及動(dòng)畫(huà)用法實(shí)例
本文實(shí)例講述了JQuery中的事件及動(dòng)畫(huà)用法。分享給大家供大家參考。具體分析如下:
1.bind事件
<script>
$(function () {
$("#divid h5.head").bind("click", function () { //bind事件,其中包含三個(gè)參數(shù),第一個(gè)為事件,第二個(gè)為事件
alert($(this).text());
});
$("#divid h5.content").css("display", "none"); //css方法就是可以動(dòng)態(tài)設(shè)置標(biāo)簽樣式
});
$(function () {
$("#btnid").bind("click", function () {
if (bool == true) {
$("#btnid .content").css("display", "none");
bool = false;
$(this).val("顯示");
}
else {
$("#btnid .content").css("display", "");
bool = true;
$(this).val("隱藏");
}
});
});
$(function () {
$("input[type=button]").bind("click", function () { //內(nèi)容的顯示與隱藏
var content = $("#divid .content");
if (content.is(":visible")) {
content.hide();
$(this).val("顯示");
}
else {
content.show();
$(this).val("隱藏");
}
});
});
</script>
<body>
<div id="divid">
<h5 class="head">Rocky?</h5>
<div class="content">就讓雨下下來(lái) 不用帶傘 讓一切完蛋 看被淋濕的心 多久才會(huì)曬干</div>
</div>
<input type="button" name="name" value="顯示 " id="btnid" />
</body>
在上面的操作中我們新學(xué)習(xí)了bind事件,而bind事件是三個(gè)參數(shù),第一個(gè)參數(shù)是事件的名字,例如:click,dbclick,mouseover等,第二個(gè)參數(shù)是data,即傳遞過(guò)來(lái)的事件對(duì)象,第三個(gè)參數(shù)是一個(gè)方法,即用來(lái)處理處 理綁定的事件函數(shù)這就是我們的一個(gè)特殊的事件;另外在這里還舉例寫(xiě)了一個(gè)動(dòng)畫(huà)中的例子,即文本信息的顯示或者隱藏,在還沒(méi)有學(xué)習(xí)show()和 hide()之前我們一般是按照上面第一種方式來(lái)寫(xiě)的,定義一個(gè)bool類(lèi)型的變量即可,這樣寫(xiě)起來(lái)還是很簡(jiǎn)單的,但是在寫(xiě)顯示隱藏時(shí)間處理按鈕上面還是 蠻蠻煩的,所以在學(xué)習(xí)了show()和hide()后就簡(jiǎn)單許多了,就是直接可以隱藏和顯示。可以對(duì)比一下,顯然在代碼的處理上簡(jiǎn)單啦。
2.toggle事件和事件冒泡
$(function () {
$("input[type=button]").toggle(function () { //toggle兩個(gè)參數(shù)都為事件,輪番調(diào)用
$(this).css("backgroundColor","red");
}, function () {
$(this).css("backgroundColor", "yellow");
});
});
$(function () {
$("div").each(function () {
$(this).bind("mouseup", function (e) {
alert(e.pageX); //輸出鼠標(biāo)的x方向的位置
alert(e.pageY); //輸出鼠標(biāo)的y方向的位置
alert(e.which); //輸出鼠標(biāo)的按鍵的選擇,1為鼠標(biāo)左鍵,2為滾軸按鍵,3為鼠標(biāo)右鍵
});
});
});
$(function () {
$("#txt").keydown(function () {
e.preventDefault(); //阻止a標(biāo)簽鏈接
alert(e.keyCode); //鍵盤(pán)獲取其ask碼
});
});
$(function () {
$("#ouuerdiv").click(function () {
alert($(this).text());
});
$("#div").click(function () {
alert($(this).text());
});
$("#innerdiv").click(function () { //在這里是寫(xiě)了一個(gè)事件的冒泡現(xiàn)象,組織冒泡可以使用preventDefault或者precentDefault
alert($(this).text());
});
})
</script>
<body>
<input type="button" name="btnname" value="按鈕" id="btn"/>
<div id="ouuerdiv"> 外部div<div id="div">中部div<div id="innerdiv">內(nèi)部div</div></div></div>
<a id="a">百度</a>
<textarea id="txt" rows="5" cols="5">
</textarea>
</body>
Toggle事件:模擬鼠標(biāo)點(diǎn)擊事件,當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)觸發(fā)第一個(gè)事件,當(dāng)鼠標(biāo)離開(kāi)元素時(shí)觸發(fā)第二個(gè)事件。兩個(gè)事件之間相互切換觸發(fā);另外還要說(shuō)下事 件冒泡,事件冒泡其實(shí)簡(jiǎn)單的理解為:在一個(gè)頁(yè)面上可以有多個(gè)事件,也可以多個(gè)元素相應(yīng)一個(gè)事件。像上面一樣假設(shè)頁(yè)面中存在兩個(gè)元素,其中一個(gè)div元素嵌 套在另一個(gè)div元素中并且都綁定了一個(gè)click事件,那么當(dāng)你點(diǎn)擊內(nèi)部中div元素時(shí)間,外部的div也會(huì)顯示,這就是事件冒泡。在這里需要注意的是都綁定了一個(gè)事件,容易想當(dāng)然的認(rèn)為僅僅的內(nèi)部發(fā)生click事件。
3.移除事件和連續(xù)添加多個(gè)事件
$(function () {
$("removeall").click(function () {
$("#btn").unbind(); //實(shí)現(xiàn)移除事件
});
$("#btn").bind("click", function () { //可以連續(xù)添加多個(gè)事件
$("#text").append("<p>我是第一個(gè)添加的事件</p>")
})
.bind("click", function () {
$("#text").append("<p>我是第二個(gè)添加的事件</p>")
})
.bind("click", function () {
$("#text").append("<p>我是第三個(gè)添加的事件</p>")
})
});
</script>
<body>
<button id="btn">單擊我吧</button><button id="removeall">刪除所有的事件</button>
<div id="text">div文本信息</div>
</body>
上面我們學(xué)習(xí)了bind事件,就是添加一個(gè)事件,而unbind就是移除事件,我們可以對(duì)比一下,嘿嘿,而針對(duì)連續(xù)添加多個(gè)事件其實(shí)就是當(dāng)你添加玩一個(gè)事件后繼續(xù).bind添加事件即可。
4.模擬事件
我們學(xué)習(xí)的上面的bind事件、click事件等一般都是通過(guò)單擊按鈕才能觸發(fā)的事件,但是有時(shí)間,需要通過(guò)模擬用戶(hù)操作,來(lái)達(dá)到單擊的效果,例如:在用戶(hù)進(jìn)入也買(mǎi)年后就觸發(fā)click事件,而不需要用戶(hù)去單擊,那么我們就使用trigger()方法來(lái)完成模擬操作。
5.一些其他的事件
$(function () {
$("#btn").click(function () {
//$("#div").hide(2000); //在2秒內(nèi)隱藏
//$("#div").show(2000); //在2秒內(nèi)顯示
//$("#div").fadeIn(2000); //增強(qiáng)元素的不透明度,直至元素完全顯示
//$("#div").fadeOut(2000); //降低元素的不透明度,直至元素完全消失
$("#btn").toggle(function () {
$("div").slideDown(2000); //改變?cè)氐母叨?,由上至下顯示
$(this).val("顯示")
}, function () {
$("div").slideUp(2000); //改變?cè)氐母叨?,由下至上縮短隱藏
$(this).val("隱藏")
});
});
//$("#btn").click(function () {
// $("div").fadeTo(600,0.2); //fadeTo方法適用于在0.6s內(nèi)透明度是0.2
//});
});
</script>
<body>
<div id="div" style="width:300px; height:300px;" >1234</div>
<input type="button" name="name" value="操作動(dòng)畫(huà)" id="btn" />
</body>
動(dòng)畫(huà)方法
6.多行文本框的應(yīng)用-高度變化
<style>
input:focus,textarea:focus {
border:1px solid #f00;
}
</style>
<script>
$(function () {
var comment = $("#comment");
$(".bigger").click(function () {
if (comment.height() < 500) {
comment.height($("#comment").height() + 100); //在原有高度的基礎(chǔ)上增高100
}
});
$(".smaller").click(function () {
if (comment.height() > 100) {
comment.height($("#comment").height() - 100); //在原有高度的基礎(chǔ)上降低100
}
});
})
</script>
<body>
<form action="#" method="post" id="regform">
<div class="msg"><span class="bigger">放大</span><span class="smaller">縮小</span></div>
<div style="" data-mce-style="color: #800000;">"><textarea rows="8" cols="20" id="comment">海海海海</textarea></div>
</form>
</body>
上面的操作實(shí)現(xiàn)了點(diǎn)擊放大時(shí)間,textarea的高度變高即面積變大,當(dāng)點(diǎn)擊縮小時(shí)間textarea的面積變小,即實(shí)現(xiàn)了動(dòng)畫(huà)的效果。
7.復(fù)選框應(yīng)用
<script>
$(function () {
$("#checkall").bind("click", function () {
$(":checkbox").each(function () {
$(this).attr("checked", "checked"); //點(diǎn)擊按鈕時(shí)間需要全部選中
});
});
$("#checkno").bind("click", function () {
$(":checkbox").attr("checked", false); //點(diǎn)擊按鈕時(shí)間需要全部不選中
});
$("#checkRev").bind("click", function () {
$(":checkbox").each(function () {
if ($(this).attr("checked") == "checked") {
$(this).attr("checked", false);
}
else {
$(this).attr("checked", true); //點(diǎn)擊按鈕時(shí)間需要選中的清除,未選中的被選中
}
});
});
//或者:
$(this).attr("checked", !$(this).attr("checked"));
});
</script>
<body>
<form>你愛(ài)好的運(yùn)動(dòng)?<br />
<input type="checkbox" name="names" value="足球 " />足球<br />
<input type="checkbox" name="names" value="籃球 " />籃球<br />
<input type="checkbox" name="names" value="排球 " />排球<br />
<input type="checkbox" name="names" value="羽毛球 " />羽毛球<br />
<input type="button" id="checkall" value="全選 " /><br />
<input type="button" id="checkno" value="全不選 " /><br />
<input type="button" id="checkRev" value="反選 " /><br />
<input type="button" name="send" value="提交" /><br />
</form>
</body>
在這里需要注意的是,判斷復(fù)選框選中或者不選中的狀態(tài),必須通過(guò)控制元素的checked屬性來(lái)達(dá)到目的,如果屬性checked為true,說(shuō)明被選中,如果為false,則說(shuō)明未被選中。
8.下拉框的應(yīng)用
<script>
$(function () {
$("#add").click(function () {
var selectoption = $("#select1 option:selected");
selectoption.remove();
selectoption.appendTo('#select2'); //把選中的項(xiàng)添加到右邊的aelect框中
});
$("#addAll").bind("click",function () {
var options = $("#select1 option");
options.appendTo('#select2');
});
});
</script>
<body>
<div class="center">
<select multiple="multiple" id="select1" style="width: 100px; height: 160px">
<option value="1">選項(xiàng)1</option><option value="2">選項(xiàng)2</option> <option value="3">選項(xiàng)3</option>
<option value="4">選項(xiàng)4</option><option value="5">選項(xiàng)5</option><option value="6">選項(xiàng)6</option>
<option value="7">選項(xiàng)7</option><option value="8">選項(xiàng)8</option><option value="9">選項(xiàng)9</option>
</select>
<div>
<span id="add">添加到右邊</span>
<span id="addAll">全部添加到右邊</span>
</div>
</div>
<div class="center" style="float:right">
<select multiple="multiple" id="select2" style="width: 100px; height: 160px" >
</select>
</div>
上面的操作是實(shí)現(xiàn)了在在左邊點(diǎn)擊選擇的項(xiàng),然后添加到右邊的框中,可以一個(gè)一個(gè)的添加,也可以全部一次性添加。
9.表格的應(yīng)用
<style>
.even {
}
.odd {
background-color: #ffffee;
}
</style>
<script>
$("#table tr:odd").addClass("odd"); //選取索引為奇數(shù)的行數(shù)
$("#table tr:even:not(:first)").addClass("even"); //選取索引為偶數(shù)的除了索引為0的行數(shù)
$("table tr").each(function () {
$(this).click(function () {
$(this).css("backgroundColor","red").siblings().css("backgroundColor","");
});
})
</script>
<body>
<table border="1" id="table">
<thead><tr><th>姓名</th><th>性別</th><th>暫住地</th></tr></thead><tbody>
<tr class="parent" id="row1"><td colspan="3">前臺(tái)設(shè)計(jì)組</td></tr>
<tr class="child1"><td>張三</td><td>男</td><td>浙江寧波</td></tr>
<tr class="child1"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr class="parent" id="row2"><td colspan="3">前臺(tái)開(kāi)發(fā)組</td></tr>
<tr class="child2"><td>王五</td><td>男</td><td>湖南長(zhǎng)沙</td></tr>
<tr class="child2"><td>趙六</td><td>男</td><td>湖南長(zhǎng)沙</td></tr>
<tr class="parent" id="row3"><td colspan="3">后臺(tái)開(kāi)發(fā)組</td></tr>
<tr class="child3"><td>孫七</td><td>男</td><td>湖南長(zhǎng)沙</td></tr>
<tr class="child3"><td>周八</td><td>男</td><td>湖南長(zhǎng)沙</td>
</tr>
</tbody>
</table>
</body>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法,涉及jQuery根據(jù)時(shí)間動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2016-07-07jQuery實(shí)現(xiàn)點(diǎn)擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊后高亮背景固定顯示的菜單效果,可實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊菜單項(xiàng)后呈現(xiàn)出鼠標(biāo)滑過(guò)一樣的背景高亮顯示效果,同時(shí)該顯示效果固定不變,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)跨域iframe接口方法調(diào)用
頁(yè)面a.html域名為www.a.com嵌入頁(yè)面http://www.b.com/b.html,b.html要調(diào)用a.html中的js函數(shù),由于兩個(gè)頁(yè)面不在一個(gè)域中,會(huì)提示沒(méi)權(quán)限。如何解決該問(wèn)題呢,請(qǐng)看下面示例代碼。2015-03-03使用jQuery快速解決input中placeholder值在ie中無(wú)法支持的問(wèn)題
本篇文章主要介紹了使用jQuery快速解決input中placeholder值在ie中無(wú)法支持的問(wèn)題。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01jQuery焦點(diǎn)圖切換簡(jiǎn)易插件制作過(guò)程全紀(jì)錄
本文主要講訴了本人制作一個(gè)jquery焦點(diǎn)圖切換的簡(jiǎn)易插件的過(guò)程,十分的詳細(xì),希望對(duì)大家能有所幫助2014-08-08window.open不被攔截的實(shí)現(xiàn)代碼
打開(kāi)空白新窗口,再給新窗口的localtion賦值,需要的朋友可以參考下2012-08-08jQuery實(shí)現(xiàn)背景彈性滾動(dòng)的導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)背景彈性滾動(dòng)導(dǎo)航效果的方法,涉及jQuery動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-06-06