jquery动画

JQuery基本概念

阅读更多关于 JQuery基本概念

1 什么是jQuery? jQuery的官网 [http://jquery.com/](http://jquery.com/) jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。 js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js） jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。 2 jQuery的版本官网下载地址：[http://jquery.com/download/](http://jquery.com/download/) jQuery版本有很多，分为1.x 2.x 3.x 大版本分类： javascript 1.x版本：能够兼容IE678浏览器 2.x版本：不兼容IE678浏览器 1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。 3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）关于压缩版和未压缩版 javascript jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。

jQuery入门[3]－事件

阅读更多关于 jQuery入门[3]－事件

jQuery入门[1]－构造函数 jQuery入门[2]－选择器 jQuery入门[3]－事件 jQuery入门[4]－链式代码 jQuery入门[5]－AJAX jQuery入门[6]－动画 jQuery对事件的支持主要包括： bind()--为事件绑定处理程序，如： $("p").bind("mouseenter mouseleave", function(e){ $(this).toggleClass("over"); }); unbind()--注销绑定在事件上的处理程序，如：$(document).unbind('ready');，如不给参数，则清除所有事件处理程序。 $("#unbind").click(function () { $("#theone").unbind('click', aClick); }); trigger()--触发某类事件。 $("button:first").trigger('click'); triggerHandler()--触发某类事件，但不触发默认的事件处理逻辑，比如a的定向。 $("input").triggerHandler("focus"); one()－－为事件绑定只能被触发一次的处理程序。 $("div").one("click", function(){ }); ready()/click()/change()

提升用户体验的最佳免费 jQuery 表单插件

阅读更多关于提升用户体验的最佳免费 jQuery 表单插件

网页表单是一个老生常谈的话题。出于这样或那样的目的，一些示例中都会包括用户注册，电子商务结算，用户设置甚至联系人表格。而输入栏是非常容易用现代的CSS3技术来应用样式。但是到底什么决定整体用户体验？在这篇文章中，我想展示一些免费的开源jQuery插件来帮助开发者创建更简易的web表单。访问者不用太多的犹豫就能完成表单的填写。你也许不想太过华丽页面元素，它会干扰手头的任务。考虑这些附加的特性，它就像一个用户指南，能帮助用户填写表单，而它们又涉及到唯一的或者不熟悉的内容。 jQuery Autotab 自动挑格是个很棒的功能，这个功能我们完全可以从头开发。但是如果你想节省时间的话，可以选择 jQuery AutoTab 这个强大的插件去简化这个功能。当一个字段达到最大长度时，jQuery AutoTab将会检测到，并自动跳到form表单的下一个元素中。所有的input标签都是由以逗号间隔的字段组成的长字符串作为jQuery选择器来创建的。我喜欢这样的方式——使用这个插件，基于每个字段的tabindex属性，动态的，而不是手动地定义每个元素。它还有非常酷的过滤功能，以供你输入不同的内容，例如，数字的电话号码，或数字字母组合的街道地址。你可以从 Github官网获得一个副本，来看一下这个插件是如何工作的。 Pickadate.js 不久之前

JQUERY 常用方法汇总

阅读更多关于 JQUERY 常用方法汇总

Attribute： $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("title", function() { return this.src }); 给某个元素添加属性/值 $("元素名称").html(); 获得该元素内的内容（元素，文本等） $("元素名称").html("<b>new stuff</b>"); 给某元素设置内容 $("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值 $("元素名称").removeClass("class") 给某元素删除指定的样式 $("元素名称").text(); 获得该元素的文本 $("元素名称").text(value); 设置该元素的文本值为value $("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 $("input元素名称").val(); 获取input元素的值 $("input元素名称").val(value);

阅读更多关于 jQuery动画

1. 基本效果 show([s,[e],[fn]]) 显示隐藏的匹配元素 hide([s,[e],[fn]]) 隐藏显示的元素 toggle([s],[e],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的参数详解 speed : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn : 在动画完成时执行的函数，每个元素执行一次。 2. 滑动效果 slideDown([s],[e],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素 slideUp([s,[e],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素 slideToggle([s],[e],[fn]) 通过高度变化来切换所有匹配元素的可见性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动播放</title> <style> body { background:#ccc; } #box { margin:100px auto; width: 1000px; height: 460px;

JQuery速成大法

阅读更多关于 JQuery速成大法

什么是 JQuery 呢，很多都是只闻其名。 jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。要用JQuery，首先要有一定的JS基础，否则根本看不懂这是个嘛玩意。有了JS基础后，就会发现，哇，JS好复杂，JQuery好简单粗暴下面就让我们来看一下如何来用JQuery 【Jquery语法】 1.通过jQuery("选择器").action();通过选择器调用事件函数。但JQuery中jQuery可以用$符代替，$("选择器").action(); ①选择器可以直接使用CSS选择器，选中元素 ②action表示对元素执行的操作 ps:各种选择器的用法可以自己去查帮助文档 2.文档就绪函数：防止了文档在完全加载(就绪)之前运行JQuery代码 $(document).ready(function(){ JQuery代码 }); $(function(){})//这是文档就绪函数简写方式PS 看到文档就绪函数，不免就会想到JS中的window.onload。这里我们来说一下它们俩的区别 ①

jquery 动画

阅读更多关于 jquery 动画

jquery动画有意思的地方见效果图：思想：将图片设置分割div的背景图片，控制div的属性，可以现实有趣的滤镜效果，本例中展示了一种，感兴趣的朋友可以尝试其他滤镜的实现。本例其余动画部分，主要是利用jquery中提供animate和 delay实现。 animate：这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性。 delay ：设置一个延时来推迟执行队列中之后的项目。实例效果： <!DOCTYPE html> <html> <head> <title>jquery 动画</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://files.cnblogs.com/kuikui/jquery.js"></script> <style type="text/css"> *{margin: 0px;padding: 0px;} #test{width:300px; height: 300px; position: relative; margin: 20px auto 0px;} </style> </head> <body> <div id=

jQuery基础【1】

阅读更多关于 jQuery基础【1】

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：　　•HTML 元素选取　　　　　 •HTML 元素操作　　•CSS 操作　　　　　　　 •HTML 事件函数　　•JavaScript 特效和动画　　•HTML DOM 遍历和修改　　•AJAX　　　　　　　　　　•Utilities 1.向页面添加jQuery 库 1 <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> 2 <%--使用 Google 的 CDN--%> 3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs 4 /jquery/1.4.4/jquery.min.js"></script> 5 <%--使用 Microsoft 的 CDN--%> 6 <script type=

我的收藏

阅读更多关于我的收藏

平时收藏了一些好的站点，在些谢谢那些作者： Bookmarks 书签栏书签工具栏综合看雪安全论坛 - www.pediy.com 蓝色理想经典论坛-前端开发 UI设计 web编程 w3school 在线教程 DIV+CSS教程_DIV+CSS布局_十天学会div+css_web标准化——标准之路禅意花园学习编程 | Codecademy 51CTO.COM - 技术成就梦想 - 中国领先的IT技术网站后代选择器和子选择器的区别！！！ - Knuth_档案 - 博客园详细解读DIV+CSS定位 CSS/DIV网页设计视频教程目录 - CSS,Javascript,jQuery,视频教程 - Web网页设计开发制作技巧，前沿视频教室 CSS论坛 - DIVCSS5 前端练习系列60-ie绝对定位点击的问题 | <前端开发> CSS3-HTML5之家中文CSS3,HTML5教程网站让IE也支持box-shadow | Web前端开发 – 专注于网站前端设计与Web用户体验 W3CPlus | css3教程-css3实例-css3动画 | 记述前端那些事——引领Web前沿 22款给力的HTML5和CSS3帮助工具前端集锦工具 | 前端开发网(W3Cfuns.com)! RD1012: 不同浏览器内 'line-height' 样式设置会影响不同行内替换元素的显示高度 -

jQuery学习（1）猜数字游戏

阅读更多关于 jQuery学习（1）猜数字游戏

jQuery是一个快捷、小型且特征丰富的JavaScript库。它使得HTML文档遍历及操作，事件处理，动画，Ajax等更简洁方便。它通过调用一个简单易用的API，就能在各种浏览器中使用。由于jQuery本身很好的兼容性和延展性，它的出现改变了千百万使用者书写JavaScript的习惯。本次分享将会对jQuery的学习做一个简单的应用，那就是猜数字游戏。开始页面如下：我们有必要对该游戏的处理逻辑做一些简单的分析。首先，后台会随机产生一个1-100之间的整数。然后，用户在输入框中进行输入操作，当输入不是数字时，则弹出对话框并提示；如果输入的数字<1或者>100，则则弹出对话框并提示；如果输入的数字等于产生的随机数，则提出输入正确；若如果输入的数字小于产生的随机数，则提出输入的数字过小；若如果输入的数字小于产生的随机数，则提出输入的数字过小。完整的jQuery代码如下： <!DOCTYPE html> <html> <head> <script src="jquery-3.2.1.js"></script> <script> $(document).ready(function(){ var correctNumber = Math.floor(Math.random()*100)+1; var result = ""; $("button").click

订阅 jquery动画