jquery动画 | 易学教程

zepto中的动画+Ajax+touch模块+zepto插件

阅读更多关于 zepto中的动画+Ajax+touch模块+zepto插件

zepto中的动画 zepto中不具备动画模块，需要单独引入 fx.js 和 fx_methods.js https://github.com/madrobby/zepto toggle 元素显示与隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>zepto</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <style> </style> </head> <body> <div>box</div> <button id="btn">点我</button> <script src="js/zepto.min.js"></script> <script src="js/fx.js"></script> <script src="js/fx_methods.js"></script> <script> $("#btn").click(function(){ $("div").toggle(); $("div").toggle("slow"); $("div").toggle(3000); }) </script> </body> <

看几道JQuery试题后总结（下篇）

阅读更多关于看几道JQuery试题后总结（下篇）

感谢圆友的提醒昨天下午完成了9道试题中的前4道，之后好多园友存在些疑惑和建议，在这里我一并说一下吧。首先对于昨天第一题可能存在误导，在JQuery中并没有innerHTML这个属性，不过我们可以将JQuery对象转换成DOM对象再使用innerHTML，还有对于那个innerTEXT也是操作DOM对象的，不过貌似用的比较少。其次是第三题，我们选择表单元素，尽量使用表单元素选择器。总之，感谢圆友们的批评指正、、、接下来我们继续完成昨天没有完成的试题...... 第五题题目：JQuery对象与dom对象的区别，以及两者互相转换的方法 var jquery = $("#x1"); //jquery对象 var dom = document.getElementById("#x1"); //dom对象　　两者区分：　　jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的，使用JQuery对象可以使用JQuery对象中的方法。例如在JQuery中我们可以使用"对　　　　象.html()"来获取元素内的内容，它等同于在DOM中使用"对象.innerHTML"。还有我们使用这两种对象的时候必须分清情况，不能再JQuery对象中使用DOM对象的方法，也不能在BOM对象中使用JQuery对象的方法，小弟我昨天就犯错了。　　两者互相转换： /

十分钟玩转 jQuery、实例大全

阅读更多关于十分钟玩转 jQuery、实例大全

一、简介定义　　jQuery创始人是美国 John Resig，是优秀的 Javascript 框架；　　jQuery 是一个轻量级、快速简洁的 javaScript 库。源码戳这 jQuery对象　　jQuery产生的对象时jQuery独有的，只能自己调用书写规则　　支持链式操作；　　在变量前加"$"符号（var $variable = jQuery 对象）；　　注：此规定并不是强制要求。二、寻找元素选择器基本选择器、层级选择器、属性选择器与CSS类似，这里不再细说，详细猛戳这里。基本筛选器 $('li:first') //第一个元素 $('li:last') //最后一个元素 $("tr:even") //索引为偶数的元素，从 0 开始 $("tr:odd") //索引为奇数的元素，从 0 开始 $("tr:eq(1)") //给定索引值的元素 $("tr:gt(0)") //大于给定索引值的元素 $("tr:lt(2)") //小于给定索引值的元素 $(":focus") //当前获取焦点的元素 $(":animated") //正在执行动画效果的元素内容选择器 $("div:contains('nick')") //包含nick文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(p)") /

Day51 前端基础--jQuery 事件

阅读更多关于 Day51 前端基础--jQuery 事件

一，jQuery常用事件　　1.(keyup/keydown)键盘事件　　　　批量操作　　2.hover(不是原生DOM事件，是jQuery封装的) 　　　　接收两个匿名函数　　　　$('').hover(function() {鼠标移上去要做的事},function() {鼠标移下去要做的事} ) 　　3.input事件: 　　　　只要input框的发生变化就会触发此事件　　4.click点击事件 click(function(){...}) //一般用于监视点击事件 hover(function(){...}) //一般用于对用户光标起反应 blur(function(){...}) //一般用于捕获用户输入完成的输入内容 focus(function(){...}) //获得焦点时触发 change(function(){...}) //一般用于监视表单状态 keyup(function(){...}) //一般与keydown配合实现键盘事件的批量操作 keydown(function(){...})input(function(){...}) //一般用于监视输入框的输入内容　二，jQuery绑定事件的方式 //1.jQ对象.事件(事件处理函数() {动作}) $(''").click(function() {}) //2.jQ对象.on(事件,事件处理函数

jQuery基础

阅读更多关于 jQuery基础

