jquery动画

jquery 实现加载前动画

大憨熊 提交于 2020-04-08 00:29:08
这里主要用$.ajax(options) 这个是jQuery 的底层 Ajax 实现。简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。 注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。当设置 datatype 类型为 'script' 的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。 $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。 jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。 参数名称 类型 说明 url String (默认: 当前页地址) 发送请求的地址 type String (默认

jQuery 事件与事件对象

自闭症网瘾萝莉.ら 提交于 2020-04-03 23:06:11
一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言 本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性. 大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列举一些作品供大家借鉴. 另外本人水平有限, 因为我不是UI设计师. 文章可能有错误的地方, 希望大家帮忙指出, 一起学习一起进步. 在技术的世界里我们是没有任何利益瓜葛. 希望大家都抱着彼此鼓励的心态, 对于回复中的激进评论我也都会考虑, 但是希望能够彼此尊重, 保护博客园这片程序员的净土! 三.事件与事件对象 曾经在我的 " Javascript公共脚本库系列(二): 添加事件多播委托的方法 " 和 " Javascript公共脚本库系列(三): 格式化事件对象/事件对象详解 " 两篇文章中, 曾讲解过javascript中的事件和事件对象. 首先看一下我们经常使用的添加事件的方式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns

使用jQuery实现标签(Tab)切换效果

强颜欢笑 提交于 2020-04-03 21:54:10
我们经常可以看到网页设计中使用Tab标签切换的方式来展示网页内容。以我的理解,这样做有两点好处:节约了网页空间而展示了更多的内容;将不同分类的内容放在不同标签下,结构清晰。 下面就给大家介绍一款通过Jquery实现Tab标签效果的示例(该示例来自于国外著名的Web设计站http://www.queness.com/)。 首先,让我们对这个示例有一个感性认识,去看看 在线示例 由于使用了JQuery中提供的动画效果,使得该示例的Tab切换过程变得平滑流畅,这是该示例值得称道之处。 来源: https://www.cnblogs.com/rips216/archive/2011/04/25/2027599.html

分享jQuery瀑布流的插件和案例、几款jquery瀑布流插件、jquery瀑布流下载

夙愿已清 提交于 2020-04-01 16:42:34
2012-11-06 分类: Jquery 、 技术分享 244 views “ 瀑布流 布局”随着pinterest网的流行而出名,现在国内使用这种风格布局的网站也越来越多,比如说Mark之,蘑菇街,点点网,哇哦等等。 今天,主要向大家介绍一些相关的制作插件,以及成功的案例,希望能给大家今后的工作有所帮助。 制作 瀑布流 布局的优秀插件 首先简单的向大家推荐几款制作 瀑布流 的 jQuery 插件,这些插件能帮助大家轻松的实现类似于pinterest的布局效果: 1. Masonry Masonry是一个动态的网格布局插件。每个元素水平方向都采用全float布局,但在垂直方向使用绝对定位来控制元素的位置,犹如彻墙一样,能做到见缝插针。 2. Isotope Isotope是一款实现动态布局的精致 jQuery 插件,是单独的CSS无法实现的,而且他可以通过 jQuery 选择器来控制元素的显示与隐藏等。 3. Blockslt BlocksIt.js是一个创建动态的网格布局的jQuery插件。它将HTML元素转换为“块”,它们的位置布局类似于网格布局的Pinterest一样。 4. Wookmark Wookmark是一款简单的动态网格布局的jQuery插件。 5. Pinterest Clone Layout 这是一个客隆了Pinterest网站布局的jQuery

第1章 jQuery入门

早过忘川 提交于 2020-04-01 07:25:30
学习要点: 1.什么是 jQuery 2.学习 jQuery 的条件 3.jQuery 的版本 4.jQuery 的功能和优势 5.其他 JavaScript 库 6.是否兼容低版本 IE 7.下载及运行 jQuery 一.什么是 jQuery jQuery 是一个 JavaScript 库,它通过封装原生的 JavaScript 函数得到一整套定义好的方法。它的作者是 John Resig ,于 2006 年创建的一个开源项目,随着越来越多开发者的加入, jQuery 已经集成了 JavaScript 、 CSS 、 DOM 和 Ajax 于一体的强大功能。它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。 主旨:以更少的代码、实现更多的功能 二.学习 jQuery 的条件 jQuery 是 JavaScript 库,所以 jQuery 在使用上要比原生的 JavaScript 要简单,但是对于网页编程来说,有些通用的基础知识是必备的: 1.XHTML 或 HTML5 (含 CSS ,网页必备的基础技术, XHTML 已完结 90 课); 2.JavaScript (虽然 jQuery 使用比 JavaScript 简单,但各种语法来自 JavaScript ,只要掌握已出课程的第一季 149 课即可,并不需要完全精通,只要理解语法和项目中简单的用法即可。);

第 1 章 jQuery 入门

[亡魂溺海] 提交于 2020-04-01 07:24:31
学习要点: 1.什么是 jQuery 2.学习 jQuery 的条件 3.jQuery 的版本 4.jQuery 的功能和优势 5.其他 JavaScript 库 6.是否兼容低版本 IE 7.下载及运行 jQuery 学习网址:https://jquery.com/ 一.什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方 法。它的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入, jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它可以用最少的代码, 完成更多复杂而困难的功能,从而得到了开发者的青睐。 二.学习jQuery的条件 jQuery是JavaScript库,所以jQuery在使用上要比原生的JavaScript要简单,但是对于 网页编程来说,有些通用的基础知识是必备的: 1.XHTML或HTML5(含CSS,网页必备的基础技术,XHTML已完结90课); 2.JavaScript(虽然jQuery使用比JavaScript简单,但各种语法来自JavaScript,只要掌 握已出课程的第一季149课即可,并不需要完全精通,只要理解语法和项目中简单的用法即 可。); 3.服务器语言如:PHP(jQuery属于前端技术

ExtJS与JQuery对照

痞子三分冷 提交于 2020-04-01 07:05:15
首先在介绍ExtJS和JQuery,然后进行比较 一个、什么是ExtJS? 1、ExtJS能够用来开发RIA也即富 client 的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与 后台 技术无关的前端 ajax框架 。因此。能够把ExtJS用在 .Net 、 Java 、 Php 等各种开发语言开发的应用中。 ExtJs最開始基于YUI技术。由开发者JackSlocum开发。通过參考JavaSwing等机制来组织可视化组件,不管从UI界面上CSS样式的应用,到数据解析上的 异常处理 ,都可算是一款不可多得的JavaScript client 技术的精品。 2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和 Java平台 上Swing两者,并为开发人员屏蔽了大量跨 浏览器 方面的处理。相对来说,EXT要比开发人员直接针对DOM、W3C对象模型开发UI组件轻松。 二、什么是JQuery? jQuery是一个兼容多浏览器的 javascript 框架,核心理念是write less,do more(写得更少,做得很多其它)。jQuery在2006年1月由美国人 John Resig 在纽约的 barcamp 公布。吸引了来自世界各地的众多JavaScript高手增加,由Dave Methvin率领团队进行开发。现在。 jQuery

jQuery 事件方法

走远了吗. 提交于 2020-03-30 16:11:35
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。 触发实例: $("button#demo").click() 上面的例子将触发 id="demo" 的 button 元素的 click 事件。 绑定实例: $("button#demo").click(function(){$("img").hide()}) 上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发、或将函数绑定到指定元素的 blur 事件 change() 触发、或将函数绑定到指定元素的 change 事件 click() 触发、或将函数绑定到指定元素的 click 事件 dblclick() 触发、或将函数绑定到指定元素的 double click 事件 delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 die() 移除所有通过 live() 函数添加的事件处理程序。 error() 触发、或将函数绑定到指定元素的 error 事件 event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。 event.pageX 相对于文档左边缘的鼠标位置。 event.pageY 相对于文档上边缘的鼠标位置。

jQuery第一篇 (帅哥)

一世执手 提交于 2020-03-30 06:30:28
同学心目中的 jQuery : 简单易用,功能强大,对移动端来说,体积稍大。 1.1 回顾前面学到的 js 我们遇到的一些痛点 window.onload 事件有个事件覆盖的问题,我们只能写一个 代码容错性差 浏览器兼容性问题 书写很繁琐,代码量多 代码很乱,各个页面到处都是 动画效果,我们很难实现 1.2 jQuery 解决问题 解决了我们上面遇到所有问题 1.3 jQuery 的基本使用 min :它是压缩过的版本 区别:我们开发过程中,会用未压缩的版本,或者压缩的。 项目上线的时候,我们要用压缩过的版本。 版本问题: 1.xxx 版本 jQuery-1.11.1.js 2.xxx 版本 不再支持 IE6 、 7 、 8 1.3.1 引包 1. 要把我们的 jQuery 源文件拿到我们的项目里面来 2. 在我们的页面中引用 jQuery 文件 问题: 如果遇到这种问题,那肯定是没有引用我们的 jQuery 源文件。 用 jQuery 之前,先引入 jQuery ,然后,再去写我们的 jQuery 代码。 1.3.2 入口函数 $(document).ready(function(){}); $(function(){}); 1.3.3 事件处理程序 事件源 Js方式:document.getElementById(“id”) jQuery方式:$(“#id”) 事件 Js方式

主流JavaScript框架(Dojo、Google Closure、jQuery、Prototype、Mootools和YUI)的分析和对比

↘锁芯ラ 提交于 2020-03-29 14:40:57
本文主要选取了目前比较流行的JavaScript框架Dojo、Google Closure、jQuery、Prototype、Mootools和YUI进行对比,主要是根据网上的资料整理而成,希望可以供大家参考,如有错误欢迎指出:) 主流框架对比 Dojo(重量级框架) Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤,基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件:DateGrid,charts,离线应用,跨浏览器矢量绘图等。 优点: 1. 功能强大,组件丰富(包括图表支持) 2. 面向对象的设计,有统一的命名空间和包管理机制,适用于企业级或是复杂的大型Web应用开发 缺点: 1. 复杂,学习曲线陡 2. html中也需要涉及dojo属性,将来换框架的成本高,例如: <button dojoType="dijit.form.Button" id="helloButton"> 3. 性能问题,dojo加载采用了同步机制,会暂时锁定浏览器 Google Closure(重量级框架) Google Closure