jQuery的slideToggle方法实例
<title></title>
<style type="text/css">
.imgclass{ width:300px; height:300px; border:solid 1px red;}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').bind('click', function () {
$('img').slideUp(2000);
})
$('#Button2').bind('click', function () {
$('img').slideDown(2000);
})
$('#Button3').bind('click', function () {
$('img').slideToggle(2000);
})
})
</script>
</head>
<body>
<div>
<div>
<input id="Button1" type="button" value="上拉" /><input id="Button2" type="button" value="下拉" /><input id="Button3" type="button" value="自动上拉下拉" /></div>
<div><img src="images/1.jpg" class="imgclass"/></div>
</div>
</body>
相关推荐
-
jQuery的slideToggle方法实例
复制代码 代码如下: <title></title> <style type="text/css"> .imgclass{ width:300px; height:300px; border:solid 1px red;} </style> <script src="jquery-1.9.1.js" type="text/javascript"></scri
-
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
1.当我们用$符号直接调用的方法.在jQuery内部是如何封装的呢?有没有好奇心? // jQuery.extend 的方法 是绑定在 $ 上面的. jQuery.extend( { //expando 用于决定当前页面的唯一性. /\D/ 非数字.其实就是去掉小数点. expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ), // Assume jQuery is ready wit
-
各种选择框jQuery的选中方法(实例讲解)
select下拉列表的选中方法是:$("slect option:eq(1)").attr("selected",true);//选中第二个option chekbox的选中方法:$("[value=check1"]:checkbox).attr("checked",true); radio的选中方法:$("[value=radio2"]:radio).attr("checked",tr
-
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参
-
js实现jquery的offset()方法实例
本文实例讲述了js实现jquery的offset()方法.分享给大家供大家参考.具体分析如下: 用过jQuery的offset()的同学都知道offset().top或offset().left很方便地取得元素相对于整个页面的偏移. 而在js里,没有这样直接的方法,节点的属性offsetTop可以获得该节点相对于父节点的相对偏移,但不能直接获得其绝对偏移,我们可用节点逐层递归向上来相加offsetTop来获得绝对偏移. 复制代码 代码如下: function getOffset(Node, of
-
在JavaScript中重写jQuery对象的方法实例教程
jQuery是一个款非常优秀的类库,它给我们解决了很多的客户端编程,但是任何东西都不是万能的,当它不能满足我们的需求时我们就需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:比如我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" val
-
jQuery操作cookie方法实例教程
本文实例讲述了jQuery操作cookie的方法.分享给大家供大家参考.具体方法如下: 先来看看jq.cookie的aip 写入cookie 复制代码 代码如下: $.cookie("this-cookie","this-value",{ expires:10,//有效日期 path:"/",//cookie的路 径 domanin: //cookie的域名 secure:true //true,cookie
-
Jquery $.map使用方法实例详解
$.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回. 注意: 1. 在jQuery 1.6 之前,该函数只支持遍历数组:从 1.6 开始,该函数也支持遍历对象. 2. map()还会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名. 3. 该函数返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中. $.map(data,function(item,i
-
jQuery中ajax - get() 方法实例详解
在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul
-
jQuery中die()方法用法实例
本文实例讲述了jQuery中die()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除所有通过live()方法向指定元素添加的一个或多个事件处理程序. 语法结构: 复制代码 代码如下: $(selector).die(type,function) 参数列表: 参数 描述 type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值. function 定义当事件发生时运行的函数. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html>
随机推荐
- asp.net中页面显示当前系统时间附图
- Golang编程实现删除字符串中出现次数最少字符的方法
- js用正则表达式来验证表单(比较齐全的资源)
- Access使用查询--1.1. 用选择查询建立计算字段
- .htaccess rewrite 规则详细说明
- DOS批处理高级教程 第五章 set命令详解
- 详解mybatis foreach collection示例
- 浅述python中argsort()函数的实例用法
- Yii调试查看执行SQL语句的方法
- PHP实现的一致性哈希算法完整实例
- Android 密码 显示与隐藏功能实例
- JS组件系列之使用HTML标签的data属性初始化JS组件
- 详解Linux中搭建常用服务器
- Javascript核心读书有感之表达式和运算符
- Java中对List集合的常用操作详解
- 深入剖析Android消息机制原理
- 解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
- 搜索引擎对关键词作弊判断方法揭密
- 解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
- python动态视频下载器的实现方法