jQuery jQuery基本流程图https://www.processon.com/mindmap/5bca9b19e4b0fe81b666b9ac 特点 jQuery是一个轻量级的、兼容多浏览器的JavaScript库 jQuery是用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行ajax交互，能够极大的简化JavaScript编程，使用jQuery的原因：简单，开发效率高，不用浏览器的差异化使用方法下载： https://jquery.com/ 导入通过网址下载之后script导入本地文件路劲就可以了通过使用bootcdn来使用jquery 按照jQuery的语法使用就可以了注意：必须先导入再使用 jQuery内容 jQuery对象和普通DOM对象的区别 jQuery选择器找到的是jquery对象原生的DOM找到的就是DOM对象互相转换 jQuery对象[0]------>DOM对象 $(DOM对象)------->jquery对象查找标签基本选择器 id选择器 $("#id") $("tagName") $(".className") $("div.c1") // 找到有c1 class类的div标签 //所有元素选择器 $("*") //组合选择器 $("#id, .className, tagName")

jQuery2.x源码解析(缓存篇)

阅读更多关于 jQuery2.x源码解析(缓存篇)

jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 缓存是jQuery中的又一核心设计，jQuery自身的很多东西都依赖于缓存，比如事件、一些中间变量、动画等。同时他还为用户提供接口了使用缓存的接口，方便用户在元素节点上保存自己的数据，并且帮助用户解决直接把数据保存到DOM元素是可能引起的内存泄漏、命名冲突等问题。同时，html5提出了一种通过属性缓存元素数据的功能，就是 data-*属性，他可以以字符串的形式保存数据，并且不会和元素固有属性冲突。jQuery的缓存提供了访问data-*的接口，与html5标准结合更加紧密，更加规范。提问：jQuery不同版本的缓存实现原理是什么？答：jQuery1.x与jQuery2.x、jQuery3.x是不同的。 jQuery1.x系列中，需要兼容ie6、ie7等早期的浏览器，在ie6、ie7这样的浏览器中，根据艾伦的博客，我们可以知道DOM元素与js对象相互引用，是会引起浏览器的内存泄漏问题。所以 jQuery1.x中，最大的问题是要防止在ie6、ie7浏览器上出现内存泄漏。为了避免DOM元素与js对象相互引用而造成的内存泄漏，jQuery必须从设计解决对象循环引用的问题。所以jQuery1.x将需要缓存到元素上的数据

jQuery 结构分析

阅读更多关于 jQuery 结构分析

jquery核心转自 http://www.iteye.com/topic/783260 (function( window, undefined ) { // 构造jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // 工具函数 Utilities // 异步队列 Deferred // 浏览器测试 Support // 数据缓存 Data // 队列 queue // 属性操作 Attribute // 事件处理 Event // 选择器 Sizzle // DOM遍历 // DOM操作 // CSS操作 // 异步请求 Ajax // 动画 FX // 坐标和大小 window.jQuery = window.$ = jQuery; })(window); 一构造jquery. 相对于其它库里传统的构造对象方法. jquery提供了一种截然不同的方法. 它选择创造一个全新的奇异世界. 首先所有的jquery代码被一个自动执行的闭包包裹起来, 只在后面暴露$和jQuery这2个变量给外界尽量避开变量冲突. Java代码 (function(window, undefined){ ….. })

jQuery 效果 – 动画

阅读更多关于 jQuery 效果 – 动画

在使用jQuery动画时，你可能想要实现更加丰富的效果，那么你可以通过使用 jQuery animate() 方法自定义动画来达到目的，具体的使用方法如下文所述。 jQuery animate() 方法允许您创建自定义的动画。 jQuery 注：实例运行过一次后，需刷新页面方可再次运行实例。 jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。语法： $( selector ).animate({ params } ,speed,callback ); 必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：实例 $("button").click(function(){ $("div").animate({left:'250px'}); }); 尝试一下 » 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！注意：在

jQuery 效果- 动画

阅读更多关于 jQuery 效果- 动画

jQuery animate() 方法允许您创建自定义的动画。 jQuery 动画实例 jQuery jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。语法： $( selector ).animate({ params } ,speed,callback ); 必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：实例 $("button").click(function(){ $("div").animate({left:'250px'}); }); 尝试一下 » 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！ jQuery animate() - 操作多个属性请注意，生成动画的过程中可同时使用多个属性：实例 $("button").click(function(){ $("div").animate({

jQuery 动画

阅读更多关于 jQuery 动画

jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。语法： $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素： $("button").click(function(){ $("div").animate({left:'250px'}); }); 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！ jQuery animate() - 操作多个属性请注意，生成动画的过程中可同时使用多个属性：实例 $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); 　　

订阅 jquery动画