JQuery中的事件及动画用法实例
2023-06-13 09:15:42 时间
本文实例讲述了JQuery中的事件及动画用法。分享给大家供大家参考。具体分析如下：
1.bind事件
<script>
$(function(){
$("#dividh5.head").bind("click",function(){ //bind事件，其中包含三个参数，第一个为事件，第二个为事件
alert($(this).text());
});
$("#dividh5.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(){ //内容的显示与隐藏
varcontent=$("#divid.content");
if(content.is(":visible")){
content.hide();
$(this).val("显示");
}
else{
content.show();
$(this).val("隐藏");
}
});
});
</script>
<body>
<divid="divid">
<h5class="head">Rocky?</h5>
<divclass="content">就让雨下下来不用带伞让一切完蛋看被淋湿的心多久才会晒干</div>
</div>
<inputtype="button"name="name"value="显示"id="btnid"/>
</body>
在上面的操作中我们新学习了bind事件，而bind事件是三个参数，第一个参数是事件的名字，例如：click，dbclick，mouseover等，第二个参数是data，即传递过来的事件对象，第三个参数是一个方法，即用来处理处理绑定的事件函数这就是我们的一个特殊的事件；另外在这里还举例写了一个动画中的例子，即文本信息的显示或者隐藏，在还没有学习show（）和hide（）之前我们一般是按照上面第一种方式来写的，定义一个bool类型的变量即可，这样写起来还是很简单的，但是在写显示隐藏时间处理按钮上面还是蛮蛮烦的，所以在学习了show（）和hide（）后就简单许多了，就是直接可以隐藏和显示。可以对比一下，显然在代码的处理上简单啦。
2.toggle事件和事件冒泡
$(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>
<inputtype="button"name="btnname"value="按钮"id="btn"/>
<divid="ouuerdiv">外部div<divid="div">中部div<divid="innerdiv">内部div</div></div></div>
<ahref="http://www.baidu.com"id="a">百度</a>
<textareaid="txt"rows="5"cols="5">
</textarea>
</body>
Toggle事件：模拟鼠标点击事件，当鼠标移动到元素上时触发第一个事件，当鼠标离开元素时触发第二个事件。两个事件之间相互切换触发；另外还要说下事件冒泡，事件冒泡其实简单的理解为：在一个页面上可以有多个事件，也可以多个元素相应一个事件。像上面一样假设页面中存在两个元素，其中一个div元素嵌套在另一个div元素中并且都绑定了一个click事件，那么当你点击内部中div元素时间，外部的div也会显示，这就是事件冒泡。在这里需要注意的是都绑定了一个事件，容易想当然的认为仅仅的内部发生click事件。
3.移除事件和连续添加多个事件
$(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>
<buttonid="btn">单击我吧</button><buttonid="removeall">删除所有的事件</button>
<divid="text">div文本信息</div>
</body>
上面我们学习了bind事件，就是添加一个事件，而unbind就是移除事件，我们可以对比一下，嘿嘿，而针对连续添加多个事件其实就是当你添加玩一个事件后继续.bind添加事件即可。
4.模拟事件
我们学习的上面的bind事件、click事件等一般都是通过单击按钮才能触发的事件，但是有时间，需要通过模拟用户操作，来达到单击的效果，例如：在用户进入也买年后就触发click事件，而不需要用户去单击，那么我们就使用trigger（）方法来完成模拟操作。
5.一些其他的事件
$(function(){
$("#btn").click(function(){
//$("#div").hide(2000); //在2秒内隐藏
//$("#div").show(2000); //在2秒内显示
//$("#div").fadeIn(2000); //增强元素的不透明度，直至元素完全显示
//$("#div").fadeOut(2000); //降低元素的不透明度，直至元素完全消失
$("#btn").toggle(function(){
$("div").slideDown(2000); //改变元素的高度，由上至下显示
$(this).val("显示")
},function(){
$("div").slideUp(2000); //改变元素的高度，由下至上缩短隐藏
$(this).val("隐藏")
});
});
//$("#btn").click(function(){
// $("div").fadeTo(600,0.2); //fadeTo方法适用于在0.6s内透明度是0.2
//});
});
</script>
<body>
<divid="div"style="width:300px;height:300px;">1234</div>
<inputtype="button"name="name"value="操作动画"id="btn"/>
</body>
动画方法
6.多行文本框的应用-高度变化
<style>
input:focus,textarea:focus{
border:1pxsolid#f00;
}
</style>
<script>
$(function(){
varcomment=$("#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>
<formaction="#"method="post"id="regform">
<divclass="msg"><spanclass="bigger">放大</span><spanclass="smaller">缩小</span></div>
<divstyle=""data-mce-style="color:#800000;">"><textarearows="8"cols="20"id="comment">海海海海</textarea></div>
</form>
</body>
上面的操作实现了点击放大时间，textarea的高度变高即面积变大，当点击缩小时间textarea的面积变小，即实现了动画的效果。
7.复选框应用
<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/>
<inputtype="checkbox"name="names"value="足球" />足球<br/>
<inputtype="checkbox"name="names"value="篮球"/>篮球<br/>
<inputtype="checkbox"name="names"value="排球"/>排球<br/>
<inputtype="checkbox"name="names"value="羽毛球"/>羽毛球<br/>
<inputtype="button"id="checkall"value="全选"/><br/>
<inputtype="button"id="checkno"value="全不选"/><br/>
<inputtype="button"id="checkRev"value="反选"/><br/>
<inputtype="button"name="send"value="提交"/><br/>
</form>
</body>
在这里需要注意的是，判断复选框选中或者不选中的状态，必须通过控制元素的checked属性来达到目的，如果属性checked为true，说明被选中，如果为false，则说明未被选中。
8.下拉框的应用
<script>
$(function(){
$("#add").click(function(){
varselectoption=$("#select1option:selected");
selectoption.remove();
selectoption.appendTo("#select2"); //把选中的项添加到右边的aelect框中
});
$("#addAll").bind("click",function(){
varoptions=$("#select1option");
options.appendTo("#select2");
});
});
</script>
<body>
<divclass="center">
<selectmultiple="multiple"id="select1"style="width:100px;height:160px">
<optionvalue="1">选项1</option><optionvalue="2">选项2</option><optionvalue="3">选项3</option>
<optionvalue="4">选项4</option><optionvalue="5">选项5</option><optionvalue="6">选项6</option>
<optionvalue="7">选项7</option><optionvalue="8">选项8</option><optionvalue="9">选项9</option>
</select>
<div>
<spanid="add">添加到右边</span>
<spanid="addAll">全部添加到右边</span>
</div>
</div>
<divclass="center"style="float:right">
<selectmultiple="multiple"id="select2"style="width:100px;height:160px">
</select>
</div>
上面的操作是实现了在在左边点击选择的项，然后添加到右边的框中，可以一个一个的添加，也可以全部一次性添加。
9.表格的应用
<style>
.even{
}
.odd{
background-color:#ffffee;
}
</style>
<script>
$("#tabletr:odd").addClass("odd"); //选取索引为奇数的行数
$("#tabletr:even:not(:first)").addClass("even"); //选取索引为偶数的除了索引为0的行数
$("tabletr").each(function(){
$(this).click(function(){
$(this).css("backgroundColor","red").siblings().css("backgroundColor","");
});
})
</script>
<body>
<tableborder="1"id="table">
<thead><tr><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead><tbody>
<trclass="parent"id="row1"><tdcolspan="3">前台设计组</td></tr>
<trclass="child1"><td>张三</td><td>男</td><td>浙江宁波</td></tr>
<trclass="child1"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<trclass="parent"id="row2"><tdcolspan="3">前台开发组</td></tr>
<trclass="child2"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<trclass="child2"><td>赵六</td><td>男</td><td>湖南长沙</td></tr>
<trclass="parent"id="row3"><tdcolspan="3">后台开发组</td></tr>
<trclass="child3"><td>孙七</td><td>男</td><td>湖南长沙</td></tr>
<trclass="child3"><td>周八</td><td>男</td><td>湖南长沙</td>
</tr>
</tbody>
</table>
</body>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
- jQuery 选择器基本使用方法大全详解编程语言
- jQuery使用手册之事件处理
- 基于jquery的loading效果实现代码
- jquery.cookie.js操作cookie实现记住密码功能的实现代码
- 利用jQuery操作对象数组的实现代码
- jQuery过滤not()与filter()实例代码
- Jquery插件写法笔记整理
- jQuery实现表头固定效果的实例代码
- jquery实现的可隐藏重现的靠边悬浮层实例代码
- Jquery加载时从后台读取数据绑定到dropdownList实例
- 用jquery生成二级菜单的实例代码
- JQuery获取json数据$.getJSON方法的实例代码
- jquery层次选择器siblings与nextAll的区别介绍
- Jquery实现显示和隐藏的4种简单方式
- jquery()函数的三种语法介绍
- 简单的Jquery遮罩层代码实例
- jquery实现手风琴效果实例代码
- 基于jquery异步传输json数据格式实例代码
- jquery插件jTimer(jquery定时器)使用方法
- jquery选择器排除某个DOM元素的方法（实例演示）
- jQuery顶部导航跟随滚动条滚动固定浮动在顶部
- jquery处理json对象
- JQuery动画与特效实例分析
- jQuery级联操作绑定事件实例