zepto--toggle函数 - 相关文章

关于jQuery中toggle()函数的使用

今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续执行.. 其中试了很多种方法都不行,最后通过读jquery的toggle函数实现了. //这样写可以 $(".nav").toggle(function(){ $(".content").slideToggle(); }); //这样写不可以 $(".nav&…

jquery1.9以上版本如何使用toggle函数

toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 但是在1.9及以上的版本中已经删除了该功能. 感觉这个功能还是不错的,以下来自网上搜集,可以在js中加入以下这段代码,然后就可以给元素绑定toggle功能. $.fn.toggle = function( fn, fn2 ) { var args = arguments,guid = fn.guid || $.guid++,i=0, toggle = function( event ) { var…

toggle函数

$(function() { $('.love').toggle(function() { $(this).attr("src", "images/loved.png"); }, function() { $(this).attr("src", "images/love.png"); }) $(".music").toggle(function() { document.getElementById('mu…

zepto - toggle

<input type="text" value="123456789" /> <div id="too_long">toggle</div> var input = $('input[type=text]'); $('#too_long').toggle(input.val().length < 5);…

jquery的toggle()函数，显示/隐藏交替

<!DOCTYPE html> <html lang="en"> <head> <script src="jquery.js"></script> <meta charset="UTF-8"> <title>lfj</title> <style> .one { background-color:yellow; } .two { backgr…

zepto学习之路--核心函数$()的实现

$()可以说是jquery的精华了,为dom操作带来了极大的灵活和方便.zepto号称“移动版的jquery”,那么它是怎么来实现这个核心函数呢?我们来详细探讨下. 1.首先,我们看下zepto中它是怎么定义的: $ = function(selector, context) { return zepto.init(selector, context) } 这里很明显,如果你试图通过S(“”)来获取一个dom元素,zept会将其封装为一个zepto对象返回给你,那么zepto.init是如何实现…

zepto源码--核心方法6（显示隐藏）--学习笔记

在不引入zepto插件模块fx_metho其他ds的情况下,zepto默认的显示隐藏的函数只有show, hide, toggle,这里解释有个前提条件,就是没有引入zepto的fx_methods插件模块 show 相比较于jQuery的show函数,这里真的很简单了,没有传入任何参数,如果在标签上以内联样式的形式存在style="display:none",直接将该内联样式的none改为空,如果不是内联样式,则通过获取计算后的样式,getComputedStyle(this, ''…

Zepto源码解读

/*******************************************************************************Zepto核心和dom操作********************************************************************************/ ;var Zepto = (function(){ var undefined,key,$,classList,emptyArray = [],sli…

使用toggle()方法进行显示隐藏

这是一个示例: <html> <head> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(&q…

学习zepto.js(Hello World)

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名DOM操作库,由于本人刚接触这个,但又不想单纯的说如何使用,所以本人会按照API顺序来说明方法如何使用并试着将对于源码的理解写上来; $(): 与jQuery的$()几乎一样,但zepto的选择器是直接使用的原生querySelectorAll(),所以,一些jQuery自定…

js中的全局变量和静态变量的使用, js 的调试?- 如果js出错, js引擎就会停止, 这会导致后面的 html中 refer 该函数时, 会报错函数为定义!!

效果里面的函数, 如show, hide,slideDown等, 这些都叫 "效果"函数, 但是里面可以包含动画, 也可以不包含动画. 动画,是指元素的内容是逐渐显示/隐藏的, 不是一下子就出来的. 如果函数中的参数 speed 或 spe, 不写, (speed的默认值等于0) 就是 "直接效果, 原始效果", 没有动画的版本; 如果指定了参数 spe, 就是有动画的版本, 两者都是 " 效果 " 函数效果函数中的 spee…

zepto源码--init--学习笔记

先展示init函数,由于笔记本屏幕太小,删掉了部分源码注释,才能在一屏内截图. 当我们调用$()的时候,便会直接调用zepto.init()生成zepto对象,跟jquery生成jquery对象类似.可以在插件中进行覆盖. 定义变量dom 分为5种情况,逐个进行判断. 1.未传入选择器,即没有传入任何参数的情况,直接返回一个空的zepto对象. 2.如果传入字符串类型的选择器,即传入的是css选择器清除selector参数的前后空格,selector = selector.trim() 然后区…

jQ的toggle()方法示例

定义和用法toggle() 方法切换元素的可见状态.如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法$(selector).toggle(speed,callback,switch) 参数: speed 可选.规定元素从可见到隐藏的速度(或者相反).默认为 "0".可能的值:毫秒 (比如 1500)"slow""normal""fast"在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度…

zepto学习之路--源代码提取

最近在看zepto的源代码,把一些有用的函数摘出来,看看zepto是怎么实现的,自己做的时候也可以用.说实话,zepto的实现有一些看起来还是很晦涩的,可能是自己的水平不够,看不透作者的真正的意图. 1.zepto的正则总结: //HTML代码片断的正则 fragmentRE = /^\s*<(\w+|!)[^>]*>/ //匹配非单独一个闭合标签的标签,类似将<div></div>写成了<div/> tagExpanderRE = /<(?!a…

读 Zepto 源码之神奇的 $

经过前面三章的铺垫,这篇终于写到了戏肉.在用 zepto 时,肯定离不开这个神奇的 $ 符号,这篇文章将会看看 zepto 是如何实现 $ 的. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本本文阅读的源码为 zepto1.2.0 zepto的css选择器 zepto.qsa 我们都知道,很多时候,我们都用$ 来获取DOM对象,这跟 zepto.qsa 有很大的关系. 源码 zepto.qsa = function(element, se…

前端笔记之移动端&响应式（上）媒体查询&Bootstrap&动画库&zepto&velocity

一.媒体(介)查询 1.1 基本语法媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变页面内容的情况下,为特性的一些输出设备定制显示效果. 使用 @media 查询,你可以针对不同的媒体类型(媒体.媒介)定义不同的样式.@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 基本语法: @media 约束词媒体类型…

css 函数

css还有一些强大的函数: 1. calc 可以混合多种单位来计算 div { font-size: calc(100vw/5 + 1rem - 100px) } 2. max.min.clamp max.min选最大/小的那个 clamp() 则是给一个值限定一个范围,超出范围外则使用范围的最大或者最小值. 遗憾的是没有浏览器支持 div{width:max(10% + 20px, 300px);} 3.toggle toggle() 函数在规则选中多于一个元素时生效,它会在几个值之间来回切换…

Zepto源码分析之一（代码结构及初始化）

关于读源码,读jQuery自然是不错,但太过于庞大不易解读,对于小白,最好从Zepto,Lodash这样的小库入手. 这里使用的是zepto1.1.6版本为例. 自执行函数在阅读之前,先弄清楚闭包和自执行函数两种方式: (function() {})() 和 (function() {}()) (function() { console.log('这里直接执行') })() (function () { console.log('这里直接执行') }()) 自执行函数的优势在于,避免了全局变…

zepto 事件分析1($.Event)

先看一下zepto事件的函数,在这里,zepto是把zepto对象作为一个立即执行函数的参数传进去的. (function($){ ... ... })(Zepto) 在zepto事件函数中,主要为$.Event,$.on,$.off等,分析事件代码,分析这三个就够了,首先分析$.Event函数,在分析该函数之前,从接口文档中大概知道这是一个创建事件的方法,可以先看一下原生的javascript代码是怎么生成一个事件的. var event = new Event('event'); //老式创…

zepto的构造器$

在zepto中,通过$来构造对象 $ = function(selector, context){ return zepto.init(selector, context) } 由该函数,实际上,在调用$函数时相当于调用init方法,接下来看init函数: zepto.init = function(selector, context) { var dom // If nothing given, return an empty Zepto collection //返回一空的zepto对象 i…

【zepto--toggle函数】的更多相关文章

关于jQuery中toggle()函数的使用

jquery1.9以上版本如何使用toggle函数

toggle函数

zepto - toggle

jquery的toggle()函数，显示/隐藏交替

zepto学习之路--核心函数$()的实现

zepto源码--核心方法6（显示隐藏）--学习笔记

Zepto源码解读

使用toggle()方法进行显示隐藏

学习zepto.js(Hello World)

js中的全局变量和静态变量的使用, js 的调试?- 如果js出错, js引擎就会停止, 这会导致后面的 html中 refer 该函数时, 会报错函数为定义!!

zepto源码--init--学习笔记

jQ的toggle()方法示例

zepto学习之路--源代码提取

读 Zepto 源码之神奇的 $

前端笔记之移动端&响应式（上）媒体查询&Bootstrap&动画库&zepto&velocity

css 函数

Zepto源码分析之一（代码结构及初始化）

zepto 事件分析1($.Event)

zepto的构造器$

jQuery中hover方法和toggle方法使用指南

读 Zepto 源码系列

jQuery UI 实例 – 切换(Toggle)

jQuery 效果 - toggle() 方法切换元素的可见状态。

jQuery使用toggle()方法进行显示隐藏

JQuery中一些常用函数的运用

Ecshop之ajax修改表里的状态(函数化处理)

Jquery中的toggle()方法

Zepto核心模块源代码分析

jQuery toggle 使用