`

jQuery-toggle()与toggle(fn,fn)的用法

阅读更多
toggle()方法的效果就是切换元素的可见状态;即如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
例子:
$(function(){
$("#content").toggle();
})
<p id="content" style="display:none">这里原来是隐藏看不到的</p>
当有点击事件时,另一区域可见状态切换可以这么写:
$(document).ready(function(){
  $("#test").click(
  function(){
   $("#content").toggle();
  }
  );
});
<p id="test"><input type="button" value="点击这里" /></p>
<p id="content" style="display:none">当点击上面的“点击这里“字样,这里的内容将隐藏与显示之间切换</p>
下面说一下toggle(fn,fn)方法的使用,效果是:每次点击后依次调用函数;如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发调用函数的功能,不需要另外.click(fn)了。
例子:
$(document).ready(function(){
    $("#test").toggle(function(){
     $("#content").hide('slow');
    },function(){
     $("#content").show('fast');
   });
});
<p id="test"><input type="button" value="点击这里" /></p>
<p id="content" style="display:none">当点击上面的“点击这里“字样,这里的内容将隐藏与显示之间切换</p>

对不起,您的文章发表失败。
文章内容包含不合适内容,请检查

尼玛啊度娘,老子随便发表一篇文章你都河蟹啊
分享到:
评论

相关推荐

    jQuery树型表格jquery-treetable

    jQuery树型表格,如其名所示,是一...通过以上介绍,你可以了解到jQuery-treetable的基本原理和使用方法,从而在自己的项目中实现树型表格的功能。这个插件为网页开发提供了强大的工具,使数据呈现更加直观、易于管理。

    jQuery-js学校文档

    2. **jQuery对象与DOM对象**:jQuery对象是jQuery库处理的特殊对象,可以执行jQuery方法。DOM对象则是JavaScript对HTML元素的表示。两者可以通过$.fn.extend()进行扩展。 3. **选择器**:jQuery提供了丰富的选择器...

    Jquery-Cheat-Sheet-1.2

    - **格式化插件**:`$.fn`用于定义插件,插件可以以 `{name: plugin}` 的形式注册在jQuery的函数原型上,使所有jQuery对象都可访问这些插件方法。 #### 2. HTML属性与CSS样式 - **HTML属性设置**:可以使用`attr...

    jquery-1.2-UnCompressed.rar

    1. 元素操作:jQuery提供了$(selector)构造函数来选取元素,$.fn.extend()用于扩展jQuery对象的方法。例如,`$("#element").html()`用于获取或设置元素的HTML内容。 2. 集合操作:jQuery对象可以看作元素集合,支持...

    jQuery-1.6-api

    - `$.fn.extend()` 用于扩展jQuery对象的方法,使得所有jQuery实例都可以使用这些方法。 - `$.extend()` 用于合并两个或更多的对象,将源对象的属性复制到目标对象上。 2. **attr() 和 prop() 的分离** - 在...

    jquery-1.2.3.zip

    $.fn.extend()方法允许开发者扩展jQuery对象,创建自定义的插件。$.each()用于遍历数组或对象,是实现迭代操作的重要工具。$.get()和$.post()则提供了方便的Ajax请求接口,使得与服务器的异步通信变得简单易行。 ...

    第三章-JQUERY-制作动画与特效

    1. 使用`.fn.extend()`方法添加新方法 2. 在插件内部获取元素集合 3. 调用其他JQUERY方法 九、示例代码 在学习过程中,实践是关键。你可以在给出的压缩包文件"jquery_ch03"中找到示例代码,这些代码展示了上述知识...

    jquery-api-1.7

    jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本篇主要针对jQuery 1.7版本的API进行深入解析,帮助开发者更好地理解和应用这个强大的工具。 一、...

    jquery-1.6-api

    通过$.fn.extend(),开发者可以创建新的jQuery方法,丰富jQuery的功能。jQuery UI和众多第三方插件都是基于此机制实现的,为开发者提供了更多的选择。 总结 jQuery 1.6 API为前端开发提供了强大且易用的工具箱,...

    jquery-plugin-skeletons:jQuery 插件骨架

    5. **数据存储**:为了保持状态,jQuery 插件可以使用 `.data()` 方法存储关于选定元素的信息。 6. **链式调用**:为了保持 jQuery 的链式调用风格,需要返回 `this`,以便继续调用其他 jQuery 或插件方法。 ### ...

    jquery1.11.0手册

    jQuery.fn.extend(object) jQuery.extend(object) 多库共存 jQuery.noConflict([ex]) 属性 属性 attr(name|pro|key,val|fn) removeAttr(name) prop(n|p|k,v|f) removeProp(name) CSS 类 addClass(class...

    jquery不支持toggle()高(新)版本的问题解决

    这个自定义函数通过jQuery的fn对象扩展了toggle方法。它首先检查提供的参数是否是函数类型,如果不是,就调用旧的toggle方法。如果是函数类型,它会继续创建一个新的事件处理器函数toggler,该函数内部会根据之前...

    jquery1.8.3 + 中文说明文档

    3. 事件处理:jQuery简化了事件绑定,`click(fn)`用于绑定点击事件,`bind(event,fn)`可以绑定多种事件,`live()`(在1.9版本后被移除,可用`on()`替代)实现事件冒泡,`delegate()`则实现了事件委托。 二、jQuery ...

    jquery 1.4.1 中文文档+1.4.2.js 天涯浪子

    - 对于非英语背景的开发者,中文文档提供了便利,能够更直观地理解jQuery的使用方法和原理。 - 文档详细解释了每个函数的用途、参数和返回值,有助于快速学习和查找问题解决方案。 总结,jQuery 1.4.1的中文文档...

    jquery电子文档chm

    toggle(fn,fn) 每次点击时切换要调用的函数。 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind...

    JQuery入门——事件切换之toggle()方法应用介绍

    1、在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,…]),其中fn、fn2、fn3、fn4等函数依次调用。 2、示例代码: 代码如下:&...

    jQuery技术手册

    - **版本信息**: 如`jQuery.fn.jquery`等。 **8.12 jQuery参考手册-属性** - **获取/设置属性**: 如`attr()`, `prop()`, `data()`等。 - **操作属性**: 包括`removeAttr()`, `prop()`, `data()`等。 综上所述,...

    jquery弹出悬浮插件webui-popover特效源码.zip

    《jQuery弹出悬浮插件WebUI-...通过深入理解其工作原理和使用方法,开发者能够更高效地创建出富有吸引力和用户体验良好的网页应用。无论你是初学者还是经验丰富的开发者,WebUI-Popover都值得你在项目中尝试和掌握。

    jquery-source-code-analysis:jquery源码分析-jquery source code

    例如,$.fn(即$.prototype)是jQuery对象的原型,其中定义的方法实际上是挂载到jQuery实例上的。$.extend()方法用于对象的扩展和合并,这是JavaScript面向对象编程的常用技巧。 值得注意的是,jQuery源码中的模块...

    jquery帮助文档--jquery帮助文档

    1. **基本方法**:`$(selector)`用于选取元素,`$(function() {...})`等同于`$(document).ready()`,`$.fn.extend()`用于扩展jQuery对象。 2. **属性操作**:`attr()`用于获取或设置元素属性,`prop()`用于处理DOM...

Global site tag (gtag.js) - Google Analytics