JQuery中的事件以及动画

   
后天孙子起床很早,对马来亚戏有较强期待,天气不错,大家到达的时候,公园的万人广场已经集聚不少运动的身形,有拍婚纱照的,有放纸鸢的,有打羽球的,有在绿茵奔跑的,阳光的清晨,舒服的早上。

.bind事件

 
 马来西亚戏旁有个小马戏,小小舞台四周围了许几个人,台上是鹦鹉表演,观者席上倘使有人手举一张10元钞票,鹦鹉就会飞过来,用嘴将纸币叼回去,回到表演者那鹦鹉会获得三个食物的奖赏,不晓得具体吃的是何许?观者和鹦鹉都不嫌麻烦,一会时光舞台上就叼回不少人民币,那种表演情势确实比马来亚戏来钱更快和更便于。
  

<script src=”script/jquery-1.7.1.min.js”></script>

 
 孙子对于这类鸟类的才艺表演就像并未太多兴趣,一心想着马来西亚戏里恐怕现身的场馆,就算她从不看过真正的马戏表演,还是充满期望和打动,不停的说话来消除内心的小紧张,作者很能清楚他此时的情感,期待中夹杂着紧张和恐惧。

<script>

 
 我们乘机人工早产走进绿色的马戏蓬,进门有较为严格的安全检查流程,已经习惯了生活中的各类安全检查,大巴、公园平时。

$(function () {

 
 外面看是三个大的蒙古包,里面摆放得宛在方今,中间的环形舞台四礼拜二面是演员职员人士的出入口,其余三面是观众席,正对着舞台的是新民主主义革命区域,为顶级观赏区,玫瑰金棕两边也正是舞台的侧面分别是蓝、金色观者席。

$(“#divid h5.head”).bind(“click”, function () {  //bind事件,当中蕴藏三个参数,第叁个为事件,第②个为事件

 
 我们买的80元底价票是在天蓝区域的最上一排,木制结构的观者席层次鲜明,我们落座后外甥情不自尽的打击的木制地板,马戏蓬里播放着高分贝的背景音乐,以至于外孙子紧张的心境表现的痛快淋漓。

alert($(this).text());

   
很准时开演了,第②个节目是由身着异域风情衣服的青春少女表演的热心的跳舞,精湛的舞挤,娥罗多姿的身材同盟着灯光舞台美术,一场能够绝伦的视觉盛宴打开马戏的序曲。

});

   
马戏表演离不开小丑,紧跟着一对小丑出场,他们除了上演,还担负着部分主持的剧中人物,频频跟观众互动,幽默,风趣、夸张的演艺让观者区内氛围不断,与此同时方便工作人士安插场景和安排道具。

$(“#divid h5.content”).css(“display”, “none”);    //css方法正是足以动态设置标签样式

   
动物们演出的节目让外孙子全身心,不时提示笔者拍照摄像,俏皮的家狗,淘气的猴子,温顺的羊,憨厚的小熊,凶猛的大虫狮子,健硕的骏马,带给大家一样杰出的演艺,令现场的小观者们尖叫连连,欢腾不已。

});

   
那么些节目当中穿插着舞蹈,杂技,魔术,带给大家一场能够的视觉盛宴,给长假生活注入强大的生命力,第5天我们看了马戏。

