JQuery中的事件以及动画

.bind事件

   
小美换了新的工作岗位,职位有所回升,薪给自然也涨了有些,拿着看上去还算光鲜的薪饷,但仔细一想,等比上升的工作时间长度,获得的时薪却是一样的,可能还少些,但趁着青春年少让祥和过的增多些总归是好事,只是别太累着。

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

 
 公司地处二环大旨,路上的时刻开销更加多,拥堵的上班路他选取了大巴,时间上固然有保持,但乘车经过太费事,下了客车还有非常大学一年级段步行,大热天实属正确。由俭到奢易,预计内心好强的他要适于一阵了,希望他能及早进入状态。

<script>

   
谈了办事时间长度接下来就是工作压力了,压力来源于七个方面,1是根源业务上的压力,新的商家,新的环境,新的行事情势都亟需投入更加多精力来熟知业务,2是长久加班带来的心尖压力。这么些历程中就供给学会排减压力,学会控制节奏,学会调节自个儿的工作处境。

$(function () {

   
天下未有免费的午餐,早餐也如出①辙都得收取工资,所谓的高薪都最后反映在个人交给上。近日几年的高薪行业网络算三个,加班都以数见不鲜,遭受搞活动,搞减价通宵都以习惯,尤其是电商,下班平常点走都不佳意思。

$(“#divid h伍.head”).bind(“click”, function () {  //bind事件,在那之中包括多少个参数,第四个为事件,首个为事件

   
据书上说近日刚发生不久的音讯,淘宝的数额总经理打羽毛球时猝死,近日间又刮起一阵爱惜健康的狂潮,确实得平衡工作跟符合规律的涉嫌,特别是漫长加班尤其令人瞩目适度的调节,毕竟健康是第一个人的。

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

 
 

});

$(“#divid h5.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事件是几个参数,第一个参数是事件的名字,例如:click,dbclick,mouseover等,第三个参数是data,即传送过来的事件指标,第9个参数是叁个艺术,即用来处理处 理绑定的风云函数那正是我们的三个特种的事件;此外在此地还举例写了四个卡通中的例子,即文本消息的来得只怕隐藏,在还不曾读书show()和 hide()以前大家1般是遵从上面第贰种方法来写的,定义2个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为鼠标左键,贰为轴心按键,三为鼠标右键

});

});

});

$(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 () {          //在此地是写了1个事件的冒泡现象,协会冒泡能够应用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个风浪,当鼠标离开成分时接触第一个事件。七个事件之间相互切换触发;其它还要说下事 件冒泡,事件冒泡其实不难的通晓为:在八个页面上能够有多少个事件,也得以五个要素相应三个事件。像上边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>作者是第叁个增长的轩然大波</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(三千);        //在贰秒内隐蔽

//$(“#div”).show(三千);        //在贰秒内显示

//$(“#div”).fadeIn(3000);      //增强成分的不折射率,直至成分完全显示

//$(“#div”).fadeOut(两千);     //下落元素的不反射率,直至成分完全消失

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

$(“div”).slideDown(两千);     //改变成分的可观,由上至下显得

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

}, function () {

$(“div”).slideUp(三千);       //改变成分的莫斯中国科学技术大学学,由下至上减弱隐藏

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

});

});

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

//    $(“div”).fadeTo(600,0.二);       //fadeTo方法适用于在0.六s内折射率是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);  //在原始中度的功底上增强拾0

}

});

$(“.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=”捌” 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次性增进。

十1.表格的选用

<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=”3″>前台设计组</td></tr>

<tr class=”child一”><td>张叁</td><td>男</td><td>江西格勒诺布尔</td></tr>

<tr class=”child一”><td>李四</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>赵6</td><td>男</td><td>湖南奥兰多</td></tr>

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

<tr class=”child3″><td>孙7</td><td>男</td><td>广西塞内加尔达喀尔</td></tr>

<tr class=”child三”><td>周八</td><td>男</td><td>湖北毕尔巴鄂</td>

</tr>

</tbody>

</table>

</body>