脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQuery中的事件及动画用法实例教程,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例讲述了JQuery中的事件及动画用法。分享给大家供大家参考。具体分析如下:
1.bind事件
代码如下:
<script src="script/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$("#pid h5.head").bind("click", function () { //bind事件,其中包含三个参数,第一个为事件,第二个为事件
alert($(this).text());
});
$("#pid 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 = $("#pid .content");
if (content.is(":visible")) {
content.hide();
$(this).val("显示");
}
else {
content.show();
$(this).val("隐藏");
}
});
});
</script>
<body>
<p id="pid">
<h5 class="head">Rocky?</h5>
<p class="content">就让雨下下来 不用带伞 让一切完蛋 看被淋湿的心 多久才会晒干</p>
</p>
<input type="button" name="name" value="显示 " id="btnid" />
</body>
2.toggle事件和事件冒泡
代码如下:
<script>
$(function () {
$("input[type=button]").toggle(function () { //toggle两个参数都为事件,轮番调用
$(this).css("backgroundColor","red");
}, function () {
$(this).css("backgroundColor", "yellow");
});
});
$(function () {
$("p").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 () {
$("#ouuerp").click(function () {
alert($(this).text());
});
$("#p").click(function () {
alert($(this).text());
});
$("#innerp").click(function () { //在这里是写了一个事件的冒泡现象,组织冒泡可以使用preventDefault或者precentDefault
alert($(this).text());
});
})
</script>
<body>
<input type="button" name="btnname" value="按钮" id="btn"/>
<p id="ouuerp"> 外部p<p id="p">中部p<p id="innerp">内部p</p></p></p>
<a href="http://www.baidu.com" id="a">百度</a>
<textarea id="txt" rows="5" cols="5">
</textarea>
</body>
3.移除事件和连续添加多个事件
代码如下:
<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>
<p id="text">p文本信息</p>
</body>
4.模拟事件
我们学习的上面的bind事件、click事件等一般都是通过单击按钮才能触发的事件,但是有时间,需要通过模拟用户操作,来达到单击的效果,例如:在用户进入也买年后就触发click事件,而不需要用户去单击,那么我们就使用trigger()方法来完成模拟操作。
5.一些其他的事件
代码如下:
<script>
$(function () {
$("#btn").click(function () {
//$("#p").hide(2000); //在2秒内隐藏
//$("#p").show(2000); //在2秒内显示
//$("#p").fadeIn(2000); //增强元素的不透明度,直至元素完全显示
//$("#p").fadeOut(2000); //降低元素的不透明度,直至元素完全消失
$("#btn").toggle(function () {
$("p").slideDown(2000); //改变元素的高度,由上至下显示
$(this).val("显示")
}, function () {
$("p").slideUp(2000); //改变元素的高度,由下至上缩短隐藏
$(this).val("隐藏")
});
});
//$("#btn").click(function () {
// $("p").fadeTo(600,0.2); //fadeTo方法适用于在0.6s内透明度是0.2
//});
});
</script>
<body>
<p id="p" style="width:300px; height:300px;" >1234</p>
<input type="button" name="name" value="操作动画" id="btn" />
</body>
6.多行文本框的应用-高度变化
代码如下:
<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">
<p class="msg"><span class="bigger">放大</span><span class="smaller">缩小</span></p>
<p style="" data-mce-style="color: #800000;">"><textarea rows="8" cols="20" id="comment">海海海海</textarea></p>
</form>
</body>
7.复选框应用
代码如下:
<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>
8.下拉框的应用
代码如下:
<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>
<p 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>
<p>
<span id="add">添加到右边</span>
<span id="addAll">全部添加到右边</span>
</p>
</p>
<p class="center" style="float:right">
<select multiple="multiple" id="select2" style="width: 100px; height: 160px" >
</select>
</p>
9.表格的应用
代码如下:
<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>
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-JQuery中的事件及动画用法实例教程全部内容,希望文章能够帮你解决javascript代码实例教程-JQuery中的事件及动画用法实例教程所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。