$(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 () {  //内容的展现与潜伏

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”>就让雨下下来 不用带伞 让一切完蛋 看被淋湿的心 多长期才会晒干</div>

</div>

<input type=”button” name=”name” value=”显示 ” id=”btnid” />

</body>

在上头的操作中大家新学习了bind事件,而bind事件是多个参数,第3个参数是事件的名字,例如:click,dbclick,mouseover等,第①个参数是data,即传送过来的轩然大波指标,第多个参数是一个方法,即用来处理处 理绑定的风浪函数那就是我们的一个分外的轩然大波;其余在这里还举例写了三个动画片中的例子,即文本新闻的显得或许隐藏,在还尚无读书show()和 hide()此前大家一般是规行矩步地点第三种方法来写的,定义二个bool类型的变量即可,那样写起来依然很简短的,可是在写展现隐藏时间拍卖按钮上边依然 蛮蛮烦的,所以在就学了show()和hide()后就总结许多了,正是直接能够隐蔽和出示。能够对照一下,显明在代码的拍卖上简单啦。

toggle事件和事件冒泡等

<script>

$(function () {

$(“input[type=button]”).toggle(function () {    //toggle四个参数都为事件,轮番调用

$(this).css(“backgroundColor”,”red”);

}, function () {

$(this).css(“backgroundColor”, “yellow”);

});

});

$(function () {

$(“div”).each(function () {

$(this).bind(“mouseup”, function (e) {

alert(e.pageX);   //输出鼠标的x方向的地点

alert(e.pageY);   //输出鼠标的y方向的任务

葡京国际娱乐下载,alert(e.which);   //输出鼠标的按键的选项,1为鼠标左键,2为轴心按键,3为鼠标右键

});

});

});

$(function () {

$(“#txt”).keydown(function () {

e.preventDefault();      //阻止a标签链接

alert(e.keyCode);           //键盘获取其ask码

});

});

$(function () {

$(“#ouuerdiv”).click(function () {

alert($(this).text());

});

$(“#div”).click(function () {

alert($(this).text());

});

$(“#innerdiv”).click(function () {          //在那边是写了三个事变的冒泡现象,组织冒泡可以应用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”>内部div</div></div></div>

<a href=”http://www.baidu.com” id=”a”>百度</a>

<textarea id=”txt” rows=”5″ cols=”5″>

</textarea>

</body> 

Toggle事件:模拟鼠标点击事件,当鼠标移动到成分上时触发第五个风云,当鼠标离开成分时接触第贰个事件。三个事件时期相互切换触发;此外还要说下事 件冒泡,事件冒泡其实简单的敞亮为:在一个页面上可以有七个事件,也得以三个成分相应一个轩然大波。像下面一样只要页面中存在多少个因素,当中1个div元素嵌 套在另多少个div成分中并且都绑定了二个click事件,那么当你点击内部中div成分时间,外部的div也会议及展览示,那正是事件冒泡。在那边需要注意的是都绑定了三个事变,不难想当然的觉得仅仅的里边发生click事件。

.移除事件和连接添加八个事件

<script>

$(function () {

$(“removeall”).click(function () {      

$(“#btn”).unbind();                //达成移除事件

});

$(“#btn”).bind(“click”, function () {          //能够一连添加几个事件

$(“#text”).append(“<p>笔者是首先个拉长的风浪</p>”)

})

.bind(“click”, function () {

$(“#text”).append(“<p>笔者是第2个增加的轩然大波</p>”)

})

.bind(“click”, function () {

$(“#text”).append(“<p>作者是第三个拉长的事件</p>”)

})

});

</script>

<body>

<button id=”btn”>单击小编吧</button><button id=”removeall”>删除全部的轩然大波</button>

<div id=”text”>div文本音信</div>

</body>

地方咱们上学了bind事件,就是加上叁个风云,而unbind正是移除事件,大家得以对照一下,嘿嘿,而针对三番五次添加四个事件其实便是当您添加玩七个事变后继续.bind添加事件即可。

.模拟事件

大家学习的上边的bind事件、click事件等一般都以经过单击按钮才能接触的事件,然而有时光,供给经过模拟用户操作,来达到单击的效劳,例如:在用户进入也买年后就触发click事件,而不须求用户去单击,那么我们就动用trigger()方法来成功模拟操作。

.一些其余的风云

<script>

$(function () {

$(“#btn”).click(function () {

//$(“#div”).hide(2000);        //在2秒内隐藏

//$(“#div”).show(3000);        //在2秒内显示

//$(“#div”).fadeIn(两千);      //增强成分的不光滑度,直至元素完全呈现

//$(“#div”).fadeOut(贰仟);     //降低元素的不反射率,直至成分完全消灭

$(“#btn”).toggle(function () { 

$(“div”).slideDown(三千);     //改变成分的中度,由上至下显得

$(this).val(“显示”)         

}, function () {

$(“div”).slideUp(两千);       //改变成分的冲天,由下至上减少隐藏

$(this).val(“隐藏”)

});

});

//$(“#btn”).click(function () {

//    $(“div”).fadeTo(600,0.2);       //fadeTo方法适用于在0.6s内反射率是0.2

//});

});

</script>

<body>

<div id=”div” style=”width:300px; height:300px;” >1234</div>

<input type=”button” name=”name” value=”操作动画” id=”btn” />

</body>

.动绘画艺术术

.多行文本框的行使-中度变化

<script src=”script/jquery-1.7.1.min.js”></script>

<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);  //在原始中度的底蕴上抓好100

}

});

