.bind事件

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

<script>

$(function () {

$("#divid h5.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，即传递过来的事件对象，第三个参数是一个方法，即用来处理处 理绑定的事件函数这就是我们的一个特殊的事件；另外在这里还举例写了一个动画中的例子，即文本信息的显示或者隐藏，在还没有学习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事件：模拟鼠标点击事件，当鼠标移动到元素上时触发第一个事件，当鼠标离开元素时触发第二个事件。两个事件之间相互切换触发；另外还要说下事 件冒泡，事件冒泡其实简单的理解为：在一个页面上可以有多个事件，也可以多个元素相应一个事件。像上面一样假设页面中存在两个元素，其中一个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(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>

<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: #800000;">"><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>

上面的操作是实现了在在左边点击选择的项，然后添加到右边的框中，可以一个一个的添加，也可以全部一次性添加。

十一.表格的应用

<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>

JQuery中的事件以及动画的更多相关文章

  1. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  2. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  3. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  4. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  5. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  6. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  7. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  8. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  9. 第4章 jQuery中的事件和动画

    4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...

  10. 第3章 jquery中的事件和动画

    一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...

随机推荐

  1. WebBrowser控件应用：弹出新窗体和关闭窗口

    缘起:上次写了一个<WebBrowser控件的简单应用2>,提到了在NewWindow事件中打开新窗口的例子.有网友“队长 ”提出那个事件得到的参数是本页面的,而不是新页面的,经过测试,果 ...

  2. Scala模式匹配和类型系统

    1.模式匹配比java中的switch case强大很多,除了值,类型,集合等进行匹配,最常见的Case class进行匹配,Master.scala有大量的模式匹配. Case "_&qu ...

  3. tomcat报警告 An attempt was made to authenticate the locked user

    有好多这样的警报怪怪的,一分钟抛一次,大概抛了10分钟,停止 有 Anattempt was made to authenticate the locked user "root" ...

  4. 【USACO】

    Among the large Wisconsin cattle ranchers, it is customary to brand cows with serial numbers to plea ...

  5. C# 字符流打印类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  6. Android微信SDK API 调用教程

     最近一直在调用微信的API,却发现一直调用不成功,纠结了好久,各方面找教程,找官方,官方里的文档也只是写得很模糊,说是按三步走. 1.申请App_ID 2.填写包名3. 获取程序签名的md5值, 这 ...

  7. Linux磁盘占用100%解决方法

    /opt分区被web日志堆满了,导致一些服务无法正常运行,于是rm -fr掉这些日志(近11GB),但是服务仍没有恢复正常,用df -hT看,该分区占用还是100%: [root@anjing opt ...

  8. [转]JavaScript 的性能优化：加载和执行

    原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化: ...

  9. PhpStorm 获取注册码

    另一种方法是:直接用浏览器打开 http://idea.lanyus.com/ ,点击页面中的“获得注册码”,然后在注册时切换至Activation Code选项,输入获得的注册码一长串字符串,便可以 ...

  10. spring事务传播属性与隔离级别

    一.Propagation (事务的传播属性) Propagation : key属性确定代理应该给哪个方法增加事务行为.这样的属性最重要的部份是传播行为. 有以下选项可供使用: PROPAGATIO ...