JQuery中的事件以及动画

.bind事件

   
小美换了新的工作岗位,职位有所上涨,薪俸自然也涨了有的,拿着看上去还算光鲜的薪饷,但仔细壹想,等比上涨的办事时长,得到的时薪却是一样的,只怕还少些,但趁着青春让自个儿过的加码些总归是好事,只是别太累着。

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

 
 公司高居2环中央,路上的光阴开支更加多,拥堵的上班路他挑选了地铁,时间上纵然有有限支撑,但乘车经过太难为,下了客车还有不小学一年级段步行,大热天实属不易。由俭到奢易,推测内心好强的她要适应一阵了,希望她能尽快进入状态。

<script>

   
谈了劳作时间长度接下来就是工作压力了,压力来源于多个方面,一是根源业务上的压力,新的商号,新的环境,新的行事格局都亟需投入越来越多精力来熟练业务,贰是深切加班带来的心尖压力。这一个过程中就需求学会排减压力,学会控制节奏,学会调节自身的工作意况。

$(function () {

   
天下未有免费的午饭,早餐也1如既往都得收取费用,所谓的高薪都最后反映在民用交给上。近日几年的高薪行业互连网算二个,加班都以无独有偶,境遇搞活动,搞减价通宵皆以习惯,尤其是电商,下班寻常点走都不佳意思。

$(“#divid h伍.head”).bind(“click”, function () {  //bind事件,在那之中含有三个参数,第二个为事件,第贰个为事件

   
传说近日刚发出不久的音信,天猫的数量主任打羽球时猝死,一时半刻间又刮起一阵关爱健康的热潮,确实得平衡工作跟平常的涉及,尤其是短时间加班尤其令人瞩目适度的调节和测试,毕竟健康是第三个人的。

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

 
 

});

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

});

$(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等,第2个参数是data,即传送过来的轩然大波目标,第多个参数是贰个格局,即用来处理处 理绑定的事件函数这正是大家的贰个特别的风云;别的在那边还举例写了2个动画中的例子,即文本新闻的显得或然隐藏,在还并未有上学show()和 hide()从前大家一般是遵从地方第3种方式来写的,定义1个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);   //输出鼠标的按键的抉择,一为鼠标左键,2为轴心按键,三为鼠标右键

});

});

});

$(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 () {          //在此地是写了3个事件的冒泡现象,组织冒泡能够应用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事件:模拟鼠标点击事件,当鼠标移动到成分上时触发第伍个事变,当鼠标离开成分时接触第二个事件。多个事件期间互相切换触发;别的还要说下事 件冒泡,事件冒泡其实简单的接头为:在3个页面上得以有四个事件,也能够五个因素相应五个风浪。像上边1样只要页面中设有四个成分,当中3个div成分嵌 套在另二个div成分中还要都绑定了3个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>小编是第3个增加的事件</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事件等1般都以透过单击按钮才能接触的事件,可是有时光,需求通过模拟用户操作,来达到单击的意义,例如:在用户进入也买年后就触发click事件,而不必要用户去单击,那么大家就应用trigger()方法来成功臣模范拟操作。

.1些别样的风浪

<script>

$(function () {

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

//$(“#div”).hide(三千);        //在2秒内躲藏

//$(“#div”).show(3000);        //在二秒内展现

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

//$(“#div”).fadeOut(三千);     //降低成分的不折射率,直至成分完全消失

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

$(“div”).slideDown(2000);     //改变成分的惊人,由上至下显得

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

}, function () {

$(“div”).slideUp(三千);       //改变成分的高度,由下至上收缩隐藏

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

});

});

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

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

//});

});

</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() + 十0);  //在原本高度的底子上加强拾0

}

});

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

if (comment.height() > 100) {

comment.height($(“#comment”).height() – 十0);  //在原来中度的根基上跌落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: #七千00;”>”><textarea rows=”捌” 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(‘#select二’);    //把选中的项添加到左边的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>

地点的操作是促成了在在左边点击选用的项,然后添加到左边的框中,能够贰个一个的丰裕,也能够全方位一回性增进。

十一.表格的运用

<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=”row壹”><td colspan=”三”>前台设计组</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=”三”>前台开发组</td></tr>

<tr class=”child2″><td>王5</td><td>男</td><td>广西弗罗茨瓦夫</td></tr>

<tr class=”child贰”><td>赵6</td><td>男</td><td>黑龙江夏洛特</td></tr>

<tr class=”parent” id=”row三”><td colspan=”叁”>后台开发组</td></tr>

<tr class=”child三”><td>孙七</td><td>男</td><td>山东哈博罗内</td></tr>

<tr class=”child三”><td>周8</td><td>男</td><td>沧澜江马赛</td>

</tr>

</tbody>

</table>

</body>