$(“.smaller”).click(function () {  

if (comment.height() > 100) {

comment.height($(“#comment”).height() – 100);  //在原有中度的功底上跌落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: #700000;”>”><textarea rows=”8″ cols=”20″ id=”comment”>海海海海</textarea></div>

</form>

</body>

地点的操作完结了点击放大时间,textarea的惊人变高即面积变大,当点击收缩时间textarea的面积变小,即落实了动画片的作用。

.复选框应用

<script src=”script/jquery-1.7.1.min.js”></script>

<script>

$(function () {

$(“#checkall”).bind(“click”, function () {

$(“:checkbox”).each(function () {

$(this).attr(“checked”, “checked”);         //点击按钮时间需求全方位入选

});

});

$(“#checkno”).bind(“click”, function () {

$(“:checkbox”).attr(“checked”, false);    //点击按钮时间必要整个不选中

});

$(“#checkRev”).bind(“click”, function () {

$(“:checkbox”).each(function () {

if ($(this).attr(“checked”) == “checked”) {

$(this).attr(“checked”, false);

}

else {

$(this).attr(“checked”, true);   //点击按钮时间供给选中的排除,未当选的被入选

}

});

});

//或者:

$(this).attr(“checked”, !$(this).attr(“checked”));

});

</script>

<body>

<form>你喜欢的移动?<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>

在此处要求注意的是,判断复选框选中照旧不选中的状态,必须经过操纵成分的checked属性来达到目的,假诺属性checked为true,表达被选中,若是为false,则申明未被入选。

.下拉框的利用

<script src=”script/jquery-1.7.1.min.js”></script>

<script>

$(function () {

$(“#add”).click(function () {

var selectoption = $(“#select1 option:selected”);

selectoption.remove();

selectoption.appendTo(‘#select2’);    //把选中的项添加到左侧的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″>选项1</option><option value=”2″>选项2</option> <option value=”3″>选项3</option>

<option value=”4″>选项4</option><option value=”5″>选项5</option><option value=”6″>选项6</option>

<option value=”7″>选项7</option><option value=”8″>选项8</option><option value=”9″>选项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>

地方的操作是贯彻了在在右边点击选择的项,然后添加到左边的框中,能够一个三个的拉长,也足以整个2次性增进。

十一.表格的利用

<script src=”script/jquery-1.7.1.min.js”></script>

<style>

.even {

 

}

.odd {

background-color: #ffffee;

}

</style>

<script>

$(“#table tr:odd”).addClass(“odd”);          //选用索引为奇数的行数

$(“#table tr:even:not(:first)”).addClass(“even”);   //采取索引为偶数的不外乎索引为0的行数

$(“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″>前台设计组</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″>前台开发组</td></tr>

<tr class=”child2″><td>王五</td><td>男</td><td>青海毕尔巴鄂</td></tr>

<tr class=”child2″><td>赵六</td><td>男</td><td>湖北布里斯托</td></tr>

<tr class=”parent” id=”row3″><td colspan=”3″>后台开发组</td></tr>

<tr class=”child3″><td>孙七</td><td>男</td><td>福建苏州</td></tr>

<tr class=”child3″><td>周八</td><td>男</td><td>辽宁纽伦堡</td>

</tr>

</tbody>

</table>

</body>